Conférence de Stéphane Bonhomme
Guilde - 22/03/2006
d'après l'article d'Eric Van Der Vlist publié sur xmlfr.org
Le web2.0 n'est pas un standard, mais une série de principes, comparable à REST
Définition sur wikipédia
"Web 2.0 est un terme souvent utilisé pour désigner ce qui est perçu comme une transition importante du World Wide Web, passant d'une collection de sites web à une plate-forme informatique à part entière, fournissant des applications web aux utilisateurs. Les défenseurs de ce point de vue soutiennent que les services du Web 2.0 remplaceront progressivement les applications de bureau traditionnelles."
Web2.0 s'appuie sur un ensemble de technologies "mûres" :
L'utilisation de XML sur HTTP en mode asynchrone en Javascript s'est vu décerner le nom de « Ajax ».
Replacer Office par une application javascript ?
Règles des 80/20
Soulager l'utilisateur
Internet tirera son potentiel du réseau humain formé par ses utilisateurs
Le web n'est plus à sens unique, mais intègre de plus en plus les contributions des utilisateurs
"Le Web 2.0 c'est utiliser le web comme il a été conçu pour être utilisé. Les « tendances » que nous distinguons sont simplement la nature inhérente du web qui émerge des mauvaises pratiques qui lui ont été imposées pendant la bulle [Internet]"
Paul Graham
En résumé : principe de démocratie sur le Web
Existe-t-il une bulle web 2.0 ?
Baisse des coûts de lancement des Start-up
Les montants des investissements n'ont pas progressé, mais le nombre d'investissements de projets a nettement augmenté
De nombreuses sociétés sont crées autour des technologie web 2.0 dans le seul but d'être revendues
Attention à tirer les enseignements de la bulle 1.0
Respecter les priorités du web 1.0 :
Ergonomie (requêtes AJAX)
Les utilisateurs doivent rester vigilants !!
Aucune distinction entre les types d'objet.
L'héritage est réalisé par prototypage.
Propriétés et méthodes peuvent être ajoutées à un objet dynamiquement.
Extensivement
steph={nom:"bonhomme",prenom:"stéphane"};
Avec un constructeur
function personne(nom, prenom) {
this.nom=nom;
this.prenom=prenom;
}
steph = new personne("bonhomme","stéphane");
à un objet
steph.fonction="consultant";
au prototype :
personne.prototype.fonction="employé";
L'héritage se fait par affectation du prototype
function personne(nom, prenom) {
this.nom=nom;
this.prenom=prenom;
}
function employe(nom, prenom, poste){
this.base=personne;
this.base(nom,prenom);
this.poste=poste;
}
employe.prototype=new personne;
steph = new employe("bonhomme","stéphane","développeur");
Les méthodes sont des fonctions liées :
Fonction anonyme
steph.annonce= function(msg) {
alert('Steph a dit '+msg);
}
Fonction explicite
fonction annonce(msg) {
alert(this.prenom+' a dit '+msg);
}
personne.prototype.annonce=annonce;
Spécification du w3c
Représentation de l'arbre XML des documents sous forme d'un hiérarchie d'objets
Prototypes
référence : http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html
Propriétés
Méthodes
Propriétés
Méthodes
Propriétés
Méthodes
Propriétés
Propriétés
Méthodes
Interfaces DOM implémentées en JavaScript
Utilisation de DOM sur les documents HTML/xhtml = Dhtml
Permet d'accéder / modifier le document affiché dans le navigateur :
Interactivité sur une page
Il y a de l'interactivité, mais :
L'idée : ne charger le contenu d'une réponse depuis le serveur que lorsque l'utilisateur clique sur "Montrer"
Asynchronous Javascript And XML
Permet de faire des requêtes HTTP depuis javascript
Petit hack pour IE (XMLHttpRequest est un objet ActiveX :( )
Les navigateur implémentent un prototype XMLHttpRequest,
Instanciation d'un objet avec ce prototype
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
A tout changement d'état de l'objet requête, la méthode
onreadystatechange de l'objet connexion
http_request.onreadystatechange = function(){
// Traitement à effectuer lors du changement d'état
};
Les états sont :
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
la méthode open permet d'ouvrir la connexion, et send envoie la requête
Avec la méthode HTTP GET
http_request.open('GET', 'http://www.example.org/xmldata', true);
http_request.send(null);
Avec la méthode HTTP POST
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http_request.open('POST', 'http://www.example.org/xmldata', true);
http_request.send(data);
Contenu de la méthode onreadystatechange
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// on a une réponse du serveur sans erreur
// ici on va pouvoir faire quelque chose avec les données chargées
} else {
// il y a eu une erreur,
// 404 (Not Found) ou 500 (Internal Server Error)...
// On peut peut être informer l'utilisateur qu'il y a eu un problème
}
} else {
// le contenu n'est pas encore arrivé
// c'est le bon endroit pour activer un indicateur de chargement
}
Méthode brutale :
if (http_request.status == 200) {
// on a une réponse du serveur sans erreur
document.getElementById('reponse').innerHTML=http_request.responseText;
}
Utiliser l'objet DOM retourné :
if (http_request.status == 200) {
// on a une réponse du serveur sans erreur
newcontent=document.importNode(http_request.responseXML.documentElement.cloneNode(true),true);
document.getElementById('reponse').appendChild(newcontent);
}
Toujours les réponses ministérielles, avec chargement d'une réponse à la demande
XML User-interface Language (prononcez zool)
Une application XML pour la construction de widgets dans un navigateur
Editeur SVG collaboratif, écrit en XUL