ETUDE DE CAS : JavaScript, Ajax, Web 2.0

JavaScript Historique Créé par Netscape (LiveScript) ; En 1995, il devient JavaScript (Firme Sun) ; Apparaît d’abord dans la version Netscape 2.0 ; Il est défini par la norme ECMA-262 ou ECMAScript ; Différentes versions : 1.0 à 1.7 et 2.0.

JavaScript Définition C’est un langage de scripts qui est incorporé aux balises Html et qui permet d’agrémenter la présentation et l’interactivité des pages web ; Langage de programmation basé sur les objets ; JavaScript est inspiré de Java.

JavaScript Ce n’est pas Java JavaScript Java Code intégré dans la page HTML Applet distinct de la page HTML Code interprété par le navigateur au moment de l’exécution Code source compilé avant son exécution Script (ligne de code) Applet (petites applications) Confidentialité des codes nulle (code source visible et accessible) Sécurité avec des codes compilés est donc illisibles Codes de programmation simples mais pour applications limitées Langage de programmation plus complexe mais plus performant Permet l’accès aux objets du navigateur N’accède pas aux objets du navigateur

JavaScript Fonctionnement : le codage Comment intégrer du code JavaScript dans une page HTML ? Avec la balise Script ; Avec un fichier externe ; Avec les événements.

JavaScript Le codage Avec la balise Script

JavaScript Le codage Avec un fichier externe Avec les événements Les codes sont en annexe dans un fichier ; on insère juste : <SCRIPT LANGUAGE=JavaScript SRC="url/fichier.js"> </SCRIPT> Avec les événements 1 - gestionnaires d'événements : onEvenement="Action_JavaScript_ou_Fonction();" 2 - Exemple du : <FORM> <INPUT TYPE="button" Cliquez ici VALUE="Cliquez ici" onClick="alert('Vous avez bien cliqué ici')"> </FORM>

JavaScript Les objets JavaScript va diviser les pages Web en objets et surtout va vous permettre d’accéder à ces objets et de les manipuler. Exemple : La hiérarchie des objets est : fenêtre-document-formulaire-radio et bouton et texte

JavaScript Les objets Pour accéder à un objet, il faudra donner le chemin complet de l'objet (du plus grand au plus petit) Exemple : (window).document.form.radio[0] Ils ont ensuite des propriétés personnalisées. Pour accéder aux propriétés on utilise : nom_de_l'objet.nom_de_la_propriété

JavaScript Ses possibilités JavaScript sert à contrôler les données saisies dans des formulaires HTML, ou à interagir avec le document HTML via l'interface DOM ; Il est aussi utilisé pour réaliser des services dynamiques ; Il permet la réalisation rapide de scripts et de traitements ; Des exemples : gestion des dates et heures ; gestion des cookies ; gestion de la navigation ; animations graphiques ; etc. Il est sensible à la casse ; JavaScript est conçu pour limiter les risques pour le visiteur.

JavaScript Limites Alternatives Compatibilité très limitée entre navigateurs ; JavaScript ne permet pas d'écrire ou de lire un fichier sur le disque dur du visiteur ou sur le serveur ; JavaScript n'échange pas non plus avec d'autres machines connectées pages chat impossible. Alternatives D’autres technologies existent comme Flash, Java, etc.

JavaScript Webographie K-NETWORK. Cours de JavaScript et DHTML [ L’éditeur JavaScript ]. [en ligne]. Disponible sur <http://www.editeurJavaScript.com/cours/>. Consulté le 4 novembre 2006. Découvrir JavaScript avec un cours reprenant les notions essentielles à comprendre pour faire du JavaScript. HONDERMARCK Olivier. Tutoriaux JavaScript et PHP. [en ligne]. Disponible sur <http://www.toutJavaScript.com/savoir/savoir.php3>. Consulté le 8 novembre 2006. Un ensemble de tutoriaux pour apprendre le langage progressivement. MARTIN-RABAUD Bernard. Aide JavaScript. [en ligne]. Disponible sur <http://www.aideJavaScript.com/>. Consulté le 8 novembre 2006. Site pédagogique pour aider à écrire des scripts. Il regroupe des tutoriaux mais aussi des articles thèmatiques et d’actualité sur JavaScript.

AJAX Historique Terme employé pour la 1ère fois par Jesse James GARRETT dans un article devenu célèbre intitulé A new Approach to Web Applications, en 2005 ; AJAX : Asynchronous JavaScript and XML (JavaScript et XML asynchrones) ; BUT : créer des interfaces réactives et ergonomiques.

AJAX Définition AJAX est une façon d’utiliser intelligemment plusieurs technologies préexistantes : Une présentation sur des standards utilisant HTML et CSS ; Un affichage dynamique et une interaction utilisant le Modèle Objet Document (DOM) ;

AJAX L’échange de données et leur manipulation en utilisant XML et XSLT ; La récupération asynchrone de données en utilisant XMLHttpRequest ; Le langage de scripts JavaScript pour lier le tout ensemble.

AJAX En pratique… Exemple d’une procédure de paiement en ligne. Elle est souvent décomposée en plusieurs pages web : 1. Une pour rentrer nos coordonnées postales 2. Une pour valider notre commande 3. Une pour saisir nos coordonnées bancaires 4. Une dernière pour valider définitivement Avec AJAX, l’idée serait de se dire : pourquoi faire 4 pages nécessitant 4 rechargements alors que seule une partie de la page a besoin d’être rechargée ?

Mode de fonctionnement d’AJAX

AJAX AJAX et la transmission de données asynchrones Comparaison avec le modèle d’application web classique ;

AJAX Introduction d’un médiateur entre le client et le serveur : le moteur AJAX ; Il se charge du rendu de l’interface, de la communication avec le serveur et de toute réponse à une action de l’utilisateur qui ne requiert pas un transport avec le serveur ; Il permet une interaction avec l’utilisateur de manière asynchrone.

AJAX Exemples d’applications utilisant AJAX : Viamichelin.fr ; Gmail (messagerie électronique de Google) ; Google Maps ; Google Suggests ; A9.com (moteur de recherche d’Amazon).

AJAX Avantages d’AJAX Interactivité de l’interface ; Accessibilité quelque soit le système d’exploitation ; Complexité relative grâce aux Frameworks (Ex : Open Ajax d’IBM, Atlas de Microsoft).

AJAX Limites d’AJAX : Problèmes de compatibilité avec certains navigateurs ; Difficulté de référencement par les robots d’indexation ; Disparitions de certaines fonctionnalités (« Précédent », « Favoris »).

AJAX Quel avenir pour AJAX ? Est-il réellement une révolution ? AJAX est un terme marketing qui vise l’utilisabilité ; Une réutilisation du concept de DHTML : ensemble de technologies Internet associées afin de fournir des pages HTML plus interactives.

AJAX Webographie GARRETT Jesse James. Ajax : une nouvelle approche pour les applications web. [en ligne]. Disponible sur <http://www.scriptet.net/ajax-garrett.html>. Consulté le 10 novembre 2006. Article qui a fait le tour du monde, il explique le fonctionnement d’Ajax. DROTHIER Yves. Découvrir Ajax en 5 questions. [en ligne]. Disponible sur <http://solutions.journaldunet.com/0602/060208_qr-ajax.shtml>. Consulté le 8 novembre 2006. Permet de découvrir AJAX simplement et autour de quelques questions. PYG. Ajax : le retour des lessiviers ?. [en ligne]. Disponible sur <http://www.framasoft.net/article3991.html>. Consulté le 9 novembre 2006. Définition et fonctionnement d’Internet. L’auteur met l’accent sur le fait que le web ne connaît pas une révolution mais une simple évolution comme il en a toujours vécu.

WEB 2.0 Historique Naissance du terme lors de la Conférence Web 2.0 en octobre 2004 ; Terme inventé par Dale DOUGHERTY de la O’Reilly Media, Craig CLINE de MediaLive et John BATELLE.

WEB 2.0 Définition « Le Web 2.0 est un terme souvent utilisé pour distinguer ce qui est perçu comme une transition importante du World Wide Web (WWW), passant d’une collection de sites web à une plate-forme informatique à part entière, fournissant des applications web aux utilisateurs » (Wikipédia).

WEB 2.0 Cartographie du Web 2.0 développé lors d’une session de brainstorming pendant la 1ère conférence du Web 2.0

WEB 2.0

WEB 2.0 Les 7 principes développés par les trois inventeurs du terme Web 2.0 : Le web en tant que plateforme ; Tirer partie de l’intelligence collective ; La puissance est dans les données ; Services « prêt à consommer » ; Des modèles de programmation légers ; Le logiciel se libère de l’ordinateur ; Enrichir les interfaces utilisateurs.

WEB 2.0 Les améliorations et les innovations du Web 2.0 : AJAX ; RSS ; Wiki ; Permalink ; XHTML ; Mashup ; Web sémantique ; Applications Internet Riches.

WEB 2.0 Comparaison du Web 1.0 et du Web 2.0 Web 1.0 // Web 2.0 DoubleClick --> Google AdSense Ofoto --> Flickr Akamai --> BitTorrent Britannica Online --> Wikipedia sites perso --> blogs pages vues --> coût au clic publication --> participation arborescence (taxonomie) --> tags ("folksonomy") rigidité du contenu --> syndication de contenu

WEB 2.0 Le Web 2.0 : révolution ou évolution ? Le Web 2.0 est constitué d’une multitude de petites améliorations ou innovations sur le plan technique, ergonomique et sémantique ;

WEB 2.0 Quels sont les apports du Web 2.0 pour l’utilisateur ? - Moins de clics ; - Plus d’informations affichées à l’écran ; - Moins de temps de chargement ; - Chacun apporte un contenu (blog, wiki, réseaux sociaux) ; - Les utilisateurs sont des co-développeurs ; - Les services web se développent (ex : Skype, Google, Itunes, Cdiscount, etc.).

Web 2.0 Les apports pour la machine : - Interface plus flexible ; - Une interopérabilité plus poussée ; - Le web 2.0 en tant que plateforme. AJAX, JavaScript et le Web 2.0.

WEB 2.0 Webographie : CAVAZZA Frédéric. Web 2.0 : la révolution par les usages. [en ligne]. Disponible sur < http://solutions.journaldunet.com/0601/060105_tribune-sqli-web-20.shtml>. Consulté le 10 novembre 2006. Avantages du Web 2.0 pour l’usager. O’REILLY Tim. What is Web 2.0. [en ligne]. Disponible sur < http://web2rules.blogspot.com/2006/01/what-is-web-20-par-tim- oreilly-version.html>. Consulté le 10 novembre 2006. Article fondateur du Web 2.0. Web 2.0. [en ligne]. Disponible sur <http://fr.wikipedia.org/wiki/Web_2.0>. Consulté le 10 novembre 2006. Présentation générale du Web 2.0.