JAVASCRIPT AJAX LE WEB 2.0. Comment JavaScript se situe-t-il par rapport à html? ● 3 méthodes d'insertion du code JavaScript dans un document html : –

Présentation au sujet: "JAVASCRIPT AJAX LE WEB 2.0. Comment JavaScript se situe-t-il par rapport à html? ● 3 méthodes d'insertion du code JavaScript dans un document html : –"— Transcription de la présentation:

1 JAVASCRIPT AJAX LE WEB 2.0

2 Comment JavaScript se situe-t-il par rapport à html? ● 3 méthodes d'insertion du code JavaScript dans un document html : – Les balises et – Le pseudo-protocole JavaScript dans une URL – Les nouveaux attributs de balise pour la gestion d'événements

3 ● Où s'exécute un script JavaScript? ● >une exécution locale ● D'où provient le code JavaScript? ● >un langage source

4 JavaScript et les liens Dans un contexte Javascript, chaque lien est rangé dans un tableau et on peut accéder à un lien par son indice : document.links(indice). Le nombre de liens d'une page peut être connu par la valeur document.links(i)target. Il existe 3 événements associés au lien : - onMouseOver - onMouseOut - onClick.

5 Les images Les propriétés JavaScript : les images sont stockées dans le tableau images. Le nombre d'images du document est document.images.length. Src = URL du fichier image Height et width donnent les dimensions de l'image Complete : affichage complet (true) ou non (false) Les images cliquables

6 Les couches Les balises et et leurs attributs Les propriétés des couches Les méthodes des couches Les événements des couches

7 Le fonctionnement de JavaScript Les variables permettent de stocker et de manipuler des données Les types Les tableaux Les objets du browser Les classes prédéfinies La gestion et la capture d'événements

8 Les instructions de base Les commentaires Les variables Les boucles Les fonctions Les fonctions prédéfinies Les instructions conditionnelles Les objets

9 Les limites de JavaScript JavaScript et la sécurité La balise

10 AJAX (Asynchronous Javascript And XML) : acronyme désignant une méthode informatique de développement d'application web. Plan : historique Définition But d'Ajax Avantages inconvénients pour faire un site Ajax comment fonctionne Ajax application Ajax avenir d'ajax

11 Historique Terme employé depuis 2005 par Jesse James Garrett dans un article : « a new approach to Web applications ». Élément qui la composent et leur utilisation sont antérieurs Point de départ d'Ajax : XMLHttpRequest, développé par Microsoft en tant qu'objet Active X Terme qui évoque l'utilisation conjointe d'un ensemble de technologies souvent utilisées sur le web : Html pour la structure sémantique des informations : css pour la présentation des informations : DOM et javascript pour afficher et interagir dynamiquement avec l'information présentée : XML et XSLT Application Ajax utilise aussi le html préformaté, les fichiers textes plats.

12 Définition (d'ap. Garrett). Plusieurs technologies qui s'assemblent dans de nouvelles voies puissantes. Ajax incorpore : une présentation basée sur des standards utilisant Xhtml et css : un affichage dynamique et interaction utilisant le DOM : échange de données et leur manipulation en utilisant XMLhttpRequest : Javascript pour les mettre en oeuvre ensemble. Application Ajax est utilisée au sein des navigateurs web qui supportent les technologies décrites avant tels que mozilla, IE...

13 Le but d'Ajax Permet d'effectuer des traitements sur le poste client avec javascript à partir d'informations sur le serveur. Avant, création des pages web dynamiques se faisait coté serveur. Permet de modifier partiellement la page afichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière. Asynchronous signifie que l'execution de javascript continue sans attendre la réponse du serveur qui sra traitée quand elle arrivera. Mode synchrone : le navigateur est gelé en attendant la réponse du serveur.

14 AVANTAGES La vitesse Permet de communiquer avec le service XMLHttpRequest permet d'interagir avec le serveur grâce à ses méthodes (open/send) et attributs (readystate, status, réponse XML, responsetext, onreadystatechange). Frameworks : moteur dont parle Garrett qui supprime l'attente du lecteur envers le serveur.

15 INCONVENIENTS Robot d'indexation pas en mesure d'indexer les contenus engendrés dynamiquement Question d'accessibilité Si Javascript désactivé, Ajax ne fonctionne pas Si l'on change les données à afficher de façon dynamique, elles ne font pas partie de la page et elles ne sont pas prises en compte par les moteurs de recherche. Aspect asynchrone fait que les modifications se font avec un délai Le bouton de retour en arrière peut se trouver désactivé.

16 Pour faire un site Ajax, il faut : Une intreface prédéfinie Que le programme Javascript, intégré dans une page web, envoie des requêtes au serveur pour obtenir un fichier. Celui-ci est exploité par les méthodes de DOM et la page est mise à jour sur le poste client de façon fluide et instantanée.

17 Comment fonctionne Ajax Ajax utilise un modèle de programmation comprenant la présentation et les événements. Interaction avec l'utilisateur se fait à partir des formulaires ou boutons Html Fonctions Javascript identifient les éléments de la page grâce au DOM et communiquent avec le serveur par l'objet XMLHttpRequest.

18 Application AJAX : technologie pour construire des pages web dynamique côté client. Les données sont échangées avec le serveur par des requêtes javascript Le serveur effectue des traitements sur ces données. Développement d'application ajax facilité par l'emploi d'un cadre d' application Le moteur ajax : permet de supprimer l'attente pour interagir avec le serveur.

19 AVENIR D'AJAX IBM a créé open Ajax Initiative, un groupe de promotion de cette technologie avec des partenaires tels que 24 seven office, Adobe, Google, Yahoo... Premier résultat : Ajax Toolkit Frameworks ( projet qui vise à proposer des outils pour le développement d'applications Ajax dans l'outil de développement Eclipse.

20 Le web 2.0 Terme utilisé pour désigner ce qui est perçu comme une transition importante du 3W, passant d'une collection de sites web à une plateforme informatique à part entière, fournissant des applications web aux utilisateurs.

21 PRESENTATION : Dans sa conception originale, le web ou web 1.0, comprenait des pages web statistiques qui étaient rarement mises à jour L'ère dot.com (.com) se basait sur un web dynamique (ou web 1.5) Web considéré comme un outil de diffusion et de visualisation de données Oct 2004 : conférence sur le web 2.0 Oct 2005 : 2° conf sur le web 2.0 Principes clés caractéristiques des applications web 2.0 : - web en tant que plateforme - données comme connaissances implicites - effets de réseau entrainés par une architecture de participation - innovation comme assemblage de systèmes et de sites distribués et indépendants - fin du cycle d'adaptation des logiciels.

22 Définitions du web 2.0 Définition de wikipedia Des technologies « mures » Une deuxième définition

23 LE WEB 2.0 : le web de deuxième génération Des usages communautaires : la culture de l'échange Un internaute devenu actif Le web 2.0 entre mythes et réalité : qu'est-ce, réellement, que le web 2.0?

24 CARACTERISTIQUES Le site ne doit pas être un jardin secret càd qu'il doit être aisé de faire rentrer ou sortir des informations du système. L'utilisateur doit rester propriétaire des données Le site doit être entièrement utilisable à travers un navigateur standard. Des aspects de réseaux sociaux

25 PROTOCOLES WEB Les protocoles de communication web sont un élément clé de l'infrastructure web 2.0 Les 2 approches principales sont REST et SOAP. Dans les 2 cas, les accès au service sont définis par une interface de programmation. Souvent, l'interface est spécifique au serveur MAIS, des interfaces de programmation web standardisées sont en train d'émerger.

26 TECHNOLOGIES Infastructure complexe et changeante Incluse des logiciels de serveurs,la syndication protocoles de messageries, des standards de navigation. Un site peut être appelé comme utilisant une approche web 2.0 s'il fait la part belle à un certain nombre de tecniques : - utilisation de css, d'un balisage Xhtml sémantique valide et des micro formats - techniques d'application riches tq Ajax - syndication et agrégation de contenu RSS - catégorisation par étiquetage (mots-clés) - utilisation appropriée des URL - architecture REST ou des services web XML.

27 Les principes du web 2.0 L'internaute au centre Une personnalisation du web Des applications plus intelligentes Des capacités de syndication qui démultiplient les possibilités de création de contenus Les bolgs

28 Critiques du web 2.0 Écueils techniques : - rapidité des interactions - qualité des interfaces utilisateurs - fiabilité et sécurité Écueils ergonomiques : un bilan mitigé Le développement