Normes avancées du Web - GTI780 & MTI780 - ETS - A09

75
Normes avancées du Web Normes avancées du Web Sujets spéciaux en TI Le Web 2.0 : concepts et outils École de technologie supérieure par Claude Coulombe ETS - Montréal - 2009 ETS - Montréal - 2009 GTI-780 / MTI-780 GTI-780 / MTI-780

description

Présentation sur les normes avancées du Web dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009

Transcript of Normes avancées du Web - GTI780 & MTI780 - ETS - A09

Page 1: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

Normes avancées du Web Normes avancées du Web

Sujets spéciaux en TI

Le Web 2.0 : concepts et outils

École de technologie supérieure

par

Claude Coulombe

ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780

Page 2: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Normes avancées du WebNormes avancées du Web

* Source Clipart : http://www.clipart.com

Page 3: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

AjaxAjax Same Origin Policy (SOP)Same Origin Policy (SOP) Services WebServices Web Architecture SOAArchitecture SOA RESTREST RSS 2.0RSS 2.0 Atom 0.3 et 1.0Atom 0.3 et 1.0 MicroformatsMicroformats XSL – XSLTXSL – XSLT JSONJSON GearsGears

Normes avancées du WebNormes avancées du Web

Page 4: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Pourquoi des normes avancées?Pourquoi des normes avancées?Pour implémenter les fonctionnalités du Web 2.0Pour implémenter les fonctionnalités du Web 2.0

Améliorer l'expérience-utilisateur par des interfaces riches et Améliorer l'expérience-utilisateur par des interfaces riches et

réactivesréactives

Répondre aux besoins des architectures hétérogènes et distribuées Répondre aux besoins des architectures hétérogènes et distribuées

Implémenter les architectures à base de services WebImplémenter les architectures à base de services Web

Assurer la compatibilité entre les différents fureteurs et les Assurer la compatibilité entre les différents fureteurs et les

différentes technologies serveursdifférentes technologies serveurs

Obtenir de l'information à la carte et des interfaces riches en Obtenir de l'information à la carte et des interfaces riches en

contenucontenu

Faciliter la réutilisation, le partage (syndication) et la Faciliter la réutilisation, le partage (syndication) et la

transformation des contenus sur le Webtransformation des contenus sur le Web

Forte tendance : REST, ATOM & JSONForte tendance : REST, ATOM & JSON

Page 5: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

AjaxAjax

AjaxAjax

* Source Clipart : http://www.clipart.com

Page 6: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

AjaxAjax – Une véritable percée! – Une véritable percée!

AJAXAJAX

Le premier à utiliser le terme AJAXfut Jesse James Garrett en février 2005

* Source Clipart : http://www.clipart.com

Page 7: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Ajax (Asynchronous JavaScript & XML)Ajax (Asynchronous JavaScript & XML)

Fini le pénible rechargement de pages!Fini le pénible rechargement de pages!

Réalise des requêtes asynchrones au serveur Réalise des requêtes asynchrones au serveur et fait la mise-à-jour de la page Web sans faire et fait la mise-à-jour de la page Web sans faire de chargement completde chargement complet

Applications Web plus réactives et plus Applications Web plus réactives et plus dynamiquesdynamiques

Objet XMLHttpRequest inventé par M$Objet XMLHttpRequest inventé par M$

Basé sur du code-client en JavaScriptBasé sur du code-client en JavaScript

AjaxAjax – Une véritable percée! – Une véritable percée!

Page 8: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Fureteur client Interface utilisateur

Moteur Ajax

HTML + CSSAppel JavaScript

Ajax – Ajax – Diagramme de collaborationDiagramme de collaboration

Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php

Serveur

Base de données, systèmes de gestion

Serveur Web

Requête HTTP

Réponse HTTP(HTML + CSS)

Application Web traditionnelleServeur

Base de données, systèmes de gestion

Serveur Web et XML / JSON/ Texte

Requête HTTP

RéponseXML / JSON / Texte

Application Web Ajax

Fureteur client Interface utilisateur

Page 9: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Ajax – Diagramme de séquenceAjax – Diagramme de séquence

Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php

Avec Ajax qui est asynchrone, l'exécution dans le fureteur sur le poste client se poursuit sans attendre la réponse du serveur. La réponse sera traitée par une fonction de retour (fonction Callback) quand elle arrivera.

L'état de la requête est donné par l'attribut readyState de l'objet XMLHttpRequest.

Avee le Web traditionnel qui est asynchrone, le fureteur est gelé en attendant la réponse du serveur.

Page 10: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Ajax - Avantages & inconvénientsAjax - Avantages & inconvénients

* Source Clipart : http://www.clipart.com

Page 11: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Ajax - AvantagesAjax - Avantages Réponses rapides aux actions de l'utilisateurRéponses rapides aux actions de l'utilisateur

Applications Web riches, rapides et légèresApplications Web riches, rapides et légères

Pas de long téléchargement, ni d'installationPas de long téléchargement, ni d'installation

Permet de modifier partiellement la page affichée par le Permet de modifier partiellement la page affichée par le

fureteur pour la mettre à jour sans avoir à recharger la page fureteur pour la mettre à jour sans avoir à recharger la page

entière.entière.

Réduit la quantité d'information demandée au serveurRéduit la quantité d'information demandée au serveur

Fait davantage de traitement du côté client (en JavaScript) Fait davantage de traitement du côté client (en JavaScript)

et moins sur le serveur et le réseauet moins sur le serveur et le réseau

Donc économie en traitement serveur & bande passanteDonc économie en traitement serveur & bande passante

Page 12: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009* Source Clipart : http://www.clipart.com

Client léger HTML vs client riche AjaxClient léger HTML vs client riche Ajax

Page 13: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Client léger HTML vs client riche AjaxClient léger HTML vs client riche Ajax

* Source : http://www.google.com* Source : http://www.google.com

Serveuravec état

(statefull)

Serveursans état

(stateless)

Pas d'état persistant entre les transactions qui sont

considérées comme indépendantes

Client HTML(fureteur) sans état(stateless)

Pas d'état persistant entre les transactions qui sont

considérées comme indépendantes

Client JavaScript(fureteur) avec état(statefull)

Page 14: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Ajax - InconvénientsAjax - Inconvénients

JS

Ajax

Page 15: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Ajax - InconvénientsAjax - Inconvénients Phénomène de modePhénomène de mode Problèmes de compatibilité entre les différents fureteursProblèmes de compatibilité entre les différents fureteurs Ne fonctionne pas si JavaScript est désactivéNe fonctionne pas si JavaScript est désactivé Les données chargées de façon dynamique ne sont pas Les données chargées de façon dynamique ne sont pas

indexées par les moteurs de rechercheindexées par les moteurs de recherche Le bouton de retour en arrière et les signets ne Le bouton de retour en arrière et les signets ne

fonctionnent pasfonctionnent pas Si le traitement du côté serveur est long, le traitement Si le traitement du côté serveur est long, le traitement

asynchrone d'Ajax est également longasynchrone d'Ajax est également long Sécurité : davantage d'exposition aux attaques et XSSSécurité : davantage d'exposition aux attaques et XSS Basé sur JavaScript qui a ses propres inconvénientsBasé sur JavaScript qui a ses propres inconvénients Pas d'accès* en dehors du domaine du serveurPas d'accès* en dehors du domaine du serveur Plus exigeant sur le poste client (vieux PC ?) Plus exigeant sur le poste client (vieux PC ?)

* Note : En anglais « Same Origin Policy »

Page 16: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

SOP : Same Origin PolicySOP : Same Origin Policy

SOPSOP

* Source Clipart : http://www.clipart.com

Page 17: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Contrainte de sécurité SOPContrainte de sécurité SOP

* Note : qui roule dans un bac de sable (sandbox) * Note : qui roule dans un bac de sable (sandbox)

Pour des raisons de sécurité, un script JavaScript* provenant d'une Pour des raisons de sécurité, un script JavaScript* provenant d'une page donnée n'a accès qu'à des objets JavaScript qui sont issus du page donnée n'a accès qu'à des objets JavaScript qui sont issus du même domaine que la page d'origine.même domaine que la page d'origine.

La fameuse « Same Origin Policy » apparue avec Netscape 2 en 1996 La fameuse « Same Origin Policy » apparue avec Netscape 2 en 1996

L'idée est d'empêcher qu'un script malicieux ait accès à de L'idée est d'empêcher qu'un script malicieux ait accès à de l'information confidentielle contenue dans une autre page l'information confidentielle contenue dans une autre page

De plus le fureteur est limité à deux requêtes simultanées avec le De plus le fureteur est limité à deux requêtes simultanées avec le même hôtemême hôte

Il est cependant possible d'accéder à un domaine apparentéIl est cependant possible d'accéder à un domaine apparenté

Par exemple, soit l'URL d'origine : http://www.abc.com/dir/page.html Par exemple, soit l'URL d'origine : http://www.abc.com/dir/page.html

Page 18: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Contournement de la règle SOPContournement de la règle SOPLes applications Web centrées client bénéficieraient d'un accès élargi Les applications Web centrées client bénéficieraient d'un accès élargi aux services hébergés sur d'autres serveursaux services hébergés sur d'autres serveurs

Script signé, pas vraiment pratique!Script signé, pas vraiment pratique!

« Couche Proxy » sur le serveur, puisque le serveur n'a pas les « Couche Proxy » sur le serveur, puisque le serveur n'a pas les contraintes de sécurité du fureteurcontraintes de sécurité du fureteur

Le fureteur n'applique pas la règle SOP à toutes les ressources d'une Le fureteur n'applique pas la règle SOP à toutes les ressources d'une page Web. Par exemple, une balise page Web. Par exemple, une balise <img...><img...> peut référer à une URL peut référer à une URL dans un autre domaine.dans un autre domaine.

On peut aussi contourner la règle de sécurité SOP en prenant On peut aussi contourner la règle de sécurité SOP en prenant avantage de la balise avantage de la balise <script><script>. Une balise . Une balise <script><script> peut référer à un peut référer à un code qui est sur une autre page. Cependant, il faut pouvoir faire code qui est sur une autre page. Cependant, il faut pouvoir faire confiance à ce script.confiance à ce script.

Page 19: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Services WebServices Web

Services Services WebWeb

* Source Clipart : http://www.clipart.com

Page 20: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Services WebServices Web

* Note : CORBA est un bel exemple de design par comité

Origine : protocole de communication entre objets distribués ORB Origine : protocole de communication entre objets distribués ORB (Object Request Broker) comme CORBA*, DCOM et RMI (format (Object Request Broker) comme CORBA*, DCOM et RMI (format propriétaire binaire, lourdeur, complexité) datant d'avant l'invention propriétaire binaire, lourdeur, complexité) datant d'avant l'invention du Webdu Web

Environnements distribués et hétérogènes (différents langages et Environnements distribués et hétérogènes (différents langages et plateformes)plateformes)

Un service établit une relation entre un composant producteur et un Un service établit une relation entre un composant producteur et un composant consommateurcomposant consommateur

Utilisation de messages « en format ouvert » le plus souvent en XMLUtilisation de messages « en format ouvert » le plus souvent en XML

Possibilité d'activation par des événements*Possibilité d'activation par des événements*

Services synchrones ou asynchronesServices synchrones ou asynchrones

Cela dit, toute application Web, tout site Web est un service!Cela dit, toute application Web, tout site Web est un service!

Page 21: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Services Web - approchesServices Web - approches

* Note : une évolution intéressante!

Idée : marier HTTP et XML, 2 grandes approchesIdée : marier HTTP et XML, 2 grandes approches

RPC : appel de procédure à distance (Remote Procedure Call) bâti RPC : appel de procédure à distance (Remote Procedure Call) bâti par dessus HTTPpar dessus HTTP

Basés sur l'échange d'objets entre le client et le serveurBasés sur l'échange d'objets entre le client et le serveur

Souvent appelés services WS-*Souvent appelés services WS-*

REST : accès à une ressource via une URI/URLREST : accès à une ressource via une URI/URL

XML-RPC, un protocole de service web simple, précurseur de SOAP, XML-RPC, un protocole de service web simple, précurseur de SOAP, XML-RPC est à la base de plusieurs APIs pour les services de bloguesXML-RPC est à la base de plusieurs APIs pour les services de blogues

SOAP (Simple Object Access Protocol) avec WSDL (Web Services SOAP (Simple Object Access Protocol) avec WSDL (Web Services Description language), invocation du service selon le protocole SOAPDescription language), invocation du service selon le protocole SOAP

Historiquement, SOAP est passé de simple à complexe par l'effet Historiquement, SOAP est passé de simple à complexe par l'effet combiné d'une tendance à concevoir pour résoudre tous les problèmes combiné d'une tendance à concevoir pour résoudre tous les problèmes (Over-Engineered) et de la conception par comité.(Over-Engineered) et de la conception par comité.

De son côté, REST est un retour aux sources du Web, à suivre...De son côté, REST est un retour aux sources du Web, à suivre...

Page 22: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Services Web - Services Web - Avantages & inconvénientsAvantages & inconvénients

* Source Clipart : http://www.clipart.com

Page 23: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Services Web - avantagesServices Web - avantages

* Note : une évolution intéressante!

Interopérabilité entre différents composants logiciels écrits en Interopérabilité entre différents composants logiciels écrits en différents langages de programmation et fonctionnant sur différentes différents langages de programmation et fonctionnant sur différentes plateformes (OS)plateformes (OS)

Normes et protocoles ouverts, souvent en format texteNormes et protocoles ouverts, souvent en format texte

Basé sur HTTP (port 80) qui traverse les coupe-feuxBasé sur HTTP (port 80) qui traverse les coupe-feux

Architecture plus fexible, découplée et adaptableArchitecture plus fexible, découplée et adaptable

Page 24: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Services Web - InconvénientsServices Web - Inconvénients

* Note : une évolution intéressante!

Pas vraiment de normes établiesPas vraiment de normes établies

Performaces plus faibles que les approches moins Performaces plus faibles que les approches moins ouvertes et plus proches du matériel comme CORBA, ouvertes et plus proches du matériel comme CORBA, DCOM et RMIDCOM et RMI

Problème de sécurité (plus grande surface exposée)Problème de sécurité (plus grande surface exposée)

Page 25: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Architecture SOAArchitecture SOA

SOASOA

* Source Clipart : http://www.clipart.com

Page 26: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Architecture SOAArchitecture SOA

* Note : une évolution intéressante!

SOA (Service Oriented Architecture) Architecture orientée services SOA (Service Oriented Architecture) Architecture orientée services

Basée sur les services Web (WS) et les composants logicielsBasée sur les services Web (WS) et les composants logiciels

Reprend les concepts du calcul distribuéReprend les concepts du calcul distribué

Un service établit une relation entre un composant producteur et un composant Un service établit une relation entre un composant producteur et un composant

consommateurconsommateur

Application : ensemble de services qui communiquent par des messagesApplication : ensemble de services qui communiquent par des messages

Utilisation de messages « en format ouvert » le plus souvent en XMLUtilisation de messages « en format ouvert » le plus souvent en XML

Possibilité d'activation par des événements*Possibilité d'activation par des événements*

Régie selon des contrats d'échangeRégie selon des contrats d'échange

Souvent définie en termes de couches applicativesSouvent définie en termes de couches applicatives

Services synchrones ou asynchronesServices synchrones ou asynchrones

Populaire dans le e-commerce (B2B et B2C) Populaire dans le e-commerce (B2B et B2C)

Plateformes JEE et .NETPlateformes JEE et .NET

Page 27: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

L'annuaire des services référence tous les servicesL'annuaire des services référence tous les services

Le bus a un rôle d'intermédiaire entre le producteur et le consommateur du serviceLe bus a un rôle d'intermédiaire entre le producteur et le consommateur du service

Un service peut implémenter plusieurs interfacesUn service peut implémenter plusieurs interfaces

Un service doit respecter un contrat (ou règles de fonctionnement)Un service doit respecter un contrat (ou règles de fonctionnement)

Architecture SOAArchitecture SOA

* Source : Wikipedia & Dirk Krafzig, Karl Banke, and Dirk Slama. Enterprise SOA. Prentice Hall, 2005

SOA

Interface d'application Service Annuaire

des services Bus de service

ImplémentationContrat Interface

Logiqued'affaire Données

Page 28: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

SOA - Avantages & inconvénientsSOA - Avantages & inconvénients

* Source Clipart : http://www.clipart.com

Page 29: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

SOA - InconvénientsSOA - Inconvénients

* Note : le plus souvent en XML

« Phénomène de mode »« Phénomène de mode »

Tendance à la multiplication des couches et des messagesTendance à la multiplication des couches et des messages

Difficile à testerDifficile à tester

Problème de coordination ou orchestration entre les divers servicesProblème de coordination ou orchestration entre les divers services

Problème de sécurité (plus grande surface exposée)Problème de sécurité (plus grande surface exposée)

Problème de réelle interopérabilitéProblème de réelle interopérabilité

On constate une certaine lourdeur et de la complexitéOn constate une certaine lourdeur et de la complexité

Particulièrement SOAP est lourd et complexeParticulièrement SOAP est lourd et complexe

Difficile d'imaginer des communications SOAP directe avec une Difficile d'imaginer des communications SOAP directe avec une application Web au niveau fureteur (client-centric). Pas de service application Web au niveau fureteur (client-centric). Pas de service SOAP dans un client JavaScriptSOAP dans un client JavaScript

Page 30: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

SOA - AvantagesSOA - Avantages

* Note : le plus souvent en XML

Couplage faibleCouplage faible

Favorise les échanges entre toutes sortes de logiciels, peu Favorise les échanges entre toutes sortes de logiciels, peu importe leurs langages de programmationimporte leurs langages de programmation

Favorise la réutilisationFavorise la réutilisation

Favorise l'interopérabilitéFavorise l'interopérabilité

Favorise une réponse et une adaptation plus rapides des Favorise une réponse et une adaptation plus rapides des systèmes informatiques aux changements dans systèmes informatiques aux changements dans l'environnement technologiquel'environnement technologique

SOAP offre des possibilités étendues pour le traitement SOAP offre des possibilités étendues pour le traitement sécuritaire dessécuritaire des

TransactionsTransactions

SOA ouvre la voie à des architectures Web à base SOA ouvre la voie à des architectures Web à base d'événements (Event Driven)d'événements (Event Driven)

Page 31: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

SOA & Web 2.0SOA & Web 2.0

* Note : le plus souvent en XML

SOA et Web 2.0 ont beaucoup d'éléments en SOA et Web 2.0 ont beaucoup d'éléments en communcommun

Vision commune d'un Internet des servicesVision commune d'un Internet des services

Répondent à des besoins et des clientèles différentesRépondent à des besoins et des clientèles différentes

i.e. Web 2.0 davantage grand public et SOA pour les i.e. Web 2.0 davantage grand public et SOA pour les entreprisesentreprises

Il y a beaucoup de potentiel à combiner les Il y a beaucoup de potentiel à combiner les technologies et les principes du Web 2.0 et de technologies et les principes du Web 2.0 et de l'architecture SOAl'architecture SOA

Programmation événementielle ou à base Programmation événementielle ou à base d'événements d'événements (Event Driven)(Event Driven)

Page 32: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

RESTREST

RESTREST

* Source Clipart : http://www.clipart.com

Page 33: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

REST – La simplicité du WebREST – La simplicité du WebOn se connecte sur un serveur, on lui donne un chemin (URL/URI) On se connecte sur un serveur, on lui donne un chemin (URL/URI) vers un document et le serveur nous retourne le contenu HTML du vers un document et le serveur nous retourne le contenu HTML du document. C'est simplement HTTPdocument. C'est simplement HTTP

On peut voir cela comme l'échange de documents dans des On peut voir cela comme l'échange de documents dans des enveloppesenveloppes

URI, HTML ou XML et HTTPURI, HTML ou XML et HTTP

Adressable et sans état (Stateless)Adressable et sans état (Stateless)

Cycle HTTP :Cycle HTTP :

1) Construction de la requête : méthode HTTP + URL/URI + HTTP 1) Construction de la requête : méthode HTTP + URL/URI + HTTP entêtes + document (dans le cas de GET ou POST)entêtes + document (dans le cas de GET ou POST)

2) Envoi de la requête à un serveur HTTP2) Envoi de la requête à un serveur HTTP

3) Réception et traitement de la réponse : statut de la réponse + 3) Réception et traitement de la réponse : statut de la réponse + entêtes + document retournéentêtes + document retourné

*Note : Thèse de doctorat de Roy Fielding, en 2000

Page 34: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

RESTRESTREST (REpresentational State Transfer)* REST (REpresentational State Transfer)*

plus clairement appelé architecture orientée ressources ROA plus clairement appelé architecture orientée ressources ROA (Resource-Oriented Architecture) ou RESTful Web services(Resource-Oriented Architecture) ou RESTful Web services

Repose sur la notion de ressourcesRepose sur la notion de ressources

Pas de gestion d'état (stateless)Pas de gestion d'état (stateless)

Chaque ressource est accessible via une URI/URL uniqueChaque ressource est accessible via une URI/URL unique

Un ensemble de types de contenus MIME en requête et en réponseUn ensemble de types de contenus MIME en requête et en réponse

Chaque ressource répond à un ensemble de commandes HTTP de base Chaque ressource répond à un ensemble de commandes HTTP de base qui correspondent aux opérations classiques dites CRUDqui correspondent aux opérations classiques dites CRUD

*Note : Thèse de doctorat de Roy Thomas Fielding,

Page 35: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

REST – API uniformeREST – API uniforme

Obtenir une représentation d'une ressource : GETObtenir une représentation d'une ressource : GET

Créer une nouvelle ressource : PUT avec nouvel URICréer une nouvelle ressource : PUT avec nouvel URI

Créer une sous-ressource ou une extension : POST Créer une sous-ressource ou une extension : POST avec URI existanteavec URI existante

Modifier une ressource : PUT avec URI existanteModifier une ressource : PUT avec URI existante

Détruire une ressource : DELETE avec URI existanteDétruire une ressource : DELETE avec URI existante

*Note : Thèse de doctorat de Roy Fielding, en 2000

Page 36: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

REST – REST – Amazon S3 un service RESTfulAmazon S3 un service RESTful

À part le Web lui-même, il existe d'autres véritables À part le Web lui-même, il existe d'autres véritables services Web RESTservices Web REST

Par exemple Amazon S3 (Simple Storage Service)Par exemple Amazon S3 (Simple Storage Service)2 concepts : 2 concepts :

Un conteneur d'objets ou S3 BucketUn conteneur d'objets ou S3 Bucket

https://s3.amazonaws.com/<id bucket>https://s3.amazonaws.com/<id bucket>

Un objet S3Un objet S3

https://s3.amazonaws.com/<id bucket>/<id objet>https://s3.amazonaws.com/<id bucket>/<id objet>

Obtenir un objet : requête GET à l'URL de l'objetObtenir un objet : requête GET à l'URL de l'objet

Créer un nouveau bucket : requête PUT à un URL avec l'id du nouveau Créer un nouveau bucket : requête PUT à un URL avec l'id du nouveau bucketbucket

Créer un nouvel objet : PUT + URL avec <id bucket> / <id objet>Créer un nouvel objet : PUT + URL avec <id bucket> / <id objet>

Détruire un objet : DELETE + URL avec <id bucket> / <id objet>Détruire un objet : DELETE + URL avec <id bucket> / <id objet>

http://docs.amazonwebservices.com/AmazonS3/2006-03-01/ http://docs.amazonwebservices.com/AmazonS3/2006-03-01/

Page 37: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

REST – REST – Comparaison avec RPCComparaison avec RPCREST et RPC sont différents à plusieurs niveauxREST et RPC sont différents à plusieurs niveaux

*Note : Thèse de doctorat de Roy Fielding, en 2000

REST RPC

4 procédures : GET, POST, PUT, DELETE

Différents appels de procédures qui varient avec les applications

Document dans une enveloppe HTTP

Enveloppe SOAP XML dans une enveloppe HTTP

Procédure dans la méthode HTTP pas dans l'URI

Procédure dans l'URI

Usage selon les besoins du GET, POST, PUT, DELETE

Surcharge du POST ou utilisation unique du GET ou du POST

Page 38: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

REST – REST – Hybrides REST-RPCHybrides REST-RPC

Il existe aussi des hydrides REST-RPC ou faux services Il existe aussi des hydrides REST-RPC ou faux services RESTREST

Par exemple Flickr qui utilise le GET pour détruirePar exemple Flickr qui utilise le GET pour détruirehttp://www.flickr.com/services/...&method=flickr.photos.deletehttp://www.flickr.com/services/...&method=flickr.photos.delete

Aussi Delicious qui utilise le GET et des méthodes Aussi Delicious qui utilise le GET et des méthodes dans l'URIdans l'URIhttps ://api.del.icio.us/.../add https ://api.del.icio.us/.../add

Un exemple très fréquent : Soumission d'un formu-Un exemple très fréquent : Soumission d'un formu-laire avec un POST (le POST est surchargé i.e. il peut laire avec un POST (le POST est surchargé i.e. il peut être remplacé par différentes procédures non HTTP)être remplacé par différentes procédures non HTTP)

Un service qui utilise exclusivement le POST ou le GET est Un service qui utilise exclusivement le POST ou le GET est habituellement un service de style RPChabituellement un service de style RPC

*Note : Thèse de doctorat de Roy Fielding, en 2000

Page 39: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

REST – REST – Qualités d'un service RESTfulQualités d'un service RESTful

Adressabilité : une URI/URL pour chaque information utileAdressabilité : une URI/URL pour chaque information utile

Sans état (stateless) : chaque requête HTTP est complète et Sans état (stateless) : chaque requête HTTP est complète et isolée, toute l'information nécessaire est fournie au serveurisolée, toute l'information nécessaire est fournie au serveur

Représentation : un document échangé, l'état d'une ressourceReprésentation : un document échangé, l'état d'une ressource

Hyperliens et connectivité : les documents contiennent des Hyperliens et connectivité : les documents contiennent des hyperliens vers d'autres ressourceshyperliens vers d'autres ressources

Sans effet de bord : un GET va lire des informations sans rien Sans effet de bord : un GET va lire des informations sans rien changer à l'état du serveurchanger à l'état du serveur

Idempotence : une opération sur une ressource est Idempotence : une opération sur une ressource est idempotente si l'effet reste le même que l'on effectue idempotente si l'effet reste le même que l'on effectue l'opération une fois ou plusieurs fois. PUT et DELETE sont l'opération une fois ou plusieurs fois. PUT et DELETE sont idempotents.idempotents.

POST n'est ni idempotent ni sans effet de bordPOST n'est ni idempotent ni sans effet de bord

*Note : Thèse de doctorat de Roy Fielding, en 2000

Page 40: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Projet JAX-RS (JSR-311)Projet JAX-RS (JSR-311)

http://cwiki.apache.org/CXF20DOC/jax-rs-jsr-311.htmlhttp://cwiki.apache.org/CXF20DOC/jax-rs-jsr-311.html

Un outil à base d'annotations pour créer des services RESTUn outil à base d'annotations pour créer des services REST

@Path("/commande") @Path("/commande")

public class PriseCommandeService { public class PriseCommandeService {

@GET@GET

@Path(“/{id}”) @Path(“/{id}”)

public String getCommande()@PathParam(“id”) int commandeId {public String getCommande()@PathParam(“id”) int commandeId {

// corps de la méthode// corps de la méthode

} }

}}

En furetant à l'addresse hypothétique http://www.abc.com/commande/123 JAX-RS En furetant à l'addresse hypothétique http://www.abc.com/commande/123 JAX-RS

va faire une requête HTTP à la méthode getCommande() et va recevoir le contenu va faire une requête HTTP à la méthode getCommande() et va recevoir le contenu

retourné par la méthode getCommande() retourné par la méthode getCommande()

REST – REST – Quelques outils et ressourcesQuelques outils et ressources

Page 41: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Projet Restlet – bonne bibliothèque REST avec une intégration à GWTProjet Restlet – bonne bibliothèque REST avec une intégration à GWT

http://www.restlet.org/about/ http://www.restlet.org/about/

Restlet First steps (tutoriel)Restlet First steps (tutoriel)

http://www.restlet.org/documentation/1.1/firstStepshttp://www.restlet.org/documentation/1.1/firstSteps

Restlet-GWT module Restlet-GWT module

http://wiki.restlet.org/docs_1.1/13-restlet/28-restlet/144-restlet.htmlhttp://wiki.restlet.org/docs_1.1/13-restlet/28-restlet/144-restlet.html

REST – REST – Projet RestletProjet Restlet

Page 42: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Introduction to REST (article JavaLobby)Introduction to REST (article JavaLobby)

http://java.dzone.com/articles/intro-resthttp://java.dzone.com/articles/intro-rest

http://java.dzone.com/articles/putting-java-resthttp://java.dzone.com/articles/putting-java-rest

LivreLivre

RESTful Web ServicesRESTful Web Services

Leonard Richardson; Sam Ruby Leonard Richardson; Sam Ruby

O'Reilly Media, Inc.O'Reilly Media, Inc.

8 mai, 20078 mai, 2007

REST – REST – Quelques outils et ressourcesQuelques outils et ressources

Page 43: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

REST - Avantages & inconvénientsREST - Avantages & inconvénients

* Source Clipart : http://www.clipart.com

Page 44: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

REST est de plus en plus populaireREST est de plus en plus populaire

Les grands sites Web 2.0 comme Amazon, Yahoo!, Flickr offrent des Les grands sites Web 2.0 comme Amazon, Yahoo!, Flickr offrent des

services REST en plus des services SOAP traditionnelsservices REST en plus des services SOAP traditionnels

REST est bien intégré au canevas d'applications Ruby On Rails (RoR)REST est bien intégré au canevas d'applications Ruby On Rails (RoR)

REST - AvantagesREST - Avantages

Page 45: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Pas vraiment conçu pour les transactions, bien que Pas vraiment conçu pour les transactions, bien que

cela soit possiblecela soit possible

Pas conçu pour les protocoles avec états Pas conçu pour les protocoles avec états

Exige de transmettre toute l'information nécessaire à Exige de transmettre toute l'information nécessaire à

l'exécution de la requête (pas d'état dans le serveur)l'exécution de la requête (pas d'état dans le serveur)

REST - InconvénientsREST - Inconvénients

Page 46: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

RSSRSS

RSSRSS

* Source Clipart : http://www.clipart.com

Page 47: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Fil, flux ou canal RSS: syndication de contenuFil, flux ou canal RSS: syndication de contenu

Inventé chez Netscape en 1999 puis amélioré par Dave WinerInventé chez Netscape en 1999 puis amélioré par Dave Winer

RSS : Really Simple Syndication (à l'origine RDF* Site Summary)RSS : Really Simple Syndication (à l'origine RDF* Site Summary)

Permet d'ajouter facilement des contenus de d'autres sites (syndication)Permet d'ajouter facilement des contenus de d'autres sites (syndication)

Basé sur le XML, le RSS définit une liste d'items de contenu avec une URLBasé sur le XML, le RSS définit une liste d'items de contenu avec une URL

par item accompagnée de métadonnées qui décrivent le contenupar item accompagnée de métadonnées qui décrivent le contenu

Utilisé pour du contenu qui change fréquemment (diffusion de nouvelles, Utilisé pour du contenu qui change fréquemment (diffusion de nouvelles,

cours de la bourse, météo)cours de la bourse, météo)

Afficher les nouveautés d'un blogue (billets récents)Afficher les nouveautés d'un blogue (billets récents)

Baladodiffusion audio (flux RSS audio) et vidéo (flux RSS vidéo)Baladodiffusion audio (flux RSS audio) et vidéo (flux RSS vidéo)

Disponible par abonnementDisponible par abonnement

http://fr.wikipedia.org/wiki/RSS_(formathttp://fr.wikipedia.org/wiki/RSS_(format))

http://cyber.law.harvard.edu/rss/rss.htmlhttp://cyber.law.harvard.edu/rss/rss.html

RSSRSS

* RDF : Resource Description Framework à la base du Web sémantique

Page 48: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Contenu entre les balises Contenu entre les balises <rss><rss>, métadonnées entre les balises , métadonnées entre les balises <channel><channel>, , <title><title> : le : le titre de l'item , titre de l'item , <description><description> : description de l'item, : description de l'item, <link><link> : l'URL du site associé à l'item : l'URL du site associé à l'item

<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?>

<rss version="2.0"><rss version="2.0">

<channel><channel>

<title>Fil RSS (créé avec Rome)</title><title>Fil RSS (créé avec Rome)</title>

<link>http://rome.dev.java.net</link><link>http://rome.dev.java.net</link>

<description>Ce fil RSS a été créé avec Rome (utilitaire Java de syndication RSS)</description><description>Ce fil RSS a été créé avec Rome (utilitaire Java de syndication RSS)</description>

<item><item>

<title>Le Bic - Prédictions des marées pour 7 jours</title><title>Le Bic - Prédictions des marées pour 7 jours</title>

<link>http://www.marees.gc.ca/cgi-bin/tide-shc.cgi?<link>http://www.marees.gc.ca/cgi-bin/tide-shc.cgi?

queryType=showFrameset&amp;zone=2&amp;language=french&amp;region=4&amp;stnnum=2995</link>queryType=showFrameset&amp;zone=2&amp;language=french&amp;region=4&amp;stnnum=2995</link>

<description>Extraction du contenu de la table des marées...</description><description>Extraction du contenu de la table des marées...</description>

</item></item>

<item><item>

<title>Cacouna - Prédictions des marées pour 7 jours</title><title>Cacouna - Prédictions des marées pour 7 jours</title>

......

</item></item>

</channel></channel>

</rss></rss>

RSS 2.0RSS 2.0

Page 49: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

RSS – baladodiffusionRSS – baladodiffusion

* Source : http://fr.wikipedia.org/wiki/Podcast

La baladodiffusion (podcast) qui est la diffusion de contenu multimédia est basée sur les flux La baladodiffusion (podcast) qui est la diffusion de contenu multimédia est basée sur les flux

RSS. Le logiciel de recherche de baladodiffusion télécharge automatiquement le fichier RSS. Le logiciel de recherche de baladodiffusion télécharge automatiquement le fichier

multimédia associé à l'item du flux RSS. Utilisation de la balise multimédia associé à l'item du flux RSS. Utilisation de la balise <enclosure><enclosure> : :

<enclosure url="http://www.radio.org/balado/exemple.mp3" length="3968800" type="audio/mpeg" /><enclosure url="http://www.radio.org/balado/exemple.mp3" length="3968800" type="audio/mpeg" />

Page 50: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

ROME : Rss and atOM utilitiEs : une excellente bibliothèque Java en code ROME : Rss and atOM utilitiEs : une excellente bibliothèque Java en code

source libre qui se base sur JDOMsource libre qui se base sur JDOM

Support de toutes les versions de RSS et d'AtomSupport de toutes les versions de RSS et d'Atom

Analyse, génération et conversion de flux RSS d'un format à l'autreAnalyse, génération et conversion de flux RSS d'un format à l'autre

Sorties vers : String, File, java.io.Writer, org.w3c.dom.Document,Sorties vers : String, File, java.io.Writer, org.w3c.dom.Document,

org.jdom.Documentorg.jdom.Document

Entrées depuis : File, java.io.Reader, org.xml.sax.InputSource, Entrées depuis : File, java.io.Reader, org.xml.sax.InputSource,

org.w3c.dom.Document, org.jdom.Document objectorg.w3c.dom.Document, org.jdom.Document object

Un ensemble de modules : iTunes, A9 Open Search, Google Base, etc.Un ensemble de modules : iTunes, A9 Open Search, Google Base, etc.

https://rome.dev.java.net/https://rome.dev.java.net/

ROMEROME

* RDF : Resource Description Framework

Page 51: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

RSS - Avantages & inconvénientsRSS - Avantages & inconvénients

* Source Clipart : http://www.clipart.com

Page 52: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

L'information étant rafraîchie régulièrement, l'usager peutL'information étant rafraîchie régulièrement, l'usager peut

manquer une nouvelle importantemanquer une nouvelle importante

Généralement pas d'archivageGénéralement pas d'archivage

Surabondance d'information (infobésité)Surabondance d'information (infobésité)

Accent sur la nouveauté, pas sur l'analyse et la réflexionAccent sur la nouveauté, pas sur l'analyse et la réflexion

La licence RSS 2.0 appartient à la faculté de droit de l'UniversitéLa licence RSS 2.0 appartient à la faculté de droit de l'Université

HarvardHarvard

RSS - InconvénientsRSS - Inconvénients

Page 53: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Usager : permet d'être informé d'un contenu sans aller le Usager : permet d'être informé d'un contenu sans aller le

consulterconsulter

Diffuseur: attirer des visiteurs, syndiquer (partager des Diffuseur: attirer des visiteurs, syndiquer (partager des

contenus), recyclage/réutillisation des contenuscontenus), recyclage/réutillisation des contenus

Bon pour la veille, pour suivre l'actualité ou tenir informer des Bon pour la veille, pour suivre l'actualité ou tenir informer des

nouveautésnouveautés

Grâce aux CSS, l'apparence peut être personnaliséeGrâce aux CSS, l'apparence peut être personnalisée

Réutiliser le contenu issu d'un autre site tout en personnalisant laRéutiliser le contenu issu d'un autre site tout en personnalisant la

présentationprésentation

RSS - AvantagesRSS - Avantages

Page 54: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

AtomAtom

AtomAtom

* Source Clipart : http://www.clipart.com

Page 55: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Atom est un format de syndication créé en 2003 pour combiner laAtom est un format de syndication créé en 2003 pour combiner la

simplicité de RSS 2.0 (i.e. non basé sur RDF) mais en conservant simplicité de RSS 2.0 (i.e. non basé sur RDF) mais en conservant

certains aspects de RSS 1.0 comme l'espace de nommagecertains aspects de RSS 1.0 comme l'espace de nommage

Norme non propriétaire accrédité par l'IETF (Internet Engineering Norme non propriétaire accrédité par l'IETF (Internet Engineering

Task Force)Task Force)

Créée en réaction au format RSS 2.0 qui appartient à la faculté de Créée en réaction au format RSS 2.0 qui appartient à la faculté de

droit de l'Université Harvarddroit de l'Université Harvard

Atom 0.3 est plus répandu mais la dernière version est Atom 1.0Atom 0.3 est plus répandu mais la dernière version est Atom 1.0

Atom sert d'API standard pour les blogues (Atom Publishing Protocol)Atom sert d'API standard pour les blogues (Atom Publishing Protocol)

Choisi par Google pour BloggerChoisi par Google pour Blogger

Propose un API REST (Atom Publishing Protocol)Propose un API REST (Atom Publishing Protocol)

http://tools.ietf.org/html/rfc4287http://tools.ietf.org/html/rfc4287

AtomAtom

Page 56: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?>

<feed xmlns="http://purl.org/atom/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" version="0.3"><feed xmlns="http://purl.org/atom/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" version="0.3">

<title>Sample Feed (created with Rome)</title><title>Sample Feed (created with Rome)</title>

<link rel="alternate" href="http://rome.dev.java.net" /><link rel="alternate" href="http://rome.dev.java.net" />

<tagline>This feed has been created using Rome (Java syndication utilities</tagline><tagline>This feed has been created using Rome (Java syndication utilities</tagline>

<entry><entry>

<title>Rome v1.0</title><title>Rome v1.0</title>

<link rel="alternate" href="http://wiki.java.net/bin/view/Javawsxml/Rome01" /><link rel="alternate" href="http://wiki.java.net/bin/view/Javawsxml/Rome01" />

<author><author>

<name /><name />

</author></author>

<modified>2004-06-08T04:00:00Z</modified><modified>2004-06-08T04:00:00Z</modified>

<issued>2004-06-08T04:00:00Z</issued><issued>2004-06-08T04:00:00Z</issued>

<summary type="text/plain" mode="escaped">Initial release of Rome</summary><summary type="text/plain" mode="escaped">Initial release of Rome</summary>

<dc:date>2004-06-08T04:00:00Z</dc:date><dc:date>2004-06-08T04:00:00Z</dc:date>

</entry></entry>

......

</feed></feed>

Atom – Exemple de flux AtomAtom – Exemple de flux Atom

Page 57: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

MicroformatsMicroformats

µFµF

* Source Clipart : http://www.clipart.com

Page 58: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

MicroformatsMicroformatsApproche de normalisation du format des données basée sur Approche de normalisation du format des données basée sur

XML / XHTML et l'étiquetage sémantique (métadonnées)XML / XHTML et l'étiquetage sémantique (métadonnées)

But: l'automatisation, la réutilisation, la recherche d'information & But: l'automatisation, la réutilisation, la recherche d'information &

l'interopérabilitél'interopérabilité

Conçus d'abord pour les humains mais lisibles par les machinesConçus d'abord pour les humains mais lisibles par les machines

Simplicité : « Si une spécification fait plus d'une page, elle est trop Simplicité : « Si une spécification fait plus d'une page, elle est trop

compliquée à implémenter »compliquée à implémenter »

Il existe une communauté Microformat qui n'est pas un organisme Il existe une communauté Microformat qui n'est pas un organisme

de normalisation. Processus ouvert qui cherche d'abord à se coller de normalisation. Processus ouvert qui cherche d'abord à se coller

aux usages.aux usages.

http://microformats.orghttp://microformats.org

Page 59: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Microformats – Aspect techniqueMicroformats – Aspect techniqueBasés sur XML / XHTML et les métadonnéesBasés sur XML / XHTML et les métadonnées

Utilisation des attributs : class, rel et revUtilisation des attributs : class, rel et rev

Peu de choses sont obligatoiresPeu de choses sont obligatoires

Souplesse dans l'utilisation des <div> et des <span>Souplesse dans l'utilisation des <div> et des <span>

•Par exemple une carte de visite en format hCardPar exemple une carte de visite en format hCard<address class="vcard"><address class="vcard">

<p><p>

<span class="fn">Claude Coulombe</span><br/><span class="fn">Claude Coulombe</span><br/>

<span class="org">École de technologie supérieure</span><br/><span class="org">École de technologie supérieure</span><br/>

<span class="tel">514-396-8800</span><br/><span class="tel">514-396-8800</span><br/>

<span class="email">[email protected]</span><br/><span class="email">[email protected]</span><br/>

<a class="url" href="<a class="url" href="http://www.etsmtl.ca/zone1/bottins/claudecoulombehttp://www.etsmtl.ca/zone1/bottins/claudecoulombe">Hyperlien Claude ">Hyperlien Claude Coulombe</a>Coulombe</a>

</p></p>

</address></address>

Formal Name

HTML vCard

Hyperlien original non RESTful : Hyperlien original non RESTful :

http://www.etsmtl.ca/zone1/bottins/Page_details.asp?Numero=4075http://www.etsmtl.ca/zone1/bottins/Page_details.asp?Numero=4075

Page 60: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Contacts ou personnes (hCard)Contacts ou personnes (hCard)

Événements et calendriers (hCalendar)Événements et calendriers (hCalendar)

Relation (rel-tag)Relation (rel-tag)

Coordonnées géographiques (Geo)Coordonnées géographiques (Geo)

Liens de vote (VoteLinks)Liens de vote (VoteLinks)

Références bibliographiques (Dublin Core, hCitation)Références bibliographiques (Dublin Core, hCitation)

Curriculum Vitae (hResume)Curriculum Vitae (hResume)

Microformats - ExemplesMicroformats - ExemplesHTML vCard

HTML iCalendar

Page 61: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Microformats - Avantages & inconvénientsMicroformats - Avantages & inconvénients

* Source Clipart : http://www.clipart.com

Page 62: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Microformats - AvantagesMicroformats - AvantagesRéutilisation facile des contenus sur le WebRéutilisation facile des contenus sur le Web

On peut même dire que RSS et ATOM s'apparentent aux microformats.On peut même dire que RSS et ATOM s'apparentent aux microformats.

Enrichissement des contenus. Enrichissement des contenus.

L'un des microformats les plus simples est le rel-tag. Par exemple, l'auteur d'un L'un des microformats les plus simples est le rel-tag. Par exemple, l'auteur d'un

blogue va ajouter rel='tag' à un hyperlien pour étiqueter son billet (folksonomie). blogue va ajouter rel='tag' à un hyperlien pour étiqueter son billet (folksonomie).

Soumis à un site comme technorati il peut ensuite voir son billet classé sous cette Soumis à un site comme technorati il peut ensuite voir son billet classé sous cette

catégorie.catégorie.

<a href="http://en.wikipedia.org/wiki/Web2" rel="tag">microformat</a><a href="http://en.wikipedia.org/wiki/Web2" rel="tag">microformat</a>

Synchronisation facile des données dans les applications. Synchronisation facile des données dans les applications.

Par exemple, des événements sont mis à jour sur un site web en format hCalendar Par exemple, des événements sont mis à jour sur un site web en format hCalendar

et ils se synchronisent automatiquement avec les applications de calendrier.et ils se synchronisent automatiquement avec les applications de calendrier.

Ajoutent de la sémantique aux personnes, aux lieux, aux événementsAjoutent de la sémantique aux personnes, aux lieux, aux événements

Un premier pas utile vers le Web sémantique...Un premier pas utile vers le Web sémantique...

Page 63: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Microformats - InconvénientsMicroformats - InconvénientsPeu de vraies normes, beaucoup de variantesPeu de vraies normes, beaucoup de variantes

Difficiles de s'y retrouverDifficiles de s'y retrouver

Parfois fastidieux à produireParfois fastidieux à produire

Page 64: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

XSL - XSLTXSL - XSLT

XSL / XSLTXSL / XSLT

* Source Clipart : http://www.clipart.com

Page 65: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

XSL / XSLTXSL / XSLTTechnologies d'extraction et de transformation des donnéesTechnologies d'extraction et de transformation des données

XSL (eXtensible Stylesheet Language)XSL (eXtensible Stylesheet Language)

XSLT (XML Stylesheet Language for Transformations) transforme un XSLT (XML Stylesheet Language for Transformations) transforme un

document source balisé (XML) en un second document (généralement document source balisé (XML) en un second document (généralement

balisé lui-aussi) balisé lui-aussi)

Les documents obtenus par Ajax sont souvent trop complexes pour être Les documents obtenus par Ajax sont souvent trop complexes pour être

traités « manuellement » à partir de l'API DOMtraités « manuellement » à partir de l'API DOM

Utilisation de l'extraction XPath ou des transformations XSLT pour obtenir Utilisation de l'extraction XPath ou des transformations XSLT pour obtenir

des données utilesdes données utiles

Peu valorisées à l'image des bases de données mais essentiellesPeu valorisées à l'image des bases de données mais essentielles

Page 66: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

entreeD1.xmlentreeD1.xml

<?xml version="1.0"?><?xml version="1.0"?>

<doc>Bonjour XSLT</doc><doc>Bonjour XSLT</doc>

D1versD2.xslD1versD2.xsl

<?xml version="1.0"?> <?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:template match="doc"><xsl:template match="doc">

<out><xsl:value-of select="."/></out><out><xsl:value-of select="."/></out>

</xsl:template></xsl:template>

</xsl:stylesheet></xsl:stylesheet>

=> sortieD2.xml=> sortieD2.xml

<?xml version="1.0"?><?xml version="1.0"?>

<out>Bonjour XSLT</out><out>Bonjour XSLT</out>

XSL / XSLT – Petit eXSL / XSLT – Petit exemple...xemple...

Page 67: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

import javax.xml.transform.*;import javax.xml.transform.*;

// Utilisation de l'interface TraX pour réaliser une transformation // Utilisation de l'interface TraX pour réaliser une transformation

// de la la manière la plus simple possible, en trois instructions Java// de la la manière la plus simple possible, en trois instructions Java

public class TransformDOC1versDOC2 {public class TransformDOC1versDOC2 {

public static void main(String[] args) throws TransformerException, public static void main(String[] args) throws TransformerException,

TransformerConfigurationException, FileNotFoundException, IOException { TransformerConfigurationException, FileNotFoundException, IOException {

if (args.length != 3 || args[0].equals("--aide")) {if (args.length != 3 || args[0].equals("--aide")) {

System.out.println("java TransformDOC1versDOC2 D1versD2.xsl entreeD1.xml sortieD2.xml");System.out.println("java TransformDOC1versDOC2 D1versD2.xsl entreeD1.xml sortieD2.xml");

return;return;

} }

TransformerFactory transFact = TransformerFactory.newInstance(); TransformerFactory transFact = TransformerFactory.newInstance();

Transformer transformer = transFact.newTransformer(new StreamSource(args[0])); Transformer transformer = transFact.newTransformer(new StreamSource(args[0]));

transformer.transform(new StreamSource(args[1]), new StreamResult(new FileOutputStream(args[2]))); transformer.transform(new StreamSource(args[1]), new StreamResult(new FileOutputStream(args[2])));

}}

}}

XSL / XSLT – Un peu de code...XSL / XSLT – Un peu de code...

Page 68: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

XSL / XSLT - outilsXSL / XSLT - outils

Du côté serveur : JAXP (Java API for XML Processing) Du côté serveur : JAXP (Java API for XML Processing)

Traitement du XML (validation, analyse, transformation) qui regroupe un ensemble Traitement du XML (validation, analyse, transformation) qui regroupe un ensemble d'outils Java pour le traitement du XML dont l'analyseur (parser) Xerces.d'outils Java pour le traitement du XML dont l'analyseur (parser) Xerces.

JAXP regroupe les 2 principales interfaces d'analyse (parsage) de documents XML :JAXP regroupe les 2 principales interfaces d'analyse (parsage) de documents XML :

DOM (Document Object Model) qui construit un arbre en mémoireDOM (Document Object Model) qui construit un arbre en mémoire

SAX (Simple API for XML) qui base son analyse sur le déclenchement SAX (Simple API for XML) qui base son analyse sur le déclenchement

d'événements (et évocation de fonctions callback)d'événements (et évocation de fonctions callback)

À cela s'ajoute l'API de transformation XSLT qui s'appuie sur le moteur de À cela s'ajoute l'API de transformation XSLT qui s'appuie sur le moteur de transformation Xalantransformation Xalan

Depuis Java 5, JAXP est inclus dans le JDK et fait partie du Java de baseDepuis Java 5, JAXP est inclus dans le JDK et fait partie du Java de base

Autres ressources serveurs : JDOM, dom4j et StAXAutres ressources serveurs : JDOM, dom4j et StAX

Du côté client : la bibliothèque JavaScript Google AjaxSLTDu côté client : la bibliothèque JavaScript Google AjaxSLT

http://goog-ajaxslt.sourceforge.net/http://goog-ajaxslt.sourceforge.net/

Page 69: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

JSONJSON

JSONJSON

* Source Clipart : http://www.clipart.com

Page 70: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

JSONJSONJSON : JavaScript Object NotationJSON : JavaScript Object Notation

Un nombre croisssant de services Web échangent des documents Un nombre croisssant de services Web échangent des documents

en format JSONen format JSON

Notation beaucoup plus compacte que le XMLNotation beaucoup plus compacte que le XML

=> consomme moins de bande passante=> consomme moins de bande passante

Directement interprétable par JavaScript (un simple eval)Directement interprétable par JavaScript (un simple eval)

=> demande moins de traitement=> demande moins de traitement

On assiste au développement d'un ensemble d'outils pour JSON On assiste au développement d'un ensemble d'outils pour JSON

qui sont directement inspirés de ce qui existe déjà pour XMLqui sont directement inspirés de ce qui existe déjà pour XML

http://www.json.org/json-fr.htmlhttp://www.json.org/json-fr.html

Page 71: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

JavaScript – Notation JSONJavaScript – Notation JSON Un prototype JavaScript en notation JSON commence par Un prototype JavaScript en notation JSON commence par {{ et se termine par et se termine par }}. Il . Il

contient un ensemble de couples attribut/valeur non ordonnés. Chaque attribut est contient un ensemble de couples attribut/valeur non ordonnés. Chaque attribut est suivi de suivi de :: et les couples attribut/valeur sont séparés par une  et les couples attribut/valeur sont séparés par une ,,

var auto = var auto = { {

fabricantfabricant : ' : 'Toyota',Toyota',

modele : 'Prius',modele : 'Prius',

couleur : 'vert',couleur : 'vert',

proprio : {proprio : {

nom = 'Lyne';nom = 'Lyne';

}}

};};

Page 72: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Google GearsGoogle Gears

GearsGears

* Source Clipart : http://www.clipart.com

Page 73: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Google GearsGoogle GearsL'usage des cookies pour la persistance est assez limitéL'usage des cookies pour la persistance est assez limité

Google Gears est un plugiciel (extension) du fureteur Google Gears est un plugiciel (extension) du fureteur

qui permet de mémoriser de plus grandes quantités de qui permet de mémoriser de plus grandes quantités de

données sur le poste clientdonnées sur le poste client

Gears fournit une base de données SQLGears fournit une base de données SQL

Pour FireFox 1.5 + et IE 6+Pour FireFox 1.5 + et IE 6+

http://gears.google.com/http://gears.google.com/

Page 74: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Google Gears – un peu de codeGoogle Gears – un peu de codepublic void save() throws StorageException {public void save() throws StorageException {

// Vérifier que Google Gears est installé// Vérifier que Google Gears est installé

if( ! IsGearsInstalled() ) throw new StorageException("Echec sauvegarde, Gears pas installé");if( ! IsGearsInstalled() ) throw new StorageException("Echec sauvegarde, Gears pas installé");

try { try { // Créer la table maBDGears si elle n'existe pas// Créer la table maBDGears si elle n'existe pas

Database db = new Database("maBdGears");Database db = new Database("maBdGears");

db.execute("create table if not exists maBdGears (key varchar(255), value text)");db.execute("create table if not exists maBdGears (key varchar(255), value text)");

// Sauvegarder la liste de valeurs contenues dans la Map getValues() dans la table// Sauvegarder la liste de valeurs contenues dans la Map getValues() dans la table

for(Iterator iter=getValues().entrySet().iterator(); iter.hasNext(); ){for(Iterator iter=getValues().entrySet().iterator(); iter.hasNext(); ){

Entry entry = (Entry) iter.next();Entry entry = (Entry) iter.next();

db.execute("insert into maBdGears values (?, ?)", new String[] {db.execute("insert into maBdGears values (?, ?)", new String[] {

(String) entry.getKey(), (String) entry.getValue()(String) entry.getKey(), (String) entry.getValue()

});});

}}

}}

catch (GearsException e) { throw new StorageException( "Echec sauvegarde", e );catch (GearsException e) { throw new StorageException( "Echec sauvegarde", e );

}}

}}

* Source : R. Dewsbury 2008 – Chap.6, p. 306-307* Source : R. Dewsbury 2008 – Chap.6, p. 306-307

Page 75: Normes avancées du Web  - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

QuestionsQuestions

??

* Source Clipart : http://www.clipart.com