Web 2.0 Dailymotion YouTubeYouTube (Google) MySpace Facebook DMOZDMOZ (annuaire participatif) ExaleadExalead (moteur de recherche) AdSenseAdSense (Google)

Présentation au sujet: "Web 2.0 Dailymotion YouTubeYouTube (Google) MySpace Facebook DMOZDMOZ (annuaire participatif) ExaleadExalead (moteur de recherche) AdSenseAdSense (Google)"— Transcription de la présentation:

1 Web 2.0 Dailymotion YouTubeYouTube (Google) MySpace Facebook DMOZDMOZ (annuaire participatif) ExaleadExalead (moteur de recherche) AdSenseAdSense (Google) Del.icio.usDel.icio.us (Yahoo!) Picasa Web AlbumPicasa Web Album (Google) FlickrFlickr (Yahoo!) Wikipédia AgoraVox Last.fm Yoolink Twitter Livesticker LinkedFeed NetvibesNetvibes (portail) StumbleUpon Technorati Digg Le phénomène des blogs - 70 millions dans le monde et plus de 3 millions en France

2 Tim O'Reilly en 2004 Désigne un renouveau du www dans : –les technologies employées –L’utilisation du web Le maître mot : Interaction des internautes –Avec les contenus –Entre eux

3 Historique web 1.0 : pages web statiques, rarement mises à jour. web 1.5 : web dynamique –Le contenu est dynamique via des bases de données. web 2.0 web orienté interaction entre les utilisateurs – le crowdsourcing –la création de réseaux sociaux rudimentaires. – utilisation de templates pour les graphiques. –Dans le Web 2.0, l'internaute est acteur. Il contribue à alimenter en contenu les sites, blogs, wikis,...blogswikis –l'utilisateur doit rester propriétaire de ses propres données

4 Technologies l'utilisation de CSS, d'un balisage XHTML et des microformats les techniques d’applications riches telles qu'AJAX ; la catégorisation par étiquetage ; l'utilisation appropriée des URL ; une architecture REST ou des services web XML.

5 la syndication et l'agrégation de contenu RSS Evolution la + importante : la syndication de contenu En utilisant des protocoles standardisés permettant aux utilisateurs de faire usage des données d'un site dans un autre contexte, allant d'un autre site web au plugin d'un navigateur, ou même d'une application de bureau séparée. Les protocoles permettant la syndication comprennent RSS, RDF (comme dans RSS 1.1) et Atom, tous étant basés sur le langage XML. Des protocoles spécialisés tels que FOAF et XFN (tous deux pour les réseaux sociaux) étendent les fonctionnalités des sites et permettent aux utilisateurs d'interagir de façon décentralisée.RSSRDFAtomXMLFOAFXFN

6 Protocoles web REST (REpresentational State Transfer) indique une façon d'échanger et de manipuler des données en utilisant simplement les verbes HTTP GET, POST, PUT et DELETE. SOAP implique de poster à un serveur des requêtes XML comprenant une suite d'instructions à exécuter. WSDL (Web Services Description Language), un standard de publication des interfaces de services web.

7 AJAX Asynchronous JavaScript And XML J. J. Garrett. J. J. Garrett « XML et Javascript asynchrones »), seulement un nom donné à un ensemble de techniques préexistantes. AJAX est un type de programmation rendue populaire en 2005 par Google (avec Google Suggest). Acronyme désignant une méthode informatique HTML (ou XHTML) CSS; DOM et JavaScript XML, XSLT l'objet XMLHttpRequest (depuis IE 4.0) http://www.w3schools.com/Ajax/

8 But d’Ajax Lutter contre le chargement intempestive de page http : recharge total de la page à chaque modification Actualiser le client sans recharger la totalité de la page Effectuer des traitements sur le poste client (avec JavaScript) à partir d'informations venues du serveur. Utilise le transfert de données asynchrome (HTTP requests) entre le navigateur et le serveur Web Permet aux page web de requeter de petites quantités d’information plus que des pages entières

9 La technique AJAX rend les applications web –Plus petites –Plus rapides –Plus conviviales AJAX est une technique CLIENTE, donc indépendante des serveurs web utilisés

10 Fonctionnement Présentation / évènements Evènements = les actions de l'utilisateur = provoquent l'appel des méthodes liées aux élts Interaction = formulaire ou bouton html Elt de la page = identifié grâce au DOM = communique avec le serveur via l'objet XMLHttpRequest XMLHttpRequest -> open (établit une connexion) et send (envoie une requête au serveur) <- responseXml, responseText, accessible dans responseXml

11 Fonctionnement Disponibilité des données : Fournie par l’attribut readyState de XMLHttpRequest 0: non initialisé. 1: connexion établie. 2: requête reçue. 3: réponse en cours. 4: terminé.

12 XMLHttpRequest Attributs readyState : le code d'état passe successivement de 0 à 4 qui signifie "prêt". Status - : 200 est ok, 404 si la page n'est pas trouvée. responseText : contient les données chargées dans une chaîne de caractères. responseXml : contient les données chargées sous forme xml, les méthodes de DOM servent à les extraire. Onreadystatechange : propriété activée par un évènement de changement d'état. On lui assigne une fonction. Méthodes open(mode, url, boolean) send("chaine")

13 Exemple Prérequis –HTML / XHTML –JavaScript Exemple : toute saisie dans le champs « nom » provoque l’affichage de titi dans le champs heure

14 Maj Asynchrone Name: Time: Exemple de w3c

15 AJAX - Browser Support La pierre angulaire d’Ajax est l’objet XMLHttpRequest Internet Explorer utilise un ActiveXObject, Les autres browser utilisent l’objet JavaScript appelé XMLHttpRequest.

16 function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) {// Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } Name: Time:

17 L’objet XMLHttpRequest 3 propriétés importantes : 1.La propriété onreadystatechange 2.La propriété readyState 3.La propriété responseText Fonction qui peut recevoir les données qui sont retournées par le serveur xmlHttp.onreadystatechange=function() { quoi faire de la réponse du serveur }

18 L’objet XMLHttpRequest La propriété readyState Qui dispose de 5 états xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // récupére les données du serveur }

19 L’objet XMLHttpRequest La propriété responseText xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.monForm.heure.value= xmlHttp.responseText; }

20 Envoyer une requete au serveur xmlHttp.open("GET", "es",true); xmlHttp.send(null);

21 Le formulaire événementiel Name: <input type="text" onkeyup="ajaxFunction();" name="nom" /> Time:

22 function MaFonctionAjax() { var xmlHttp; try { xmlHttp =new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp =new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp =new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } xmlHttp.onreadystatechange=function() { // la fonction qui suit est appelée à chaque chgt d'evt if(xmlHttp.readyState==4) { document.monForm.heure.value= xmlHttp.responseText; } xmlHttp.open("GET","es",true); //ou xmlHttp.open("GET","http://localhost:8080/Web2.0/es",true); xmlHttp.send(null); } Name: Time:

23 function submitForm() { var xhr; try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e2) { try { xhr = new XMLHttpRequest(); } catch (e3) { xhr = false; } } xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200) document. monForm.monChamp ="r:" + xhr.responseText; else document. monForm.monChamp ="Error code " + xhr.status; } }; xhr.open( GET", "data.xml", true); xhr.send(null); }

24 Origine des données xhr.responseText : lit la réponse envoyée par le serveur lit dans un fichier xml if(xhr.status == 200) { var doc = xhr.responseXML; // Assigner le fichier XML à une variable var element = doc.getElementsByTagName('servlet-class').item(1); // Lit le 2ème tag servlet-class document……= element.firstChild.data; // Copier le contenu dans le formulaire }

25 Ecrire dans la page... un texte à remplacer... document.getElementById("zone").innerHTML = "Received:" + xhr.responseText;

26 Le serveur Envoie n’importe quelle donnée : public class Serv1 extends HttpServlet { public void service ( HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); out.println("il est midi "); } Utilisation de la méthode service

27 JavaScript document.myForm.txtCache.value = « aaa » –Assigne le texte « aaa » à l’input du nom « textCache » qui se trouve dans le formulaire myForm document.getElementById("txtCache2").innerHTML= "coucou" –Assigne le texte "coucou" à la zone de texte « txtcach2 » permet d’afficher la zone de texte « txtCache2 »

28 À vous … Quand je saisie une lettre dans le champ « name », le champ « time » affiche l’heure système du serveur Quand on clique sur le bouton « détail », le texte du fichier data.htm s’affiche à l’écran.

29 Lecture d’un fichier xml function submitForm() { var xhr; try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e2) { try { xhr = new XMLHttpRequest(); } catch (e3) { xhr = false; } } xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200) { var doc = xhr.responseXML; var element = doc.getElementsByTagName(‘mettreLeNomDeBaliseXml').item(1); document.getElementById("txtCache").innerHTML= element.firstChild.data; } }; xhr.open( "GET", "data3.xml", true); xhr.send(null); }

30 Inconvénients d'Ajax (JavaScript doit être activé dans le navigateur) Le délai d’attente des modifications Les données ne sont pas prises en compte par les moteurs de recherche