Developpé dans le cadre de: - Unité d'Ensseignement: DEVELOPPEMENT WEB ET MULTIMEDIA 2 comportant: Matière(1): Programmation Web2 Matière(2): Atelier Développement Webet Multimédia II Pour les étudiants de la la licenece en Technologies de l’Informatique (TI) - TC-Semestre 2 Par: Mohamed Mhamdi- Iset de Sousse(Tunisie)

1. UE: DEVELOPPEMENT WEB
ET MULTIMEDIA 2
(1)Programmation Web2
(2)Atelier Développement Web
et Multimédia II
Technologies de l’Informatique (TI)
TC-Semestre 2
Mohamed Mhamdi
Iset de Sousse(Tunisie)

2. Plan du cours

3. Les ateliers

4. Programmation Web2 (les
fondamentaux)
Mohamed Mhamdi
Iset de Sousse

5. page web statique - page web
dynamique
• Une page web statique est une page web dont le
contenu ne varie pas en fonction des
caractéristiques de la demande, c'est-à-dire qu'à
un moment donné tous les internautes qui
demandent la page reçoivent le même contenu.
• À l'inverse, une page web dynamique est générée
à la demande et son contenu varie en fonction
des caractéristiques de la demande (heure,
adresse IP de l'ordinateur du demandeur,
formulaire rempli par le demandeur, etc.) qui ne
sont connues qu'au moment de sa consultation.

6. Mode de communication Client-
serveur
(Ce mode permet d’expliquer le dynS vs dynC )
• La signification d’une page dynamique ne peut
s’expliquer que dans le contexte d’une communication
client-serveur
• environnement client-serveur= un mode de
communication à travers un réseau entre
plusieurs programmes ou logiciels.
– l'un, qualifié de client, envoie des requêtes.
– l'autre ou les autres, qualifiés de serveurs, attendent les
requêtes des clients et y répondent(réponse!!!!).
– Plusieurs types de serveurs:
• un serveur de données à communiquer des données stockées dans une base de données
• un serveur de fichiers permet de stocker et consulter des fichiers sur le réseau
• un serveur de messagerie électronique envoie des mails à des clients de messagerie ;
• un serveur web publie des pages web demandées par des navigateurs web ;

7. réponse à la requête et type du
dynamisme
• Une page dynamique contient forcement une
réponse à une requête émanée du client:
– En cas où la réponse est générée par le serveur on
parle alors d’une page dynamique coté serveur
– En cas où la réponse est générée par le client on
parle du dynamisme coté client

8. Serveur Web
Structure
• Composition d’un serveur Web:
– Un daemon HTTP + virtual host(protocole HTTP):
écoute+analyse+extraction+envoi réponse
– Autres composants Système (moteur de rendu+
moteur de script) : vérification de l’existence d’un
script+ exécution du script+génération de la page
web dynamique;
– Pages Web Statiques (HTML+CSS)
– Pages Web
Dynamiques(HTML+CSS+Scripts+autres ..)

9. Serveur Web
La structure Interne d’un serveur Web(1)

10. Serveur Web
Moteur de rendu(2)
Avec un rendu côté client:
• votre demande initiale
(Get) charge la mise en page
(HTML), le code CSS et code
JavaScript de la page HTML.
• Mais tout ou partie du
contenu ne sera pas inclus.
• Au lieu de cela, le JavaScript
fait une autre demande,
obtient une réponse
(probablement en XML ou
JSON), et génère le code
HTML approprié.
Avec un rendu côté serveur, la
demande initiale charge:
-La mise en page,
- le code CSS,
-le contenu de la pages.
Rendering coté client ou serveur ?
La décision architecturale la plus importante
À prendre pour votre projet! Tendance:Hybride

11. Rendu du serveur suite à la demande
d’une page web(1)
• Les différents cas:
– ScriptServ+html: (rendu=html)
– ScriptServ+ScriptCli+Html: (rendu=ScriptCli+html)
– ScriptServ+Applet+Html: (rendu=Applet+html)
– Applet + Html: (rendu=Applet+html)
– ScriptCli+html: (rendu=ScriptCli+html)
– ScriptCli+applet+HTML:
(rendu=ScriptCli+applet+html)

12. Rendu du serveur suite à la demande
d’une page web(2)
Certains langages permettent de développer à la fois les aspects client et
serveur. C'est le cas d'Ocsigen, de Hop ou bien encore du Server-Side
JavaScript.

13. Rendu du serveur suite à la demande
d’une page web(3)

14. Dynamisme coté serveur vs coté client
• À l'inverse, une page
web dynamique est
générée à la demande
et son contenu varie en
fonction des
caractéristiques de la
demande
• on utilise des langages
qui offrent la possibilité
de réagir à certaines
actions de l'utilisateur
sans avoir à questionner
le serveur

15. Technologies pour pages Web
dynamiques(1)
(1)Comme il Il y a des langages pour la programmation des
pages web statiques qui sont Les langages de balisage
(HTML, XHTML,XML)
(2)Il ya d’autres qui sont fait pour la programmation des pages
dynamiques
(3)En réalité il ne s’agit pas uniquement des langages mais de
technologies
• Ce type de Technologies est utilisé pour une plus grande
interaction entre un client et un serveur
• Nous allons tracer un bref aperçu de différentes
technologies possibles dans la programmation dynamique
côté client ou côté serveur.

16. Langages pour pages Web
dynamiques(2)
• Insertion d'objets
– Images ( gifs animés.)
– Multimédia (son ou vidéo)
– Animation Flash (animations dans
un format vectoriel propriétaire +ActionScript(1))
– Applet Java (appliquette)
– ActiveX (applications développée par Microsoft.)

17. Partie2: Programmation web
côté client

18. Programmation web côté client
• Côté client (en général le navigateur web): on
utilise des langages qui offrent la possibilité de
réagir à certaines actions de l'utilisateur:
– En exploitant la puissance de traitement locale du
client (eclatement au niveau du traitement)
– sans avoir à questionner le serveur.(parfois)

19. Les technologies de programmation
Web dynamique côté client
• Les technologies natives aux navigateurs
– HTML5 : le langage client du Web
– CSS 3 pour la présentation
– JavaScript et Framework JavaScript pour
l'interactivité
• Les technologies à base de plugins
– Applet Java
– Contrôle ActiveX
– Flash

20. Scripts vs Applets(1)
Code source Java Byte code (.class)
0: iconst_2
1: istore_1
2: iload_1
3: sipush 1000
6: if_icmpge 44
9: iconst_2
10: istore_2
11: iload_2
12: iload_1
13: if_icmpge 31
16: iload_1
17: iload_2
18: irem
19: ifne 25
22: goto 38
25: iinc 2, 1
28: goto 11
31: getstatic #84; // Field java/lang/System.out:Ljava/io/PrintStream;
34: iload_1
35: invokevirtual #85; // Method java/io/PrintStream.println:(I)V
38: iinc 1, 1
41: goto 2
44: return
outer:
for (int i = 2; i < 1000; i++)
{
for (int j = 2; j < i; j++)
{
if (i % j == 0)
continue outer; }
System.out.println (i);
}

21. Scripts vs Applets(2)
(1)Intaller java
(2) Activer javaplugin dans le
browser: appel du panneau
de configuration java
demarrer/programme/java/c
onfiguration java/
securité/activer le contenu
java dans le navigateur
(3) Autoriser l’execution des
applets java:
Chrome/paramètres/plug-
ins/ autoriser tout le contenu
du plug-in

22. Scripts vs Applets(3)
<html>
<!–- COMP519 js03.html 11.10.14 -->
<head>
<title>Folding Puzzle</title>
</head>
<body>
<script type="text/javascript">
var distanceToSun = 93.3e6*5280*12;
var thickness = .002;
var foldCount = 0;
while (thickness < distanceToSun) {
thickness *= 2;
foldCount++;
}
document.write("<p>Number of folds = " +
foldCount+"</p>");
</script>
</body>
</html>
(1) Autoriser l’execution
des applets java:
Chrome/paramètres/java
script/ autoriser tous les
sites à exécuter
JavaScript

23. Scripts vs Applets(4)

24. Insertion du code JavaScript
dans une page HTML(1)
• La mise en page en utilisant HTML a la
tendance d’être assez statique.
• on peut ajouter du comportement
dynamique à une page en écrivant un code
JavaScript.
• Il ya plusieurs façons afin de pouvoir inclure
du JavaScript dans une page Web,
• La majorité utilisent toutes la balise <script>
(sauf une).

25. Insertion du code JavaScript
dans une page HTML(2)

26. Insertion du code JavaScript
dans une page HTML(3)
• Méthode1:
• Ecrire le code JavaScript dans la page en tant
qu’une partie du contenu d'un élément
<script>.
<script type="text/javascript">
alert('I am a line of JavaScript');
</script>

27. Insertion du code JavaScript
dans une page HTML(4)

28. Insertion du code JavaScript
dans une page HTML(5)

29. Insertion du code JavaScript
dans une page HTML(6)

30. Insertion du code JavaScript
dans une page HTML(7)
• Méthode2:
• Enregistrer le JavaScript dans un fichier séparé et
le référencé en utilisant l’attribut src de l’élément
<script>.
• <script type="text/javascript"
src="alertme.js"></script>
• <script type="text/javascript"
src="http://ajax.contoso.com/ajax/jQuery/jquery-
1.7.2.js">
</script>

31. La balise <script>
• La balise <script> possède trois attributs:
– L’attribut type, qui identifie le langage script à
utiliser; (la valeur par défaut est: text/javascript).
– L’attribut src qui identifie le fichier script à
télécharger(on doit pas l’utiliser en cas ou le scripy
fait partie du contenu de la balise <script>).
– L’attribut charset, qui identifie le type d’ encodage
(for example, utf-8, Shift-JIS) du fichier script
externe; (dans le cas ou src n’est pas utilisé l’attribut
charset ne doit pas être utilisé).

32. La balise <noscript>
• Parfois pour des raisons de
sécurité la fonctionnalité
JavaScript est désactivée
• Dans ce cas n’importe quelle
partie de la page web utilisant
JavaScript ne pourra pas
s’executer correctement
• On peut alerter alors l’utilisateur
à propos de ce cas en utilisant la
balise <noscript>.
• Cet élément permet au browser
d’afficher un message demandant
l’activation du JavaScript afin que
la page soit exécutées
correctement.
<body>
<noscript>This page
uses JavaScript. Please
enable it in your
browser</noscript>
…
Rest of page
…
<script
src="MyScripts.js"></sc
ript>
</body>

33. Les Sorties en JavaScript
• JavaScript ne dispose pas de fonctions d'impression ou
d'affichage qui sont intégrées (on utilise les API DOM, Console
etc.):
• JavaScript peut réaliser la fonction d'affichage" de différentes
façons:
– L'écriture dans une boîte d'alerte, en utilisant window.alert ().
– L'écriture dans le fichier HTML en utilisant document.write ().
– L'écriture dans un élément HTML, en utilisant innerHTML.
– L'écriture dans la console du navigateur, en utilisant console.log ().

34. Affichage1-Utilisation de window.alert ()
• On peut utiliser une
boîte d'alerte pour
afficher des données:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.alert(5 + 6);
</script>
</body>
</html>

35. Affichage2-Utilisation de Document.write()
• Exemple 1:
À des fins de test, il est
commode d'utiliser:
document.write ():
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

36. Affichage3-Utilisation de Document.write ()
• Exemple2:
L’utilisation de
Document.write ()
après un chargement
tout-entier d’un
document HTML,
va supprimer tous les
éléments
HTML existants de la
page:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="document.write(5 +
6)">Try it</button>
</body>
</html>

37. Affichage4-Utilisation console.log ()
• Dans le navigateur, on
peut utiliser la méthode
console.log () pour
afficher des données.
• On doit activer le console
du navigateur :
– On appui sur la touche F12,
– et sélectionne "Console"
dans le menu.
!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

38. Les kits de développement et leur
console
• Aujourd'hui, chaque navigateur possède un kit de
développement.
• Ces kits nous permettent de déboguer
efficacement nos codes, que ce soit pour:
– détecter des erreurs syntaxiques,
– afficher un grand nombre de valeurs dans la console,
– consulter le code HTML généré par du code,
– analyser des requêtes HTTP (entre autres) effectuées
par le navigateur,
– mesurer les performances du code,
– et bien d'autres choses encore !

39. Les kits de développement et leur
console
• Bien, à quoi ressemble un kit de développement (Chrome 34)?
• Pour ouvrir le kit de développement, appuyez sur la touche F12

40. signalisation des erreurs syntaxiques
• Créons un code syntaxiquement faux :
• // Ici nous créons une fonction JavaScript, avec
quelques erreurs de syntaxe.
functin test() {
alert('Hello !');
• Et incluons-le dans notre code HTML :
• <script>
functin test() {
alert('Hello !');
test();
• </script>

41. signalisation des erreurs syntaxiques
• affichez cette page dans votre navigateur et allez consulter la console,
vous devriez voir l'erreur suivante affichée :
• le terme SyntaxError qui mentionne une erreur syntaxique,
• le texte qui suit n'est qu'une indication sur ce qui a bien pu provoquer
cette erreur,
• À droite de ce texte, vous pouvez voir le nom du fichier concerné ainsi que
la ligne de code,
• vous pouvez cliquer dessus et votre navigateur vous amènera directement
sur la ligne qui pose problème.

42. signalisation des erreurs syntaxiques
• Tout simplement parce que l'interpréteur JavaScript
s'arrête sur la première erreur rencontrée.
• Essayez de rectifier l'erreur actuellement indiquée, vous
verrez que le navigateur vous affichera alors l'erreur
suivante sur Chrome : « Uncaught SyntaxError: Unexpected
end of input ».

43. Try et catch de JavaScript: pour la
gestion des erreurs
• L‘instruction Try permet
de définir un bloc de
code qui doit être testé
en ce qui concerne lors
de son exécution.
• L’instruction catch
permet de définir un
bloc de code à exécuter,
en cas où une erreur se
produit dans le bloc try.
<!DOCTYPE html>
<html>
<body>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.write(err.message);
}
</script>
</body>
</html>