GIS and Media fusion

"The explosive growth of the GeoWeb and geographic information has made GIS powerful media for the general public to communicate, but perhaps more importantly, GIS have also become media for constructive dialogs and interactions about social issues." - Sui & Goodchild

User Tools

Site Tools


ajax2:start

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

ajax2:start [2014/12/05 20:30]
oertz [Evaluation des connaissances]
ajax2:start [2018/05/16 10:05]
Line 1: Line 1:
-====== Module MASRAD :: AJAX (2) ====== 
-Objectifs : acquérir de bonnes connaissances pratiques dans l'​utilisation des techniques dites AJAX pour la création d'​applications web. Connaître et manipuler les principes et mécanismes de base de l'​approche asynchrone de communication client-serveur. 
- 
-  * Organisation : succession d'​introductions de concept et de mises en pratique (certaines dirigées, d'​autres sous forme d'​exercices) 
-  * Sessions de cours  (17h30, salle **T131**, à la [[http://​www.heig-vd.ch/​contact/​st-roch|HEIG-VD,​ St-Roch]]) selon [[http://​mas-rad.ch/​programme/​planning.aspx|planning MAS-RAD]] 
- 
-===== Feuille de route ===== 
-  * Introduction : le concept AJAX (Asynchronous Javascript and XML), c'est quoi ? ça sert à quoi ? 
-  * Partie 1 : les variantes de technique AJAX 
-  * Partie 2 : jQuery, une bibliothèque JS en facilitant la mise en oeuvre 
-  * Utilisation avec un framework MVC (côté serveur, ex. Laravel / côté client, ex. AngularJS) 
-  * Conclusion : session d'​évaluation et corrigé 
- 
-===== Sessions ===== 
- 
-==== Exemples, exercices et codes sources ==== 
-Chaque partie comporte des exemples et exercices, ils sont disponibles ici :\\ 
-http://​ogo.heig-vd.ch/​ajaxrad/​ 
- 
-Téléchargez tous les {{:​ajax2:​part1_v2.zip|codes sources (v2)}} complets client/​serveur de la théorie de la Partie 1. 
-\\ 
-Téléchargez le {{:​ajax2:​part1-comp.zip|complément de codes sources}} de la partie 1. 
-\\ 
-Téléchargez tous les {{:​ajax2:​part2.zip|codes sources}} de la partie sur jQuery. 
-==== 20.02.2014 ==== 
-  * {{:​ajax2:​ajax-intro.pdf|Intro}} / Détecter une utilisation AJAX dans une application/​site web 
-    * quelles différences entre : http://​www.infoconcert.com/​festival/​rock-the-pistes-festival-7082/​concerts.html et http://​caniuse.com/#​search=media ? 
-    * utilisation de Firebug de Firefox (<=> Developer Tools de Chrome) 
-    * d'​autres exemples "AJAX est partout"​ (ex. http://​www.geoplanet.vd.ch/​ sous la loupe de Firebug) 
-    * à vous d'en détecter ... vos exemples (vérifiez avec Firebug) 
- 
-  * Checklist des pré-requis,​ réalisez les TP suivants : 
-    * TP1 ([[http://​ogo.heig-vd.ch/​ajaxrad/​Ex1/​tp1/​TP1_solution_5.html|TP1_solution_5.html]]) : mises au point HTML/CSS3 (la base visuelle) 
-    * TP2 ([[http://​ogo.heig-vd.ch/​ajaxrad/​Ex1/​tp2/​TP2_solution_2.html|TP2_solution_2.html]],​ [[http://​ogo.heig-vd.ch/​ajaxrad/​Ex1/​tp2/​TP2_form.zip|TP2_form.zip]]) : mises au point JS/DOM (un pilier AJAX) 
-    * IDE (ex. NetBeans) ? serveur HTTP + module PHP en localhost ? XML ? JSON ? 
- 
-  * Voyons une [[ajax2:​techAJAX|première technique AJAX]], le Script Loading basée sur la manipulation DOM ''​document.createElement("​script"​)''​ 
- 
-==== 13.03.2014 ==== 
-  * Terminons les exercices //TraceIt// et //Amis// pour mettre en oeuvre l'​approche AJAX de [[ajax2:​techajax#​script_loading|Script Loading]] 
-  * Voyons encore l'​utilisation de la notation JSON avec l'​exemple 5 de [[ajax2:​techajax#​script_loading|Script Loading]] 
- 
-==== 18.03.2014 ==== 
-  * On s'​échauffe avec l'​exercice CodePostal pour une utilisation de la technique de [[ajax2:​techajax#​script_loading|Script Loading]] avec un flux réponse formatté en JSON. 
- 
-  * Voyons la technique [[ajax2:​techajax#​iframe_loading|IFrame Loading]] basée sur la manipulation DOM ''​document.createElement("​iframe"​);''​ 
- 
-==== 27.03.2014 ==== 
-  * Voyons la technique [[ajax2:​techajax#​cookie_loading|Cookie Loading]] basée sur ''​document.cookie''​ 
-  * Et continuons avec la technique plus conventionnelle basée sur [[ajax2:​techXHR|XMLHTTPRequest]] 
-==== 03.04.2014 ==== 
-  * Petite mise au point sur les évolutions de l'​objet XHR 
-    * [[http://​ogo.heig-vd.ch/​ajaxrad/​Part1/​xhr4a.html|xhr4a.html]],​ [[http://​ogo.heig-vd.ch/​ajaxrad/​Part1/​xhr4b.html|xhr4b.html]] (onload, onerror, ...) 
-    * [[http://​ogo.heig-vd.ch/​ajaxrad/​Part1/​xhr5.html|xhr5.html]],​ [[http://​ogo.heig-vd.ch/​ajaxrad/​Part1/​xhr5.zip|xhr5.zip]] (de send(null) à une requête XHR en POST) 
- 
-  * On termine l'​exercice Animaux :  
-    * Corrigé : [[http://​ogo.heig-vd.ch/​ajaxrad/​Ex1/​animaux/​animaux.html|animaux.html]],​ [[http://​ogo.heig-vd.ch/​ajaxrad/​Ex1/​animaux/​animaux.zip|animaux.zip]] 
-  * Parlons du cadre Same Origin Policy et du mécanisme Cross-origin resource sharing (CORS) 
- 
-  * (A) Découvrons d'​abord comment le framework [[ajax2:​jquery|jQuery]] peut nous simplifier la vie 
-  * (B) Voyons comment contrôler des {{:​ajax2:​ajax-jquery_2.pdf|requêtes AJAX}} asynchrones 
-    * TP2 avec http://​api.jquery.com/​load 
-      * Corrigé : http://​ogo.heig-vd.ch/​ajaxrad/​Part2/​TP2_ajax.html 
-  * Nos exemples : [[http://​ogo.heig-vd.ch/​ajaxrad/​Part2/​jqxhr1.html|jqxhr1.html]],​ [[http://​ogo.heig-vd.ch/​ajaxrad/​Part2/​jqxhr2.html|jqxhr2.html]],​ [[http://​ogo.heig-vd.ch/​ajaxrad/​Part2/​jqxhr3.html|jqxhr3.html]] 
-  ​ 
-  * Exercices : refaire les exercices avec jQuery 
-    * Corrigé TraceIt : http://​ogo.heig-vd.ch/​ajaxrad/​Ex1/​trace/​jqtraceit.html 
-    * Corrigé CodePostal : http://​ogo.heig-vd.ch/​ajaxrad/​Ex1/​codepostal/​jqcodepostal_jsonp.html 
- 
-  * Exercice WorldCat : 
-    * On souhaite une interface web pour rechercher des oeuvres dans le catalogue WorldCat moyennant un simple champ texte de recherche. La liste des résultats est présentée dans un tableau que l'on peut trier par entête de colonne. On souhaite l'​interface la plus "AJAX Web 2.0" possible ... 
-    * Ci-dessous les points d'​entrées pour achever cet exercice : 
-      * API doc : http://​www.oclc.org/​developer/​develop/​web-services/​worldcat-search-api/​bibliographic-resource.en.html 
-      * Exemple OpenSearch : [[http://​worldcat.org/​webservices/​catalog/​search/​worldcat/​opensearch?​q=ajax%20and%20jquery&​format=atom&​wskey=y4RRkXhMsipeGD5DQlYfNpjWTostSfvJ1MEK2IR6g4HPDmLYm5RrTNSfr9Nf5k7MRvfo91qFn1Xvzgu3|http://​worldcat.org/​webservices/​catalog/​search/​worldcat/​opensearch]] 
-      * Atom XML : http://​fr.wikipedia.org/​wiki/​Atom 
-      * Exemple ISBN : [[http://​www.worldcat.org/​webservices/​catalog/​content/​isbn/​9780470978306?​wskey=y4RRkXhMsipeGD5DQlYfNpjWTostSfvJ1MEK2IR6g4HPDmLYm5RrTNSfr9Nf5k7MRvfo91qFn1Xvzgu3|http://​www.worldcat.org/​webservices/​catalog/​content/​isbn/​9780470978306]] 
-      * MARCXML : http://​en.wikipedia.org/​wiki/​MARC_standards 
-      * jQuery tablesorter : http://​tablesorter.com/​docs/​ 
-    * Corrigé : [[http://​ogo.heig-vd.ch/​ajaxrad/​Part2/​worldcat.zip|worldcat.zip]] 
-      * sans jQuery : http://​ogo.heig-vd.ch/​ajaxrad/​Part2/​worldcat.html 
-      * avec jQuery : http://​ogo.heig-vd.ch/​ajaxrad/​Part2/​worldcat_jquery.html 
-==== Evaluation des connaissances ==== 
-  * Examen final : {{:​ajax2:​ajax_enonce.pdf|énoncé}},​ {{:​ajax2:​exam-corrige2.zip|corrigé}} 
-  * Remédiation : {{:​ajax2:​ajax_enonce-2.pdf|énoncé}},​ {{:​ajax2:​examajax.zip|code initial}}, {{:​ajax2:​examajax_corrige.zip|corrigé}} 
- 
  
ajax2/start.txt · Last modified: 2018/05/16 10:05 (external edit)