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
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
1. 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
GTI-780 / MTI-780 ETS - Montréal - 2009
2. Normes avancées du Web
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
3. Normes avancées du Web
Ajax
Same Origin Policy (SOP)
Services Web
Architecture SOA
REST
RSS 2.0
Atom 0.3 et 1.0
Microformats
XSL– XSLT
JSON
Gears
GTI-780 / MTI-780 ETS - Montréal - 2009
4. Pourquoi des normes avancées?
Pour implémenter les fonctionnalités du Web 2.0
Améliorer l'expérience-utilisateur par des interfaces riches et
réactives
Répondre aux besoins des architectures hétérogènes et distribuées
Implémenter les architectures à base de services Web
Assurer la compatibilité entre les différents fureteurs et les
différentes technologies serveurs
Obtenir de l'information à la carte et des interfaces riches en
contenu
Faciliter la réutilisation, le partage (syndication) et la
transformation des contenus sur le Web
Forte tendance : REST, ATOM & JSON
GTI-780 / MTI-780 ETS - Montréal - 2009
6. Ajax – Une véritable percée!
AJAX
Le premier à utiliser le terme AJAX
fut Jesse James Garrett en février 2005
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
7. Ajax – Une véritable percée!
Ajax (Asynchronous JavaScript & XML)
Fini le pénible rechargement de pages!
Réalise des requêtes asynchrones au serveur
et fait la mise-à-jour de la page Web sans faire
de chargement complet
Applications Web plus réactives et plus
dynamiques
Objet XMLHttpRequest inventé par M$
Basé sur du code-client en JavaScript
GTI-780 / MTI-780 ETS - Montréal - 2009
8. Ajax – Diagramme de collaboration
Fureteur client
Fureteur client Interface utilisateur
Appel JavaScript
Interface utilisateur HTML + CSS
Moteur Ajax
Requête HTTP
Requête HTTP
Réponse HTTP
(HTML + CSS)
Réponse
XML / JSON / Texte
Serveur Web
Serveur Web et
XML / JSON/ Texte
Base de données,
systèmes de gestion
Serveur Base de données,
systèmes de gestion
Serveur
Application Web traditionnelle
Application Web Ajax
GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php ETS - Montréal - 2009
9. Ajax – Diagramme de séquence
Avee le Web traditionnel qui est asynchrone, le
fureteur est gelé en attendant la réponse du serveur.
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.
GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php ETS - Montréal - 2009
11. Ajax - Avantages
Réponses rapides aux actions de l'utilisateur
Applications Web riches, rapides et légères
Pas de long téléchargement, ni d'installation
Permet de modifier partiellement la page affichée par le
fureteur pour la mettre à jour sans avoir à recharger la page
entière.
Réduit la quantité d'information demandée au serveur
Fait davantage de traitement du côté client (en JavaScript)
et moins sur le serveur et le réseau
Donc économie en traitement serveur & bande passante
GTI-780 / MTI-780 ETS - Montréal - 2009
13. Client léger HTML vs client riche Ajax
Client HTML
(fureteur)
Serveur
sans état avec état
(stateless) (statefull)
Pas d'état persistant
entre les transactions qui sont
considérées comme indépendantes
Client JavaScript
(fureteur) Serveur
avec état sans état
(statefull) (stateless)
Pas d'état persistant
entre les transactions qui sont
considérées comme indépendantes
GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
15. Ajax - Inconvénients
Phénomène de mode
Problèmes de compatibilité entre les différents fureteurs
Ne fonctionne pas si JavaScript est désactivé
Les données chargées de façon dynamique ne sont pas
indexées par les moteurs de recherche
Le bouton de retour en arrière et les signets ne
fonctionnent pas
Si le traitement du côté serveur est long, le traitement
asynchrone d'Ajax est également long
Sécurité : davantage d'exposition aux attaques et XSS
Basé sur JavaScript qui a ses propres inconvénients
Pas d'accès* en dehors du domaine du serveur
Plus exigeant sur le poste client (vieux PC ?)
GTI-780 / MTI-780 * Note : En anglais « Same Origin Policy » ETS - Montréal - 2009
17. Contrainte de sécurité SOP
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
même domaine que la page d'origine.
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'information confidentielle contenue dans une autre page
De plus le fureteur est limité à deux requêtes simultanées avec le
même hôte
Il est cependant possible d'accéder à un domaine apparenté
Par exemple, soit l'URL d'origine : http://www.abc.com/dir/page.html
GTI-780 / MTI-780 * Note : qui roule dans un bac de sable (sandbox) ETS - Montréal - 2009
18. Contournement de la règle SOP
Les applications Web centrées client bénéficieraient d'un accès élargi
aux services hébergés sur d'autres serveurs
Script signé, pas vraiment pratique!
« Couche Proxy » sur le serveur, puisque le serveur n'a pas les
contraintes de sécurité du fureteur
Le fureteur n'applique pas la règle SOP à toutes les ressources d'une
page Web. Par exemple, une balise <img...> peut référer à une URL
dans un autre domaine.
On peut aussi contourner la règle de sécurité SOP en prenant
avantage de la balise <script>. Une balise <script> peut référer à un
code qui est sur une autre page. Cependant, il faut pouvoir faire
confiance à ce script.
–
GTI-780 / MTI-780 ETS - Montréal - 2009
19. Services Web
Services
Web
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
20. Services Web
Origine : protocole de communication entre objets distribués ORB
(Object Request Broker) comme CORBA*, DCOM et RMI (format
propriétaire binaire, lourdeur, complexité) datant d'avant l'invention
du Web
Environnements distribués et hétérogènes (différents langages et
plateformes)
Un service établit une relation entre un composant producteur et un
composant consommateur
Utilisation de messages « en format ouvert » le plus souvent en XML
Possibilité d'activation par des événements*
Services synchrones ou asynchrones
Cela dit, toute application Web, tout site Web est un service!
GTI-780 / MTI-780 * Note : CORBA est un bel exemple de design par comité ETS - Montréal - 2009
21. Services Web - approches
Idée : marier HTTP et XML, 2 grandes approches
RPC : appel de procédure à distance (Remote Procedure Call) bâti
par dessus HTTP
Basés sur l'échange d'objets entre le client et le serveur
Souvent appelés services WS-*
REST : accès à une ressource via une URI/URL
XML-RPC, un protocole de service web simple, précurseur de SOAP,
XML-RPC est à la base de plusieurs APIs pour les services de blogues
SOAP (Simple Object Access Protocol) avec WSDL (Web Services
Description language), invocation du service selon le protocole SOAP
Historiquement, SOAP est passé de simple à complexe par l'effet
combiné d'une tendance à concevoir pour résoudre tous les problèmes
(Over-Engineered) et de la conception par comité.
De son côté, REST est un retour aux sources du Web, à suivre...
GTI-780 / MTI-780 * Note : une évolution intéressante! ETS - Montréal - 2009
23. Services Web - avantages
Interopérabilité entre différents composants logiciels écrits en
différents langages de programmation et fonctionnant sur différentes
plateformes (OS)
Normes et protocoles ouverts, souvent en format texte
Basé sur HTTP (port 80) qui traverse les coupe-feux
Architecture plus fexible, découplée et adaptable
GTI-780 / MTI-780 * Note : une évolution intéressante! ETS - Montréal - 2009
24. Services Web - Inconvénients
Pas vraiment de normes établies
Performaces plus faibles que les approches moins
ouvertes et plus proches du matériel comme CORBA,
DCOM et RMI
Problème de sécurité (plus grande surface exposée)
GTI-780 / MTI-780 * Note : une évolution intéressante! ETS - Montréal - 2009
25. Architecture SOA
SOA
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
26. Architecture SOA
SOA (Service Oriented Architecture) Architecture orientée services
Basée sur les services Web (WS) et les composants logiciels
Reprend les concepts du calcul distribué
Un service établit une relation entre un composant producteur et un composant
consommateur
Application : ensemble de services qui communiquent par des messages
Utilisation de messages « en format ouvert » le plus souvent en XML
Possibilité d'activation par des événements*
Régie selon des contrats d'échange
Souvent définie en termes de couches applicatives
Services synchrones ou asynchrones
Populaire dans le e-commerce (B2B et B2C)
Plateformes JEE et .NET
GTI-780 / MTI-780 * Note : une évolution intéressante! ETS - Montréal - 2009
27. Architecture SOA
L'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 service
Un service peut implémenter plusieurs interfaces
Un service doit respecter un contrat (ou règles de fonctionnement)
SOA
Interface Annuaire
Service Bus de service
d'application des services
Contrat Implémentation Interface
Logique
Données
d'affaire
* Source : Wikipedia & Dirk Krafzig, Karl Banke, and Dirk Slama.
GTI-780 / MTI-780 Enterprise SOA. Prentice Hall, 2005 ETS - Montréal - 2009
29. SOA - Inconvénients
« Phénomène de mode »
Tendance à la multiplication des couches et des messages
Difficile à tester
Problème de coordination ou orchestration entre les divers services
Problème de sécurité (plus grande surface exposée)
Problème de réelle interopérabilité
On constate une certaine lourdeur et de la complexité
Particulièrement SOAP est lourd et complexe
Difficile d'imaginer des communications SOAP directe avec une
application Web au niveau fureteur (client-centric). Pas de service
SOAP dans un client JavaScript
–
GTI-780 / MTI-780 * Note : le plus souvent en XML ETS - Montréal - 2009
30. SOA - Avantages
Couplage faible
Favorise les échanges entre toutes sortes de logiciels, peu
importe leurs langages de programmation
Favorise la réutilisation
Favorise l'interopérabilité
Favorise une réponse et une adaptation plus rapides des
systèmes informatiques aux changements dans
l'environnement technologique
SOAP offre des possibilités étendues pour le traitement
sécuritaire des
Transactions
SOA ouvre la voie à des architectures Web à base
d'événements (Event Driven)
GTI-780 / MTI-780 * Note : le plus souvent en XML ETS - Montréal - 2009
31. SOA & Web 2.0
SOA et Web 2.0 ont beaucoup d'éléments en
commun
Vision commune d'un Internet des services
Répondent à des besoins et des clientèles différentes
i.e. Web 2.0 davantage grand public et SOA pour les
entreprises
Il y a beaucoup de potentiel à combiner les
technologies et les principes du Web 2.0 et de
l'architecture SOA
Programmation événementielle ou à base
d'événements (Event Driven)
–
GTI-780 / MTI-780 * Note : le plus souvent en XML ETS - Montréal - 2009
33. REST – La simplicité du Web
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
document. C'est simplement HTTP
On peut voir cela comme l'échange de documents dans des
enveloppes
URI, HTML ou XML et HTTP
Adressable et sans état (Stateless)
Cycle HTTP :
1) Construction de la requête : méthode HTTP + URL/URI + HTTP
entêtes + document (dans le cas de GET ou POST)
2) Envoi de la requête à un serveur HTTP
3) Réception et traitement de la réponse : statut de la réponse +
entêtes + document retourné
GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Fielding, en 2000 ETS - Montréal - 2009
34. REST
REST (REpresentational State Transfer)*
plus clairement appelé architecture orientée ressources ROA
(Resource-Oriented Architecture) ou RESTful Web services
Repose sur la notion de ressources
Pas de gestion d'état (stateless)
Chaque ressource est accessible via une URI/URL unique
Un ensemble de types de contenus MIME en requête et en réponse
Chaque ressource répond à un ensemble de commandes HTTP de base
qui correspondent aux opérations classiques dites CRUD
–
GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Thomas Fielding, ETS - Montréal - 2009
35. REST – API uniforme
Obtenir une représentation d'une ressource : GET
Créer une nouvelle ressource : PUT avec nouvel URI
Créer une sous-ressource ou une extension : POST
avec URI existante
Modifier une ressource : PUT avec URI existante
Détruire une ressource : DELETE avec URI existante
GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Fielding, en 2000 ETS - Montréal - 2009
36. REST – Amazon S3 un service RESTful
À part le Web lui-même, il existe d'autres véritables
services Web REST
Par exemple Amazon S3 (Simple Storage Service)
2 concepts :
Un conteneur d'objets ou S3 Bucket
https://s3.amazonaws.com/<id bucket>
Un objet S3
https://s3.amazonaws.com/<id bucket>/<id objet>
Obtenir 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
bucket
Créer un nouvel objet : PUT + 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/
GTI-780 / MTI-780 ETS - Montréal - 2009
37. REST – Comparaison avec RPC
REST et RPC sont différents à plusieurs niveaux
REST RPC
4 procédures : GET, POST, Différents appels de
PUT, DELETE procédures qui varient avec
les applications
Document dans une Enveloppe SOAP XML dans
enveloppe HTTP une enveloppe HTTP
Procédure dans la méthode Procédure dans l'URI
HTTP pas dans l'URI
Usage selon les besoins du Surcharge du POST ou
GET, POST, PUT, DELETE utilisation unique du GET ou
du POST
GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Fielding, en 2000 ETS - Montréal - 2009
38. REST – Hybrides REST-RPC
Il existe aussi des hydrides REST-RPC ou faux services
REST
Par exemple Flickr qui utilise le GET pour détruire
http://www.flickr.com/services/...&method=flickr.photos.delete
Aussi Delicious qui utilise le GET et des méthodes
dans l'URI
https ://api.del.icio.us/.../add
Un exemple très fréquent : Soumission d'un formu-
laire avec un POST (le POST est surchargé i.e. il peut
être remplacé par différentes procédures non HTTP)
Un service qui utilise exclusivement le POST ou le GET est
habituellement un service de style RPC
GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Fielding, en 2000 ETS - Montréal - 2009
39. REST – Qualités d'un service RESTful
Adressabilité : une URI/URL pour chaque information utile
Sans état (stateless) : chaque requête HTTP est complète et
isolée, toute l'information nécessaire est fournie au serveur
Représentation : un document échangé, l'état d'une ressource
Hyperliens et connectivité : les documents contiennent des
hyperliens vers d'autres ressources
Sans effet de bord : un GET va lire des informations sans rien
changer à l'état du serveur
Idempotence : une opération sur une ressource est
idempotente si l'effet reste le même que l'on effectue
l'opération une fois ou plusieurs fois. PUT et DELETE sont
idempotents.
POST n'est ni idempotent ni sans effet de bord
GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Fielding, en 2000 ETS - Montréal - 2009
40. REST – Quelques outils et ressources
Projet JAX-RS (JSR-311)
http://cwiki.apache.org/CXF20DOC/jax-rs-jsr-311.html
Un outil à base d'annotations pour créer des services REST
@Path("/commande")
public class PriseCommandeService {
@GET
@Path(“/{id}”)
public String getCommande()@PathParam(“id”) int commandeId {
// corps de la méthode
}
}
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
retourné par la méthode getCommande()
GTI-780 / MTI-780 ETS - Montréal - 2009
41. REST – Projet Restlet
Projet Restlet – bonne bibliothèque REST avec une intégration à GWT
http://www.restlet.org/about/
Restlet First steps (tutoriel)
http://www.restlet.org/documentation/1.1/firstSteps
Restlet-GWT module
http://wiki.restlet.org/docs_1.1/13-restlet/28-restlet/144-restlet.html
GTI-780 / MTI-780 ETS - Montréal - 2009
42. REST – Quelques outils et ressources
Introduction to REST (article JavaLobby)
http://java.dzone.com/articles/intro-rest
http://java.dzone.com/articles/putting-java-rest
Livre
RESTful Web Services
Leonard Richardson; Sam Ruby
O'Reilly Media, Inc.
8 mai, 2007
GTI-780 / MTI-780 ETS - Montréal - 2009
44. REST - Avantages
REST est de plus en plus populaire
Les grands sites Web 2.0 comme Amazon, Yahoo!, Flickr offrent des
services REST en plus des services SOAP traditionnels
REST est bien intégré au canevas d'applications Ruby On Rails (RoR)
GTI-780 / MTI-780 ETS - Montréal - 2009
45. REST - Inconvénients
Pas vraiment conçu pour les transactions, bien que
cela soit possible
Pas conçu pour les protocoles avec états
Exige de transmettre toute l'information nécessaire à
l'exécution de la requête (pas d'état dans le serveur)
GTI-780 / MTI-780 ETS - Montréal - 2009
47. RSS
Fil, flux ou canal RSS: syndication de contenu
Inventé chez Netscape en 1999 puis amélioré par Dave Winer
RSS : Really Simple Syndication (à l'origine RDF* Site Summary)
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 URL
par item accompagnée de métadonnées qui décrivent le contenu
Utilisé pour du contenu qui change fréquemment (diffusion de nouvelles,
cours de la bourse, météo)
Afficher les nouveautés d'un blogue (billets récents)
Baladodiffusion audio (flux RSS audio) et vidéo (flux RSS vidéo)
Disponible par abonnement
http://fr.wikipedia.org/wiki/RSS_(format)
http://cyber.law.harvard.edu/rss/rss.html
GTI-780 / MTI-780 * RDF : Resource Description Framework à la base du Web sémantique ETS - Montréal - 2009
48. RSS 2.0
Contenu entre les balises <rss>, métadonnées entre les balises <channel>, <title> : le
titre de l'item , <description> : description de l'item, <link> : l'URL du site associé à l'item
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title>Fil RSS (créé avec Rome)</title>
<link>http://rome.dev.java.net</link>
<description>Ce fil RSS a été créé avec Rome (utilitaire Java de syndication RSS)</description>
<item>
<title>Le Bic - Prédictions des marées pour 7 jours</title>
<link>http://www.marees.gc.ca/cgi-bin/tide-shc.cgi?
queryType=showFrameset&zone=2&language=french&region=4&stnnum=2995</link>
<description>Extraction du contenu de la table des marées...</description>
</item>
<item>
<title>Cacouna - Prédictions des marées pour 7 jours</title>
...
</item>
</channel>
</rss>
GTI-780 / MTI-780 ETS - Montréal - 2009
49. RSS – baladodiffusion
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
multimédia associé à l'item du flux RSS. Utilisation de la balise <enclosure> :
<enclosure url="http://www.radio.org/balado/exemple.mp3" length="3968800" type="audio/mpeg" />
GTI-780 / MTI-780 * Source : http://fr.wikipedia.org/wiki/Podcast ETS - Montréal - 2009
50. ROME
ROME : Rss and atOM utilitiEs : une excellente bibliothèque Java en code
source libre qui se base sur JDOM
Support de toutes les versions de RSS et d'Atom
Analyse, génération et conversion de flux RSS d'un format à l'autre
Sorties vers : String, File, java.io.Writer, org.w3c.dom.Document,
org.jdom.Document
Entrées depuis : File, java.io.Reader, org.xml.sax.InputSource,
org.w3c.dom.Document, org.jdom.Document object
Un ensemble de modules : iTunes, A9 Open Search, Google Base, etc.
https://rome.dev.java.net/
GTI-780 / MTI-780 * RDF : Resource Description Framework ETS - Montréal - 2009
52. RSS - Inconvénients
L'information étant rafraîchie régulièrement, l'usager peut
manquer une nouvelle importante
Généralement pas d'archivage
Surabondance d'information (infobésité)
Accent sur la nouveauté, pas sur l'analyse et la réflexion
La licence RSS 2.0 appartient à la faculté de droit de l'Université
Harvard
GTI-780 / MTI-780 ETS - Montréal - 2009
53. RSS - Avantages
Usager : permet d'être informé d'un contenu sans aller le
consulter
Diffuseur: attirer des visiteurs, syndiquer (partager des
contenus), recyclage/réutillisation des contenus
Bon pour la veille, pour suivre l'actualité ou tenir informer des
nouveautés
Grâce aux CSS, l'apparence peut être personnalisée
Réutiliser le contenu issu d'un autre site tout en personnalisant la
présentation
GTI-780 / MTI-780 ETS - Montréal - 2009
54. Atom
Atom
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
55. Atom
Atom 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
certains aspects de RSS 1.0 comme l'espace de nommage
Norme non propriétaire accrédité par l'IETF (Internet Engineering
Task Force)
Créée en réaction au format RSS 2.0 qui appartient à la faculté de
droit de l'Université Harvard
Atom 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)
Choisi par Google pour Blogger
Propose un API REST (Atom Publishing Protocol)
http://tools.ietf.org/html/rfc4287
GTI-780 / MTI-780 ETS - Montréal - 2009
56. Atom – Exemple de flux Atom
<?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">
<title>Sample Feed (created with Rome)</title>
<link rel="alternate" href="http://rome.dev.java.net" />
<tagline>This feed has been created using Rome (Java syndication utilities</tagline>
<entry>
<title>Rome v1.0</title>
<link rel="alternate" href="http://wiki.java.net/bin/view/Javawsxml/Rome01" />
<author>
<name />
</author>
<modified>2004-06-08T04:00:00Z</modified>
<issued>2004-06-08T04:00:00Z</issued>
<summary type="text/plain" mode="escaped">Initial release of Rome</summary>
<dc:date>2004-06-08T04:00:00Z</dc:date>
</entry>
...
</feed>
GTI-780 / MTI-780 ETS - Montréal - 2009
58. Microformats
Approche de normalisation du format des données basée sur
XML / XHTML et l'étiquetage sémantique (métadonnées)
But: l'automatisation, la réutilisation, la recherche d'information &
l'interopérabilité
Conçus d'abord pour les humains mais lisibles par les machines
Simplicité : « Si une spécification fait plus d'une page, elle est trop
compliquée à implémenter »
Il existe une communauté Microformat qui n'est pas un organisme
de normalisation. Processus ouvert qui cherche d'abord à se coller
aux usages.
http://microformats.org
GTI-780 / MTI-780 ETS - Montréal - 2009
59. Microformats – Aspect technique
Basés sur XML / XHTML et les métadonnées
Utilisation des attributs : class, rel et rev
Peu de choses sont obligatoires
Souplesse dans l'utilisation des <div> et des <span>
•Par exemple une carte de visite en format hCard
<address class="vcard">
<p> HTML vCard
<span class="fn">Claude Coulombe</span><br/>
Formal Name
<span class="org">École de technologie supérieure</span><br/>
<span class="tel">514-396-8800</span><br/>
<span class="email">claude.coulombe@etsmtl.ca</span><br/>
<a class="url" href="http://www.etsmtl.ca/zone1/bottins/claudecoulombe">Hyperlien Claude
Coulombe</a>
</p>
</address> Hyperlien original non RESTful :
http://www.etsmtl.ca/zone1/bottins/Page_details.asp?Numero=4075
GTI-780 / MTI-780 ETS - Montréal - 2009
60. Microformats - Exemples
HTML vCard
Contacts ou personnes (hCard) HTML iCalendar
Événements et calendriers (hCalendar)
Relation (rel-tag)
Coordonnées géographiques (Geo)
Liens de vote (VoteLinks)
Références bibliographiques (Dublin Core, hCitation)
Curriculum Vitae (hResume)
GTI-780 / MTI-780 ETS - Montréal - 2009
62. Microformats - Avantages
Réutilisation facile des contenus sur le Web
On peut même dire que RSS et ATOM s'apparentent aux microformats.
Enrichissement des contenus.
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).
Soumis à un site comme technorati il peut ensuite voir son billet classé sous cette
catégorie.
<a href="http://en.wikipedia.org/wiki/Web2" rel="tag">microformat</a>
Synchronisation facile des données dans les applications.
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.
Ajoutent de la sémantique aux personnes, aux lieux, aux événements
Un premier pas utile vers le Web sémantique...
GTI-780 / MTI-780 ETS - Montréal - 2009
63. Microformats - Inconvénients
Peu de vraies normes, beaucoup de variantes
Difficiles de s'y retrouver
Parfois fastidieux à produire
GTI-780 / MTI-780 ETS - Montréal - 2009
65. XSL / XSLT
Technologies d'extraction et de transformation des données
XSL (eXtensible Stylesheet Language)
XSLT (XML Stylesheet Language for Transformations) transforme un
document source balisé (XML) en un second document (généralement
balisé lui-aussi)
Les documents obtenus par Ajax sont souvent trop complexes pour être
traités « manuellement » à partir de l'API DOM
Utilisation de l'extraction XPath ou des transformations XSLT pour obtenir
des données utiles
Peu valorisées à l'image des bases de données mais essentielles
GTI-780 / MTI-780 ETS - Montréal - 2009
67. XSL / XSLT – Un peu de code...
import javax.xml.transform.*;
// Utilisation de l'interface TraX pour réaliser une transformation
// de la la manière la plus simple possible, en trois instructions Java
public class TransformDOC1versDOC2 {
public static void main(String[] args) throws TransformerException,
TransformerConfigurationException, FileNotFoundException, IOException {
if (args.length != 3 || args[0].equals("--aide")) {
System.out.println("java TransformDOC1versDOC2 D1versD2.xsl entreeD1.xml sortieD2.xml");
return;
}
TransformerFactory transFact = TransformerFactory.newInstance();
Transformer transformer = transFact.newTransformer(new StreamSource(args[0]));
transformer.transform(new StreamSource(args[1]), new StreamResult(new FileOutputStream(args[2])));
}
}
GTI-780 / MTI-780 ETS - Montréal - 2009
68. XSL / XSLT - outils
Du côté serveur : JAXP (Java API for XML Processing)
Traitement du XML (validation, analyse, transformation) qui regroupe un ensemble
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 :
DOM (Document Object Model) qui construit un arbre en mémoire
SAX (Simple API for XML) qui base son analyse sur le déclenchement
d'événements (et évocation de fonctions callback)
À cela s'ajoute l'API de transformation XSLT qui s'appuie sur le moteur de
transformation Xalan
Depuis Java 5, JAXP est inclus dans le JDK et fait partie du Java de base
Autres ressources serveurs : JDOM, dom4j et StAX
Du côté client : la bibliothèque JavaScript Google AjaxSLT
http://goog-ajaxslt.sourceforge.net/
GTI-780 / MTI-780 ETS - Montréal - 2009
70. JSON
JSON : JavaScript Object Notation
Un nombre croisssant de services Web échangent des documents
en format JSON
Notation beaucoup plus compacte que le XML
=> consomme moins de bande passante
Directement interprétable par JavaScript (un simple eval)
=> demande moins de traitement
On assiste au développement d'un ensemble d'outils pour JSON
qui sont directement inspirés de ce qui existe déjà pour XML
http://www.json.org/json-fr.html
GTI-780 / MTI-780 ETS - Montréal - 2009
71. JavaScript – Notation JSON
Un prototype JavaScript en notation JSON commence par { et se termine par }. Il
contient un ensemble de couples attribut/valeur non ordonnés. Chaque attribut est
suivi de : et les couples attribut/valeur sont séparés par une ,
var auto = {
fabricant : 'Toyota',
modele : 'Prius',
couleur : 'vert',
proprio : {
nom = 'Lyne';
}
};
GTI-780 / MTI-780 ETS - Montréal - 2009
73. Google Gears
L'usage des cookies pour la persistance est assez limité
Google Gears est un plugiciel (extension) du fureteur
qui permet de mémoriser de plus grandes quantités de
données sur le poste client
Gears fournit une base de données SQL
Pour FireFox 1.5 + et IE 6+
http://gears.google.com/
GTI-780 / MTI-780 ETS - Montréal - 2009
74. Google Gears – un peu de code
public void save() throws StorageException {
// Vérifier que Google Gears est installé
if( ! IsGearsInstalled() ) throw new StorageException("Echec sauvegarde, Gears pas installé");
try { // Créer la table maBDGears si elle n'existe pas
Database db = new Database("maBdGears");
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
for(Iterator iter=getValues().entrySet().iterator(); iter.hasNext(); ){
Entry entry = (Entry) iter.next();
db.execute("insert into maBdGears values (?, ?)", new String[] {
(String) entry.getKey(), (String) entry.getValue()
});
}
}
catch (GearsException e) { throw new StorageException( "Echec sauvegarde", e );
}
}
GTI-780 / MTI-780 * Source : R. Dewsbury 2008 – Chap.6, p. 306-307 ETS - Montréal - 2009