99
Programmation Ajax/web2.0 www.objis.com - Formation AJAX/web2 1

Programmation Ajax/web2.0 - Formation AJAX/web2 1

Embed Size (px)

Citation preview

Page 1: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Programmation Ajax/web2.0

www.objis.com - Formation AJAX/web2 1

Page 2: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

A propos d’Objis…

Centre de formation depuis 2005

Spécialiste Java et nouvelles technologies

Formations intra/inter entreprises

70% de travaux pratiques

Bilan pédagogique individuel

Paris – Lyon – Dakar

www.objis.com

2www.objis.com - Formation AJAX/web2

Page 3: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Formateur : Douglas Mbiandou

Ingénieur INSA Lyon (2000)

10 ans d'expériences projets SI

Architecte / Formateur Java

Resp. formation Objis (www.objis.com)

Président Club Solidarité Numérique•www.club-solidarite-numerique.org

3www.objis.com - Formation AJAX/web2

Page 4: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

SOMMAIRE (5j)

• Origines et principes du web2.0 (p5)• Rappels (X)HTML, CSS, Javascript (p13)• Manipulation XML avec DOM (p20)• Astuces Plugin Firebug (p41)• L'avenir du web : HTML5 , XHTML2 (p48) • Objet XMLHTTPRequest (p52)• Kit de développement Ajax YUI (p58)• Kit de développement Ajax Dojo (p64)• Création de flux RSS (p81)• Création de web services (p89)

4www.objis.com - Formation AJAX/web2

Page 5: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Le Web 2.0

Origine

Principes clés

5www.objis.com - Formation AJAX/web2

Page 6: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Origines

Idée de 'web 2.0' née en 2004

2005 : Article de Tim O'Reilly :'What Is Web 2.0 ?'

+ de sites web, + d'applications, + régulièrement

Internautes + exigeants

Marketing ou réalité ?

Plusieurs principes clés

6www.objis.com - Formation AJAX/web2

Page 7: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Principe 1 : web = platteforme

Besoin de services...et non de logiciels !

Pionniers : DoubleClick (pub) & Akamai (cache web)•http://emea.doubleclick.com/FR/•http://www.akamai.fr/

DougleClick VS Google AdSense

Akamai VS BitTorrent

Web 1.0 : Netscape, Lotus, Microsoft, Oracle, SAP

Web 2.0 : Google, eBay, Amazon, Napster7www.objis.com - Formation AJAX/web2

Page 8: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Principe 2 : tirer parti de l'intelligence collective

Croissance organique de liens Hypertextes• Yahoo! : le meilleur de milliers , puis de millions de

sites• Google PageRank : liens externes !• Communauté eBay : notation utilisateur• Amazon : notation utilisateur

Sourceforge.net : + de 100.000 projets

Phénomène des BLOGS • Organisation chronologique• flux RSS (Abonnement à une page : bourse, météo,

photos…)

8www.objis.com - Formation AJAX/web2

Page 9: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Principe 2 : tirer parti de l'intelligence collective

9

Page 10: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Principe 3 : la puissance est dans les données

Google : ses pages explorées Yahoo! : son index NavTeq: ses Cartes satellites (750 Millions $)

• Utilisées par services : Mapquest, maps.yahoo.com, maps.google.com, maps.msn.com

Remarque Amazon •les données viennent du fournisseur de registre ISBN RR Bowker mais Amazon leur ajoute de la valeur avec commentaires clients

Différence entre Fournisseur de données et fournisseur de Logiciels

10www.objis.com - Formation AJAX/web2

Page 11: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Principe 4 : enrichir l'interface utilisateur

Utilisateurs de + en + exigeant !

Apporter de l’intelligence ‘coté client’

• Avant : Applets, javascript, DHTML

• Avant : AJAX ! – Ex : Gmail (glisser-déposer, messagerie

inst.) – viadeo.com (mise en reseau)

11www.objis.com - Formation AJAX/web2

Page 12: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Autres principes

12

Libérer le logiciel du seul PC• Le web 2.0, c’est aussi les périphériques Portables, PDA…pas seulement le PC !•Ex : iPod / iTunes

Des modèles de programmation légers•95% des Services web Amazon.com avec REST•Google MAPS avec Ajax

L’innovation est dans l’assemblage (mashups)•Création d’un service à partir d’autres

•Ex : housingmaps.com

www.objis.com - Formation AJAX/web2

Page 13: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Présentation AJAX et technologies associées

AJAX

XML

CSS

Javascript

DOM

13www.objis.com - Formation AJAX/web2

Page 14: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

AJAX

Asynchronous JAvascript and Xml

AJAX = Mélange de plusieurs technos

- XML,

- Javascript, - DOM,

- CSS

2005 : Jessie James Garrett

2006 : IBM , Google, Yahoo, et Cie •=> Open Ajax

14www.objis.com - Formation AJAX/web2

Page 15: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Exemple mise en oeuvre AJAX

Achat en ligne : 4 pages

- Page 1 : entrer vos coordonnées postales

- Page 2 : valider votre commande avant paiement

- Page 3 : saisir vos coordonnées bancaires

- Page 4 : valider définitivement.

4 A/R client => serveur

AJAX : et si on mettait à jour uniquement ce qu'il faut d'une page à l'autre ?

15www.objis.com - Formation AJAX/web2

Page 16: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Comparaison

16www.objis.com - Formation AJAX/web2

Page 17: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Comparaison

17www.objis.com - Formation AJAX/web2

Page 18: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Exemple framework Ajax : Open Rico

Open Rico - Moteur Ajax

- Glisser Déposer

- Animations

- Comportement

2 bibliothèques (fichiers .js) à inclure ds pages php

Démonstrations : http://demos.openrico.org

18www.objis.com - Formation AJAX/web2

Page 19: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Exemple framework Ajax : Open Rico

19www.objis.com - Formation AJAX/web2

Page 20: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

XML

XML = eXtensible Markup Langage

Nb de balise infini ( contrairement à HTML)

• Description données de domaines fonctionnels différents

XML = contenu (et non présentation)

1 contenu = Plusieurs présentations possibles

– HTML, WML, XLS, DOC, CSV, TXT,...

20www.objis.com - Formation AJAX/web2

Page 21: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

De HTML à XML

1997 : HTML 4.01

1999 : XHTML 1.0 ( www.w3.org/xml )

2001 : XHTML 1.1

21www.objis.com - Formation AJAX/web2

Page 22: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

XHTML 1.0

Reformulation de HTML en Application XML

3 types de documents XHTML 1.0 :

• XHTML 1.0 Transitional (le + pratique)

– Idéal pour migration HTML --> XML

• XHTML 1.0 Strict

• XHTML 1.0 frameset : support des frames

Modules : Core XHTML,Xforms,SVG, MathML

Déclaration spécifique :

...

22www.objis.com - Formation AJAX/web2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Page 23: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Pourquoi utiliser XHTML ?

XHTML plus facile à manipuler !

• XSLT : transformation données

• XML Schema : validation données

• Xpath / Xquery : extraction données

• DOM, SAX : programmation

• HTML vient de SGML : difficile à manipuler

XHTML encourage l'utilisation de CSS

XHTML meilleur sur périphériques mobiles

XHTML extensible. Types complexes.

23www.objis.com - Formation AJAX/web2

Page 24: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Différences HTML / XHTML

XHTML est une application XML

• Fermeture des balises obligatoires !

• Le document doit être valide (DTP, Schema)

Attributs 'id' et 'name' des éléments a, applet, form, frame, iframe, img, map

– HTML 4 : Présents

– XHTML 1.0 : attribut name déprécié

– XHTML 1.1 : attribut name supprimé.

Déclaration et encodage

24www.objis.com - Formation AJAX/web2

<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

Page 25: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Exemple document HTML

25www.objis.com - Formation AJAX/web2

<html> <head> <title>Formation web 2.0 - HTML</title> </head>

<body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <button>Fais-le !</button> </body></html>

<html> <head> <title>Formation web 2.0 - HTML</title> </head>

<body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <button>Fais-le !</button> </body></html>

Page 26: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

version XHTML

26www.objis.com - Formation AJAX/web2

<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formation web 2.0 - HTML</title> </head>

<body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <button>Fais-le !</button> </body></html>

<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formation web 2.0 - HTML</title> </head>

<body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <button>Fais-le !</button> </body></html>

Page 27: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Balises <div> et <span>

Objectif : décomposer le contenu XHTML en parties dont la signification est identique

<div> : éléments de niveau bloc•Rupture physique entre éléments précédents le <div> et éléments suivants le <div>

<span> : balisage incorporé • vous pouvez par exemple appliquer à une expression à

l'intérieur d'une phrase• Sans style, ces balises ne produisent rien de particulier

(sauf saut de ligne pour <div>)

27www.objis.com - Formation AJAX/web2

Page 28: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Attributs 'class' et 'id'

Objectif : identifier les éléments de contenu dont vous souhaitez modifier la présentation (CSS) ou le comportement (Javascript)

class : identifie un élément que vous pouvez utiliser plusieurs fois

Id : identifie un élément unique dans une page

28www.objis.com - Formation AJAX/web2

Page 29: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

XSLT

XSLT : Extensible StyleSheet Language Transformation

– Création de pages XHTML

– Utilisation coté serveur • Transformer sources XML avant publication

– Utilisation coté client : balise <?xml-stylesheet ?>

– xml-stylesheet : instruction processeur • Attributs : • Géré par : IE, Firefox, Opera, Safari

• Non géré par : Konkeror, Lynx,

29www.objis.com - Formation AJAX/web2

Page 30: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Démo XSLT coté client

30www.objis.com - Formation AJAX/web2

XSLT

+

+

Page 31: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Démo XSLT coté client

31www.objis.com - Formation AJAX/web2

function transform () {

var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "channel.xml", false); xmlhttp.send('');

var xslhttp = new XMLHttpRequest(); xslhttp.open("GET", "rss.xsl", false); xslhttp.send('');

var processor = new XSLTProcessor(); processor.importStylesheet(xslhttp.responseXML);

var newDocument =processor.transformToDocument(xmlhttp.responseXML);

var o = document.getElementById("planet");

var n = newDocument.getElementById("planet"); o.parentNode.replaceChild(n, o);}

function transform () {

var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "channel.xml", false); xmlhttp.send('');

var xslhttp = new XMLHttpRequest(); xslhttp.open("GET", "rss.xsl", false); xslhttp.send('');

var processor = new XSLTProcessor(); processor.importStylesheet(xslhttp.responseXML);

var newDocument =processor.transformToDocument(xmlhttp.responseXML);

var o = document.getElementById("planet");

var n = newDocument.getElementById("planet"); o.parentNode.replaceChild(n, o);}

1

2

3

4

Page 32: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Javascript Langage de programmamation coté client

•Traitement sur navigateur, pas sur serveur !

Ajout d'interactivité aux pages web•Validation formulaires, alertes, Roll over...•Personalisation de pages, cookies..

Script javascript•Interne à page HTML.

– <script type='text/JavaScript'>» Disponible slt pour la page concernée

• Externe à la page HTML (Maintenance plus aisée).– <script src='monscript.js' type='text/JavaScript'>

» Disponible pour plusieurs pages.

32www.objis.com - Formation AJAX/web2

Page 33: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Manipulation XML avec Javascript/DOM

33www.objis.com - Formation AJAX/web2

Page 34: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

DOM Document Object Model

Représentation Orientée Objet •Document HTML ou XML

Structure hierarchique (Arbre)

Spécification W3C : www.w3c.org/dom

API Manip. dynamique de doc HTML / XML•Plusieurs implémentations : Java, PHP, Python...

Noeuds (enfant, parent) types : Element, Text

Document racine (root) : document 34www.objis.com - Formation AJAX/web2

Page 35: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Vue d'ensemble API DOM

Point d'entrée : objet 'document'•Javascript : document est une variable globale

A partir de l'objet document, navigation récursive en utilisant propriétés des noeuds :

•firstChild, lastChild, childNodes, parentNode...

Accès direct : •GetElementById() : accès à partir d'un 'id'•GetElementByTagName() : accès via nom de baline

35www.objis.com - Formation AJAX/web2

Page 36: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Vue d'ensemble API DOM

Noeuds : types Element et Text

Création de noeuds: •CreateElement()•CreateTextNode()

AppendChild(), insertBefore(), replaceChild()

Suppression de noeuds: •RemoveChild()

Attention interprétations IE et Firefox !

Attention manipulation HTML et XHTML !•XHTML : premier enfant 'doctype', et non 'html'

36www.objis.com - Formation AJAX/web2

Page 37: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Exemple DOM / HTML

37www.objis.com - Formation AJAX/web2

<html> <head> <title>Formation web 2.0 - HTML</title> </head>

<body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <script type="text/javascript"> function doIt() {unimportantText = document.getElementsByTagName("p")[0];pleaseNote = document.createElement("p");pleaseNote.appendChild(document.createTextNode("SVP notez ceci :"));unimportantText.parentNode.insertBefore(pleaseNote, unimportantText); } </script> <button onclick='doIt()'>Fais-le !</button> </body></html>

<html> <head> <title>Formation web 2.0 - HTML</title> </head>

<body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <script type="text/javascript"> function doIt() {unimportantText = document.getElementsByTagName("p")[0];pleaseNote = document.createElement("p");pleaseNote.appendChild(document.createTextNode("SVP notez ceci :"));unimportantText.parentNode.insertBefore(pleaseNote, unimportantText); } </script> <button onclick='doIt()'>Fais-le !</button> </body></html>

Page 38: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Exemple DOM / HTML

www.objis.com - Formation AJAX/web2

<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formation web 2.0 - HTML</title> </head>

<body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <button>Fais-le !</button> </body></html>

<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formation web 2.0 - HTML</title> </head>

<body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <button>Fais-le !</button> </body></html>

document.getElementsByTagName("p"); // retourne une liste avec 1 noeuddocument.getElementsByTagName("p").length; // retourne 1document.getElementsByTagName("p")[0]; // retourne l'élement pdocument.getElementsByTagName("P"); // retourne une liste vide sous Firefox

Page 39: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

CSS

Présentation / Mise en forme • HTML / XML• Police, couleurs, arrière plan, marges

– Externe (conseillé) <link rel="stylesheet" type="text/css" href="mon_fichier.css" />

– Interne : balises <style> dans <head>

– Outil : www.quirksmode.org• Compatibilité des navigateurs avec styles

39www.objis.com - Formation AJAX/web2

Page 40: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Démo CSS

40www.objis.com - Formation AJAX/web2

<head><style type="text/css">

body { font-family: verdana, sans-serif; font-size: 12px; }

.rounded { text-align: center; background: #ffcc66; margin-top: 1em; }

</style></head>

<head><style type="text/css">

body { font-family: verdana, sans-serif; font-size: 12px; }

.rounded { text-align: center; background: #ffcc66; margin-top: 1em; }

</style></head> <body>

<div class="rounded"> <h3>Formation web 2.0</h3> <p> Le web 2.0 rassemble un ensemble... </p> </div> </body>

<body> <div class="rounded"> <h3>Formation web 2.0</h3> <p> Le web 2.0 rassemble un ensemble... </p> </div> </body>

1

3

2

Page 41: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Firefox : plug-in Firebug

• Firebug est un extension de Firefox qui permet de déboguer le javascript, le css, la structure HTML et les requêtes AJAX d’une page.

• download : https://addons.mozilla.org/fr/firefox/addon/1843• Point d'arrêts & debogage pas à pas ( 'debugger' ) • Piles d'erreurs (stack) : pour connaître chemin exécution• Niveaux de logs console (log, info, warn, error) • Calcul durée d'un script (console.time)

Après installation, lancer nouvelle session Firefox et Cliquez ici (coin inférieur droit du navigateur ) pour voir la console

41

Page 42: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Firebug & Javascript

3

1

2

4

1 – Ligne où il y a l’erreur.

2 – Fichier et numéro de ligne où il y a l’erreur.

3 – Détail de l’erreur.

4 – Stack Trace (Chemin qu’il y a eu avant de se rendre jusqu’à l’erreur).

42

Page 43: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Firebug & AJAX

56

5

8Réponse reçueParamètres

GET/POSTenvoyés

URL Requête

NET

43

Page 44: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Firebug & HTML

• 9 - Inspection visuelle du HTML (en appuyant sur btn 'inspect')

• 10 – Indique où dans le DOM l’élément sélectionné se trouve.• 11 - Layout dans la page (margin, border, padding)

9

10

11

44

Page 45: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Firebug & CSS• 12 - Indique le code CSS qui affecte l’élément choisi

• 13 – Quand un attribut est rayé, cela signifie qu’il n’a plus d’effet.• 14 - Indique de quel fichier css le code provient

13

1214

45

Page 46: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Firebug : debogage

1

15 - L'ajout de l'instruction 'debugger;' dans vos scripts implique point d'arrêt et possibilité de debogage pas à pas16 – Navigation pas à pas (ligne suivante, entrer ds code, ligne précédente)

17 - Possibilité de voir les variables ici, pas à pas

18 – Boutons 'breakpoints' : Voir tous les points d'arret (points rouges début de ligne. Par double-click)

15

18

16

46

Page 47: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Démo Firefox DevBOI : Recommandations W3C

Recherche d'informations méthode getAttribute d'un objet DOM Core Element

Choisir sujet de recherche

47

Page 48: Programmation Ajax/web2.0  - Formation AJAX/web2 1

XHTML 2

• Proposition du W3C pour le futur balises navigateurs– Objectif : préparer prochaine génération clients web Riches !

• Basé sur XML– Les balises de mise en forme supprimé

• <big, small, font...>

• Rupture forte avec HTML 4– Tous les formulaires remplaces par XFORMS– Plus compliqué pour développeurs. – Les navigateurs vont'ils suivre ?

• Accessibilité (disparition de iframe)• Risque manque de compatibilité avec pages HTML 4• PB : les spécifications trainent...

48

Page 49: Programmation Ajax/web2.0  - Formation AJAX/web2 1

HTML 5

• Groupe WHATWG (www.whatwg.org)– Web Hypertext Application Working Group– 20% navigateurs : Firefox, Opera, Safari...

• Evolution incrémentale du HTML 4– Pas de rupture forte! (comme avec XHTML 2.0)

• Ajouter nouveaux éléments de disposition – <header>, <footer>, <section>, <article>, <nav>...

• Supprimer éléments– <frame>,<frameset>,<noframes>.,<font>, <center>

• Nouveaux éléments dynamiques– <datagrid>, <Canvas>,<progress>,...

• Rapprochement du W3C. Working draft.• Peut être sortie fin 2008 !

49

Page 50: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Technologies Ajax

• XMLHTTPRequest : objet du navigateur utilis pour des appels asynchrones coté serveur

• (X)HTML / DOM : Représentation de la page et API DOM pour modifier dynamiquement la page

• Javascript : Utilisé pour Apeller XMLHTTPRequest et modifier la page via DOM

• XML : format de données que l'on peut utiliser pour échanger des informations entre le navigateur et le serveur –Rq : D'autres formats d'échange possibles :

• JSON, CSV, (X)HTML, texte...50

Page 51: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Ajax : pour le confort de l'utilisateur

• Avec applications Web 1.0 , l'utilisateur :–1) Demande une page (lien, URL, formulaire)–2) Attend cycle Requête/Réponse du navigateur

• Temps d'attente potentiellement long (secondes)

–3) Lis la page (ou remplit formulaire) puis 1)• Avec Applications Ajax / Web 2.0

–Applications rapides, confortables !• Comparaison Applications Cartographie en ligne

–Web 1.0 :Mapquest–Web 2.0 : Google Maps

51

Page 52: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Historique Objet XMLHTTPRequest (XHR)

• 1995 : Créé par Microsoft

• Mars 1999 : Disponible dans Internet Explorer 5

• Juin 2002 : Adopté par Mozilla 1.0

• Février 2004 : Adopté par Safari 1.2

• Avril 2005 : Adopté par Opéra 8.0

• Tous les éléments d'ajax étaient donc déjà présents52

Page 53: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Démo XMLHTTPRequest

+

Doc XML (famillesimpson.xml)

Action utilisateur

Formulaire HTML

Zone chargée dynamiquement avec données du fichier XML

53

Page 54: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Code HTML

Zone marquée (id= 'membres') dans laquelle les données seront affichées dynamiquement, sans chargement de toute la page

Zone marquée (id= 'membres') dans laquelle les données seront affichées dynamiquement, sans chargement de toute la page

1

54

Page 55: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Script Javascript

Création objet XMLHTTPRequest

Fonctions principales

Chargement asynchrone (true) du document XML famillesimpson.xml.Le javascript de la page ne sera pas bloqué suite au 'send'

Callback : Que faire lorsque l'état de l'objet XMLHTTPRequestchange ? INFO : 4 états possibles : 0 : non initialisé1 : ouvert2 : envoyé3 : en reception4 : chargé

Ici on s'interesse au cas ou l'état de l'objet HTTPRequest chargé

Extraction de données + création éléments HTML 'li'

6

5

4

3

2

55

Page 56: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Objet XMLHTTPRequest (XHR)

• Sa création dépend du navigateur

• Différentes implémentations

• W3C : création de spécifications en cours

• CONSEIL : Ne pas l'utiliser directement

• Passer par des librairies qui rendent transparent le type de navigateur

– Ex : Librairies Yahoo! User Intercace (YUI)

– Ex : Librairie Google Web Toolkit (GWT)56

Page 57: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Inconvénients AJAX

• Si Javascript désactivé dans navigateur, AJAX ne fonctionne pas !

• Nécessite compétences Javascript / DOM

• Attention maintenance du code !– Utilisation de librairies javascript externe

• Pb référencement– Seule la première page est vue

• Pb Favoris– Seule la première page est vue

57

Page 58: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Kits de développement AJAX

58

Page 59: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Librairie YUI

• Yahoo User Interface– Framework Ajax proposé par Yahoo

• AVANTAGES– Très bonne documentation (Composants, API)

– Open Source (Licence BSD)

– Distribution simple : 1 fichier zip (Fichiers Javascript + exemples + docs.)

– Modulaire : ajouter à vos pages uniquement les parties qui vous interessent.

– Utilisé par Yahoo dans ses propres sites

• INCONVENIENTS– Ne fournit pas tous les composants comme autres librairies. Ex Editeur HTML,

Table triée

– Open Source mais controlé par Yahoo

– Pas de gestion automatique des dépendences (comme dans Dojo).

59

Page 60: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Composantes YUI

Taille / dépendences des composants YUI

60

Page 61: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Exemple Démo YUI

Import librairies Yahoo :yahoo.js, Connection.js

Fonction loadSimpsons, apellée suite à appui du boutton. Ici, le développeur ne se souci pas du navigateur (Géré par YUI) AsyncRequest() :Gestion chargement famillesimpson.xml :

•callback : que faire suite à tentative chargement xml ?•null = 'n'envoyer aucune donnée'

Success : Gestion événement : chargement xml réussiRq : Ici pas de gestion de l'échec chargement (failure :)

61

Page 62: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Liens utiles

• Kit Yahoo (YUI) : http://developper.yahoo.com/yui• Kit GWT : http://code.google.com/webtoolkit• Kit Open Rico : http://openrico.org/• Mozilla developper : http://developer.mozilla.org/

62

Page 63: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Framework Ajax : DOJO

• Interfaces riches : Ajax + reverse Ajax (comet)

• Dojo vous aide à structurer projet et ré-utiliser

modules. « Développer en confience »• Fondations solides : dojo core (24k),créé par experts

internationaux reconnus (depuis 2004) :• Centaines de Tests. Millions d'utilisateurs• Pas besoin de scripts supplémentaires :

Tout est dans : Dojo core, Dojo dijit, DojoX

• Dojo core : modules RPC, retour arriere, Offline• Du prototype à la mise en production !

• Internationalisation (100 langages.)

• Outils test unitaire. Outils d'Optimisation 63

Page 64: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

64

Page 65: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

DOJO core

1

2

3

65

Page 66: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

DIGIT : interfaces utilisateur http://dojotoolkit.org/projects/dijit

– Ajout de composants via balises spécifiques

(ex : agenda,validateur monnaie,...).

– Pas besoin de connaître HTML !

– Accessibilité : navigation clavier,contrastes, lecteur ecran

– Thème par défaut : THUNDRA

– Créez vos thèmes ! (Prototypage rapide)

– Prêt pour la production

66

Page 67: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

DojoX : Extensions Dojo

http://dojotoolkit.org/projects/dojox

Dojox = Laboratoire Ajax (Inventions,innovations)• Travail hors ligne : Dojox Offline (+ Google Gears)

• Dojox Grid : gestion pagination & scrolling intuitif

• Partage de données entre composants (dojo.data)

• Visualisation de données (dojox.charting) à la volées

• Dessiner sur navigateur(dojox.gfx)

• Dojox Cryptography, XML...

67

Page 68: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Dojo : Hello World

1

4

3

2

5

6

68

Page 69: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Dojo : Hello World

69

Page 70: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Dojo : Hello XMLHTTPRequest !

11

22

70

Page 71: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Dojo : Hello Ajax / GET !

1

2

3

71

Page 72: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Deboggage 1 : la console

1

2

– Firefox : utiliser plugin Firebug !

– Attribut isDebug:true de djConfig

– Utile pour navigateurs IE, Safari

– Hiérarchisation log : debug, info, warn, error

– Console.dir : affiche contenu variables à l'écran

Page 73: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Deboggage 2 : 'debugger;'

– Point d'arrêt

– A utiliser avec Firebug , onglet console

– Console Firebug en mode ligne de commande

12

73

Page 74: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Gestion 'retour arrière'

Insertion d'une IFRAME sur les pages

URL : http://.../mapage.php#mapage

djConfig="preventBackButtonFix: false"

dojo.require("dojo.back");

dojo.back.addToHistory({

back: function(){ console.debug(‘back pressed’); },

forward: function(){ console.debug(‘forward pressed’); },

changeUrl: true

});

dojo.back.addToHistory(state);

Pour que l'url change ds le navigateur

74

Page 75: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Utilisation deComposants graphiques

Bibliothèque Digit

2 méthodes : balises ou programmation

Méthode balises : nécessite parseur DOM

– ParseOnLoad : True– Attribut 'dojoType' du widget– Dojo charge objet et insère pour vous code associé

Exemple balise : barre de progression

<div dojotype="dijit.ProgressBar" progress="20" maximum="50"></div><div dojotype="dijit.ProgressBar" progress="20" maximum="50"></div>

75

Page 76: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Utilisation deComposants graphiques

Méthode programmation (meilleur control !)

– ParseOnLoad : True

– C'est vous qui chargez et inserez composant ds page

Exemple balise : barre de progression

<div id="bar"></div> ......var bar = new dijit.ProgressBar({progress: 20, maximum: 50}, "bar");

<div id="bar"></div> ......var bar = new dijit.ProgressBar({progress: 20, maximum: 50}, "bar");

76

Page 77: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Développer avec Dojo

dojo.addOnLoad : code à exécuter

uniquement lorsque toute la page est

chargée

digit.byId : retrouve objet associé à un 'id'

Exemple accès par programmation

<div id="bar'' dojotype="dijit.ProgressBar" ></div>

...

dijit.byId("bar").update({progress: 10});

<div id="bar'' dojotype="dijit.ProgressBar" ></div>

...

dijit.byId("bar").update({progress: 10});

77

Page 78: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Dojo & Accessibilité ARIA : Accessible Rich internet Applications

module dijit.util.wai.js Widgets de Dojo 'accessibles' !

Efforts d'IBM pour rendre Dojo Accessible

Widgets fonctionnent avec souris & clavier

attribut 'tabindex' pour le focus clavier– Fléchage navigation

Evènement spécial : onklick() Lecteurs d'écran

– Implémentation ARIA : 'roles' et 'states'– Le lecteur peut connaître le type de widget(ex : tree) et permet (flèches) à

l'utilisateur de naviguer et connaître l'état (ex : déroulé ou

compacté)

78

Page 79: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Attributs ARIA

Donner attribut ARIA à un Widget:

dijit.util.wai.setAttr (DomNode node, String ns, String attr, String|Boolean value)

Exemples :

dijit.util.wai.setAttr( focusNode, "waiRole",

"role", "treeitem");

dijit.util.wai.setAttr( focusNode, "waiState",

"expanded", "true");

79

Page 80: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Syndication de contenu

– Syndication.

– Protocoles RSS, ATOM.

– Framework MagPieRSS

80

Page 81: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Contexte

• Syndication : application forte du Web 2.0• 1 article --> plusieurs publications• Tout le monde peut publier !• Les sites web proposent aujourd'hui syndication

de leur contenu–Les utilisateurs s'inscrivent à un flux et

utilisent aggrégateur ou lecteur de flux pour recevoir infos

• Qu'est ce qu'un flux de syndication ?• Comment produire des flux ?

81

Page 82: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Notions clés

• 2 différences entre syndication et pages web–L'information vient vers l'utilisateur (PULL)–L'Information qui arrive est structurée

• MicroContenu : En tête, titres, résumé–C'est ce qu'on voit dans les blogs

• MacroContenu : Corps de l'information• Echanges réguliers client / server pour MAJ

–HTTP : Header If-Modified-Since• Formats de syndication

–RSS 1.0, RSS 2.0, ATOM

82

Page 83: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Formats de Syndication• RSS 1.0

– Descendant format W3C RDF (Resource Description Framework)• Fournir description simple d'une ressource. • Ne pas fournir toute la ressource

– Ex : si vous ajoutez ou changez une page dans votre site, vous fournissez uniquement Titre + lien dans le flux

– Netscape RDF Site Summary 0.9 (Complexe). RSS-DEV

• RSS 2.0 : – 2000 : Netscape RDF Site Summary 0.91. publié par Userland

• Pas de namespace. Pas de support RDF• Dave Winer (Userland)

– Renomé Really Simple Syndication

• Atom : – Volonté d'un format 100% neutre, implémenté par tous,

extensible librement, et bien spécifié. RFC 4287 83

Page 84: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Mise en oeuvre Syndication

• Solution : Lecture (Ex : en PHP) xml coté serveur – AVANTAGE : facile à coder– INCONVENIENT : Pb de performances

• à chaque page affichée, Aller/Retour serveur.

• Solution 2 : utiliser framework dédié– AVANTAGES

• Gestion Cache (performance). Pas d'A/R systématique• Paramétrage délais récupération infos serveur (Ex : 1h)

• Outil : MagPie – http://magpierss.sourceforge.net– PHP4 + support xml (expat)– PHP5 + support xml (libxml2)– Fichier config : rs_cache.inc (MAX_AGE, BASE_CACHE)– Classe FeedParser : récupération Flux RSS (XML) – IL nous suffit d'ajouter notre fichier PHP spécifique au Flux

84

Page 85: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Syndication avec MagPierss

http://www.clubic.com/xml/news.xml

85

Page 86: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Syndication avec MagPierss

86

Page 87: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Syndication avec MagPierss

87

Page 88: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Services Web

–Problématique : interopérabilité–XML sur HTTP–Protocole SOAP–Interface WSDL–Framework nuSOAP

88

Page 89: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Services web

• Solution apportée aux contraintes des architectures actuelles. Besoin d'interopérabilité

• EXEMPLE : Concevoir un service qui sera accessible :

–depuis un programme C tournant sur un serveur Linux, –depuis un programme J2ME tournant sur un téléphone portable

–depuis n'importe quel navigateur Internet, voilà le défi que le service Web relève.

• Le protocole SOAP (Simple Object Access Protocol), utilise XML et transmet des informations sur le réseau via HTTP. 89

Page 90: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Architecture

Liens utiles :

http://www.w3.org/TR/wsdl

http://www.xmethods.net90

Page 91: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Services web

• Définition :– Tout service sur le web– Applications méttant en oeuvre technos

• REST , XML-RPC, SOAP– Application avec

• interfaces WSDL + Annuaire UDDI

• 2 groupes – Services web 'Lourd' : XML-RPC , SOAP

• Fonctionne depuis 10 ans.• Possibilité transport http, jms, smtp…

– Services web 'Léger' : REST• Récent, uniquement http (GET, POST, DELETE…)• Ex : http://www.monappli/listemployes/1

91

Page 92: Programmation Ajax/web2.0  - Formation AJAX/web2 1

WSDL

• Le savoir-faire du service web est décrit via une interface : fichier WSDL (Web Service Definition Language)

• fichier WSDL = fichier XML . Plusieurs parties

–<!-- partie 1 : Definitions -->–<!-- partie 2 : Types-->–<!-- partie 3 : Message -->–<!-- partie 4 : Port Type -->–<!-- partie 5 : Operation -->–<!-- partie 6 : Binding -->–<!-- partie 7 : Service --> 92

Page 93: Programmation Ajax/web2.0  - Formation AJAX/web2 1

WSDL

• Definitions : contient des informations sur la constitution du fichier WSDL

• Types : regroupe les définitions des types de données (tableau, Objet...)

• Message : élément utilisé pour la constitution d'une opération, composé de :– nom du message– nom du (ou des) paramètre(s)– type du (ou des) paramètre(s)

• Port Type : ensemble des opérations du Web-Service

• Operation : méthode du Web-Service, elle peut être composée de deux parties :

– input : Message d'invoquation de la méthode– output : Message de retour de la méthode

• Binding : définit le format des messages ainsi que des détails sur lesopérations et les messages

• Service : Regroupe les différents Ports ainsi que la définition du service

• Port : point de sortie de l'application (on définit ici l'URL du serveur SOAP

93

Page 94: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Exemple WSDL

94

Page 95: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Création de services web

• Etape 1 : Création de l'interface WSDL

• Etape 2 : Création du serveur

• Etape 3 : Création du client

• Plusieurs langages : PHP5, JAVA...

• Exemple de mise en oeuvre :• http://jp-clair.developpez.com/articles/Java/J2ME/webServices

95

Page 96: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Exemple Serveur SOAP PHP5

96

ww.php.net/soapww.php.net/soap

Page 97: Programmation Ajax/web2.0  - Formation AJAX/web2 1

Exemple Client Soap PHP5

97

ww.php.net/soapww.php.net/soap

Page 98: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Autres Formations Objis

Développement EXTJS

Développement GWT

Développement J2EE

Initiation Objet / JAVA

Développement JAVA / XML

Architecture J2E

Architecture SOA

Intégration continue ...

98www.objis.com - Formation AJAX/web2

Page 99: Programmation Ajax/web2.0  - Formation AJAX/web2 1

www.objis.com - Formation SPRING

Douglas MBIANDOU

responsable formations Objis

Tél : 06 60 46 76 45

www.objis.com

Contact

www.objis.com - Formation AJAX/web2 99