Bases du developpement d’applications Web

(1)

ELEMENTS DE BASE DU DEVELOPEMENT DE L’APLICATION

WEB

Maissa Mbaye

(2)

Avant-propos

L’Université virtuelle africaine (UVA) est fière de participer à l’accès croissant à l’éducation dans les pays africains grâce à la production de matériaux d’apprentissage de qualité.

Nous sommes également fiers de contribuer à la connaissance globale car nos ressources éducatives ouvertes sont principalement accessibles depuis le continent africain.

Ce module a été développé dans le cadre d’un programme de diplôme et d’études en informatique appliquée, en collaboration avec 18 institutions partenaires africaines de 16 pays. Au total, 156 modules ont été développés ou traduits pour assurer la disponibilité en anglais, en français et en portugais. Ces modules ont également été mis à disposition en tant que ressources éducatives ouvertes (OER) sur oer.avu.org.

Au nom de l’Université virtuelle africaine et de notre patron, nos institutions partenaires, la Banque africaine de développement, je vous invite à utiliser ce module dans votre institution, pour votre propre éducation, à le partager aussi largement que possible et à participer activement à l’AVU Communautés de pratique de votre intérêt. Nous nous sommes engagés à être en première ligne de développement et de partage de ressources éducatives ouvertes.

L’université virtuelle africaine (UVA) est une organisation intergouvernementale panafricain créée par une charte qui a pour mandat d’augmenter considérablement l’accès à une éducation et à une formation supérieures de qualité grâce à l’utilisation innovante des technologies de communication d’information. Une charte établissant l’UVA en tant

qu’organisation intergouvernementale a été signée à ce jour par dix-neuf (19) gouvernements africains - Kenya, Sénégal, Mauritanie, Mali, Côte d’Ivoire, Tanzanie, Mozambique,

République démocratique du Congo, Bénin, Ghana, République de Guinée, Burkina Faso, Niger, Soudan du Sud, Soudan, Gambie, Guinée-Bissau, Éthiopie et Cap-Vert.

Les institutions suivantes ont participé au Programme des sciences informatiques appliquées:

(1) Université d’Abomey Calavi au Bénin; (2) Université de Ougagadougou au Burkina Faso;

(3) Université Lumière de Bujumbura au Burundi; (4) Université de Douala au Cameroun;

(5) Université de Nouakchott en Mauritanie; (6) Université Gaston Berger au Sénégal; (7) Université des Sciences, Techniques et Technologies de Bamako au Mali (8) Institut de gestion et d’administration publique du Ghana; (9) Université Kwame Nkrumah de Science et Technologie au Ghana; (10) L’Université Kenyatta au Kenya; (11) Egerton University au Kenya;

(12) Université d’Addis-Abeba en Ethiopie (13) Université du Rwanda; (14) Université de Dar es-Salaam en Tanzanie; (15) Université Abdou Moumouni de Niamey au Niger; (16) Université Cheikh Anta Diop au Sénégal; (17) Université Pedagógica au Mozambique; Et (18) L’Université de Gambie en Gambie.

Bakary Diallo Le Recteur

Université virtuelle africaine

(3)

Crédits de production

Auteur

Maissa Mbaye

Pair Réviseur

Bamba Gueye

UVA – Coordination Académique

Dr. Marilena Cabral

Coordinateur global Sciences Informatiques Apliquées

Prof Tim Mwololo Waema

Coordinateur du module

Victor Odumuyiwa

Concepteurs pédagogiques

Elizabeth Mbasu Benta Ochola Diana Tuel

Equipe Média

Sidney McGregor Michal Abigael Koyier

Barry Savala Mercy Tabi Ojwang

Edwin Kiprono Josiah Mutsogu

Kelvin Muriithi Kefa Murimi

Victor Oluoch Otieno Gerisson Mulongo

(4)

Droits d’auteur

Ce document est publié dans les conditions de la Creative Commons Http://fr.wikipedia.org/wiki/Creative_Commons

Attribution http://creativecommons.org/licenses/by/2.5/

Le gabarit est copyright African Virtual University sous licence Creative Commons Attribution- ShareAlike 4.0 International License. CC-BY, SA

Supporté par

Projet Multinational II de l’UVA financé par la Banque africaine de développement.

(5)

Avant-propos 2

Crédits de production 3

Droits d’auteur 4

Aperçu du cours 9

Bienvenue au cours Principes fondamentaux des technologies web et de la programmation

Internet . . . . 9

Prérequis . . . . 9

Matériaux . . . . 9

Objectifs du cours . . . . 10

Unités . . . . 10

Unité 0: Évaluation des connaissances prérequis 10 Unité 1: Fondements de l’Internet et du World Wide Web 10 Unité 2: Conception de pages Web avec HTML5 10 Unité 3: Le langage CSS 10 Unité 4: Programmation Web coté Client avec le langage JavaScript 11 Unité 5: Programmation Web côté serveur 11 Unité 6: Hébergement de site Web 11 Évaluation . . . . 11

Unité 0 . . . . 17

Unité 1 . . . . 17

Unité 2 . . . . 17

Unité 3 . . . . 18

Unité 4 . . . . 18

Unité 5 . . . . 18

Unité 6 . . . . 19

Unité 0. Évaluation diagnostique 20

Introduction à l’unité . . . . 20

Objectifs de l’unité . . . . 20

(6)

Évaluation . . . . 21

Unité 1. Fondements du World Wide Web et d’Internet 27

Introduction à l’unité . . . . 27 Objectifs de l’unité . . . . 27 Activité 1.1 - [Lecture] Internet et le WWW (perspective historique) 28 Conclusion . . . . 33 Évaluation . . . . 33 Activité 1.2 Le modèle de communication du Web : Client/Serveur 36 Évaluation . . . . 40 Conclusion . . . . 40 Activité 3 – Les contenus du Web : URL et les ressources 43 Conclusion . . . . 50 Évaluation . . . . 50 Activité 4 – Le protocole du Web (HTTP) et les langages du Web 51 Conclusion . . . . 56 Évaluation . . . . 57 Évaluation de l’unité 1 . . . . 66

Unité 2. Conception de pages Web avec HTML5 68

Introduction à l’unité . . . . 68 Objectifs de l’unité . . . . 69 Activité 1 – Préparation de l’environnement de développement 69 Conclusion . . . . 72

Activité 2 – Syntaxe de base de HTML5 73

Évaluation . . . . 73 Activité 3 – Structure de base d’un document HTML5 80 Activité 4 – Balises de mise en forme de texte 88 Activité 5 – Les balises de création de liens<a>, listes<ol><ul>… 99

Activité 6 – Les tableaux sous HTML5 113

Activité 7 – Structuration sémantique d’une page Web HTML

<section><article><header><footer><nav><aside><adress> 122

(7)

Unité 3. Le langage CSS3 148

Introduction à l’unité . . . 148 Objectifs de l’unité . . . . 149

Activité 1 – Coder avec HTML5/CSS3 149

Activité 2 – Base de la syntaxe CSS3 et Sélecteurs CSS3 162 Activité 4 – Mise en forme de quelques éléments HTML5 avec CSS3 194 Activité 5 – Création de Template HTML5/CSS3 215 Conclusion . . . 230 Évaluation de l’unité . . . .231

Unité 4 Programmation Web coté client avec JavaScript 234

Introduction à l’unité 234

Activité 1 – Fondamentaux de JavaScript 235

Activité 2 – Eléments du langage JavaScript 245 Activité 3 – Programmation de pages Web Interactives avec JavaScript 263 Évaluation de l’unité . . . 275

Unité 5. Programmation Web coté serveur PHP 278

Introduction à l’unité . . . 278 Objectifs de l’unité . . . . 278 Activité 1 Bases de la programmation en PHP 281

Activité 2 – Variables PHP 292

Activité 3 – Variables de type tableaux et chaines de caractères 302

Activité 4 – Structures de contrôles 318

Activité 5 – Fonctions PHP 336

Activité 6– Gestion des formulaires sous PHP 345 Conclusion . . . .351 Activité 7 – Manipulation des bases de données MySQL 355

Conclusion 372

(8)

Évaluation de l’unité . . . 374

Unité 6. Hébergement de site Web 376

Introduction à l’unité . . . 376

Introduction aux noms de domaines . . . .377

Évaluation de l’unité 6 . . . 398

(9)

Aperçu du cours

Bienvenue au cours Principes fondamentaux des technologies web et de la programmation Internet

Ce cours traite de la programmation Web. Il permet d’acquérir des compétences dans les différentes catégories de langages du Web afin de concevoir, développer et déployer des applications Web modernes.

Ce module est très important car le Web est, de nos jours, au centre de l’économie numérique depuis son invention remplaçant petit à petit les applications Bureaux(Client- Serveur). Avoir des compétences en développement Web est incontournable pour trouver du travail en tant qu’informaticien et est un grand atout pour ce dernier.

Prérequis

Les prérequis de ce module sont de trois ordres :

Une bonne connaissance de l’utilisation des systèmes d’exploitation. Avant de faire ce module vous devez avoir au moins utilisé un système d’exploitation Windows, ou Linux ou autre. Vous devez connaitre les notions de répertoire, de fichiers dans le contexte des systèmes d’exploitation. Ce module suppose que vous savez installer un logiciel dans votre système d’exploitation, même si les étapes sont parfois décrites.

Aussi, vous devez connaitre les bases de la programmation et déjà avoir une bonne idée des notions de base que sont : les variables, l’affectation, les boucles, les structures de contrôle conditionnelles (if, else), les fonctions. La connaissance d’un langage orienté objet est un plus.

Enfin, ce module suppose que vous savez utiliser le moteur de recherche de Google. La connaissance d’un éditeur de texte est un plus pour ce module. Il est toutefois possible d’apprendre l’usage d’un éditeur durant le déroulement du cours.

Ces quelques modules disponibles dans les cours de l’UVA vous permettent d’acquérir ces différents prérequis :

• Principes de la programmation

• Introduction à la programmation structurée

• Introduction à la programmation orientée objet

Matériaux

Les matériaux nécessaires pour compléter ce cours comprennent:

(10)

• Un ordinateur sur lequel est installé un système d’exploitation Windows, Linux ou MAC.

• Une connexion Internet

Objectifs du cours

Objectif global : L’objectif général de ce cours est de permettre à l’étudiant d’acquérir les compétences nécessaires pour concevoir, développer et déployer une application Web moderne et utilisable dans les entreprises.

Objectifs spécifiques : Après ce cours, l’étudiant doit pouvoir :

• Démontrer une bonne connaissance des technologies de base du Web et de l’architecture trois tiers pour le développement d’applications Web dynamique

• Développer une application Web interactive avec JavaScript

• Développer des applications sécurisées et à moindre couts en utilisant les scripts coté serveur

Unités

Unité 0: Évaluation des connaissances prérequis

Cette unité a pour objectif de permettre à l’apprenant d’évaluer sa connaissance par rapport aux prérequis.

Unité 1: Fondements de l’Internet et du World Wide Web

Ce chapitre vous permettra de connaitre tous les concepts et les technologies qui sont en jeu pour le bon fonctionnement du World Wide Web.

Unité 2: Conception de pages Web avec HTML5

Ce chapitre a pour objectif de vous permettre de savoir structurer le contenu d’une page Web. Vous pourrez créer des éléments du langage HTML5 de base tels que des hyperliens, des images, des tableaux et des formulaires.

Unité 3: Le langage CSS

Cette partie traite de la réalisation de la couche présentation d’une page Web avec CSS3.

CSS (Cascading Style Sheet : Feuilles de Style en Cascade) est un langage qui permet de personnaliser l’affichage d’un site Web.

(11)

Unité 4: Programmation Web coté Client avec le langage JavaScript

Cette partie traite de JavaScript qui est un langage de script permettant de programmer le comportement des pages Web. Il permet la manipulation de la structure de la page Web en ajoutant ou retirant du code HTML ou bien en modifiant l’apparence des éléments de la page à travers CSS.

Unité 5: Programmation Web côté serveur

Ce chapitre vise à vous aider à comprendre et développer des applications Web dynamiques avec des langages de programmation côté serveur. PHP (Personal Home Page) est utilisé comme un exemple en raison de sa popularité.

Unité 6: Hébergement de site Web

Ce chapitre a pour objectif de vous permettre comprendre étape par étape le déploiement d’une application Web. Ces étapes comprennent : l’achat de nom de domaine, le choix d’un hébergeur, l’utilisation du CPANNEL, le transfert des fichiers, le test de l’application.

Évaluation

Les évaluations formatives (vérification de progrès) sont incluses dans chaque unité. Les évaluations sommatives (tests et travaux finaux) sont fournies à la fin de chaque module et traitent des connaissances et compétences du module. Les évaluations sommatives sont gérées à la discrétion de l’établissement qui offre le cours. Le plan d’évaluation proposé est le suivant:

Titre évaluation Note Commentaires

1 Evaluation/Examen de fin de module

(évaluation sommative)

50% Note sur 20 ou 100. Durée : au moins 3H00.

Cette évaluation peut être de préférence un projet pour évaluer les compétences en développement acquise.

2 Evaluation unité 1 (évaluations formatives)

5% Note sur 20 ou 100. Ils peuvent être des projets en ligne ou composés avec les évaluations données dans le cours.

(12)

3 Evaluation unité 2 (évaluations formatives)

10% Note sur 20 ou 100. Ils peuvent être des projets en ligne ou composés avec les évaluations données dans le cours 4 Evaluation unité 3

(évaluations formatives)

5% Note sur 20 ou 100. Ils peuvent être des projets en ligne ou composés avec les évaluations données dans le cours

Grille et barème de notation

Notes sur 100

Notes sur 20

Appréciation du résultat

90-100 18 ou Plus Excellent. Résultat largement au-dessus de la moyenne des étudiants.

80-89 [16-18[ Résultat au-delà des attentes. L’apprenant est allé au-delà des objectifs fixés par le cours

70-79 [14-16[ Résultat conforme à ce qui est attendu d’un étudiant moyen

60-69 [12-14[ Résultat acceptable mais certains objectifs de cours n’ont pas été atteints.

50-59 [10-12[ Passage conditionnel. Les objectifs ne sont que

partiellement atteints. Des activités de remédiations sont nécessaires pour mieux assimiler les cours et acquérir les compétences.

49 ou moins

Moins de 10

Echec. L’apprenant doit reprendre le module.

(13)

Planification des cours

Unité Sujets et Activités Durée

estimée Évaluation des

connaissances prérequis

Cette séance est réservée à la présentation du cours et de l’unité 0.

Après ce cours,

Les objectifs et les compétences du cours

Les prérequis

Le déroulement du cours Le contenu

les travaux à rendre et les délais de soumission et ainsi que le système de notation

Les différentes ressources disponibles sur le cours

Répartition du temps de travail Compréhension des objectifs du cours ainsi que les prérequis 2h00

Activités de l’unité 2h00,

Activités de remédiations, révision et lectures d’autres cours 2h00

6H00

(14)

Fondements de l’Internet du World Wide Web

Cette séance concerne le contenu de l’unité 1 du cours.

Lecture du contenu de l’unité 1 par les apprenants

Les apprenants doivent faire les activités d’apprentissage de l’unité 1

Répartition du temps de travail Lecture du cours 6h00

Activités du cours 8h00 Evaluation de l’unité 2h00

Recherche et consultation des liens supplémentaires 2h00

18H00

Conception de pages Web avec HTML5

Cette séance concerne le contenu de l’unité 2 du cours. Cette partie concerne HTML5

Lecture du contenu de la de l’unité 2 par les apprenants

18H00

(15)

Le langage CSS Cette séance concerne le contenu de l’unité 3. Cette partie concerne CSS3 Lecture du contenu de la l’unité 3 par les apprenants

18H00

Programmation Web coté Serveur avec le langage JavaScript

Cette séance concerne le contenu de l’unité 4. Cette partie concerne le langage JavaScript

18H00

(16)

Programmation Web côté serveur

Cette séance concerne le contenu de l’unité 5. Cette partie concerne PHP/

Mysql

24H00

Hébergement de site Web

Cette séance concerne le contenu de l’unité 6. Cette partie concerne l’hébergement Web.

16H00

Séance 9 Examen de fin de semestre 2h00

Lectures et autres ressources

Les lectures et autres ressources dans ce cours sont indiquées ci-dessous.

(17)

Unité 0

Lectures et autres ressources obligatoires:

Aucun

Lectures et autres ressources optionnelles:

• http://windows.microsoft.com/fr-fr/windows-8/files-folders-windows-explorer

• http://windows.microsoft.com/fr-fr/windows-8/copy-move-files

• http://informatiquedebase.e-monsite.com/pages/cours/utilisation-de-l- explorateur-windows.html

• http://openclassrooms.com/courses/debutez-en-informatique-avec-windows-7/

la-navigation-dans-windows-1

Unité 1

Aucun

• http://www.ethnoinformatique.fr/course/view.php?id=87

• http://www.w3schools.com/tags/ref_httpmessages.asp

• http://computer.howstuffworks.com/cgi3.htm

Unité 2

Aucun

• http://fr.wikiversity.org/wiki/Hypertext_Markup_Language

• https://developer.mozilla.org/fr/docs/Web/HTML/Introduction_to_HTML5

• http://www.html5-css3.fr/html5/introduction-html5

• http://www.w3schools.com/html/html5_intro.asp

• http://diveintohtml5.info/

• https://developer.mozilla.org/fr/docs/Web/HTML/Introduction_to_HTML5

• http://www.w3.org/TR/html5/introduction.html

(18)

Unité 3

Aucun

• https://developer.mozilla.org/fr/docs/Web/CSS

• http://openclassrooms.com/courses/

apprenez-a-creer-votre-site-web-avec-html5-et-css3

• http://www.w3schools.com/css/default.asp

• http://www.w3schools.com/html/html_layout.asp

Unité 4

Aucun

• https://developer.mozilla.org/fr/docs/Web/JavaScript

• http://javascript.about.com/od/reference/a/javascriptpurpose.htm

• http://www.quirksmode.org/book/

• http://www.w3schools.com/js/default.asp

• http://fr.wikiversity.org/wiki/JavaScript

Unité 5

Aucun

• http://www.developphp.com/list_php.php

• http://php.net/manual/fr/

• http://www.tutorialspoint.com/php/

(19)

Unité 6

Aucun

• http://www.thesitewizard.com/archive/registerdomain.shtml

• http://www.webhostingsecretrevealed.net/web-hosting-beginner-guide/

• http://www.siteground.com/tutorials/webhosting/choose_webhost.htm

(20)

Unité 0. Évaluation diagnostique

Introduction à l’unité

Cette unité vous permettra de vérifier les connaissances que vous devez avoir avant de commencer le cours. Vous pouvez faire l’évaluation de l’unité avant de faire des activités d’apprentissage pour aider à rafraîchir vos connaissances.

Objectifs de l’unité

À la fin de cette unité, vous devriez prouvez votre connaissance des prérequis:

• Réaliser les opérations de base sur un système d’exploitation (créer répertoire, créer fichier, naviguer dans le système de fichier)

• Démontrer votre connaissance des concepts de base de la programmation (Variables, affectation, boucle, structure conditionnelle)

• Démontrer votre capacité à rechercher des informations sur le Web en utilisant un moteur de recherche comme Google

TERMES DES

Les définitions suivantes sont sous Wikipédia.

[Système d’exploitation]: En informatique, un système d’exploitation (souvent appelé OS pour Operating System, le terme anglophone) est un ensemble de programmes qui dirige l’utilisation des capacités d’un ordinateur par des logiciels applicatifs1. Il reçoit de la part des logiciels applicatifs des demandes d’utilisation des capacités de l’ordinateur — capacité de stockage des mémoires et des disques durs, capacité de calcul du processeur, capacités de communication vers des périphériques ou via le réseau.

[Fichier]: En informatique, un fichier est une suite de données structurée (souvent sous la forme d’une liste d’enregistrements suivant un même format), portant un nom et codé sur un support. Un système de fichiers est la manière dont un ensemble de fichiers informatiques sont regroupés et rangés dans une partition d’un support. Le système de fichiers se présente généralement comme une structure arborescente de répertoires (ou dossiers) dont l’origine est appelée racine. Il est créé par une opération de formatage du support.

[Répertoire]: Un répertoire est, en informatique, un fichier spécial contenant les adresses d’autres fichiers. Les répertoires sont souvent représentés par des dossiers dans lesquels les autres fichiers sont inclus.

[Programmation]: La programmation dans le domaine informatique est

l’ensemble des activités qui permettent l’écriture des programmes informatiques.

(21)

Évaluation de l’unité Vérifiez votre compréhension!

Test d’auto-évaluation de connaissances 0.1 Connaissance des systèmes d’exploitation

Directives

Ce test est sous forme de questions et d’actions à réaliser pour évaluer votre bonne connaissance de l’utilisation des systèmes d’exploitation.

Il est constitué de 20 questions/actions.

Système de notation

Chaque bonne réponse ou action réalisée avec succès rapporte 5%. Le système de notation est décrit par le tableau suivant :

Note sur 100

Commentaire

[80,100] Succès

[0,79[ Echec. Nécessite une action de remédiation (lecture des liens supplémentaires).

Évaluation

Questions :

Expliquez avec vos propres termes le rôle d’un système d’exploitation Un système d’exploitation est :

Du matériel Du logiciel

Du matériel et du logiciel Ni du matériel, ni du logiciel

Lesquels des éléments de la liste suivante sont des systèmes d’exploitation ? Linux

Microsoft Word Windows Android

(22)

Microsoft Excel

Entre les fichiers ordinaires et les répertoires, lesquelles parmi ces affirmations sont vraies ?

C’est la même chose

Les fichiers ordinaires sont un sous type des répertoires

Les répertoires sont des fichiers pouvant contenir d’autres répertoires ou fichiers ordinaires

Les fichiers ordinaires sont l’opposé des fichiers texte

Les fichiers ordinaires peuvent contenir des données alors que les répertoires ne contiennent que des références vers des fichiers

Les répertoires permettent de classer des fichiers

Quel est le type de périphériques utilisé pour stocker les fichiers et répertoires ? Disque dur

Imprimante Souris Clavier

Quel est l’extension des fichiers textes ? .txt

.docx .pdf .wordpad

Comment afficher l’extension des fichiers sous Windows ?

Sur Linux, le nom des fichiers et répertoires sont-ils sensibles à la casse ? OUI

NON

Sur Windows 7 et 8, le nom des fichiers et répertoires sont-ils sensibles à la casse ? OUI

NON

Dans Windows est ce que c:\user\myfile.txt est la même chose que c:\User\myFile.txt

(23)

OUI NON

Quelle est le modèle d’organisation des fichiers et répertoires dans les systèmes d’exploitation Windows, Linux et MACOS ?

Tableau Arborescence Fichiers Répertoires

Pour naviguer dans les répertoires du système de fichier sous Windows, on utilise :

• L’explorateur

• Microsoft Word

• Le navigateur Chrome

Sur la capture suivante, quel est le chemin du répertoire ci ?

OS(C:)\Program Files\wamp\www\ci C:\Program Files\wamp\www\ci

Ordinateur\C:\Program Files\wamp\www\ci ci\www\wamp\ Program Files\C:\Ordinateur

Ouvrez l’explorateur de Windows en faisant bouton droit sur le menu démarrer puis cliquez sur ouvrir l’explorateur

Allez dans votre répertoire utilisateur sous Windows (Documents), puis créez la structure de répertoires et sous répertoires suivante :

(24)

Renommez le répertoire control en controles en faisant bouton droit, renommer

Quels sont les chemins absolus des différents répertoires si le répertoire utilisateur est C:\

Users\uva?

Répertoire Chemin Absolu

Source CSS IMG SCRIPTS MODELES VUES

CONTROLES

Créez un fichier texte en faisant bouton droit puis cliquez sur « créer nouveau » « Document texte » fichier.html

Ouvrez le fichier avec Le Bloc Note (NotePad) puis ajoutez du texte et sauvegardez ! Test d’auto-évaluation de connaissances 0.2 Bases de la programmation

(25)

Directives

Ce test permet d’évaluer votre connaissance en programmation.

Note sur 100 Commentaire

[80,100] Succès

Évaluation

Ecrire dans le langage de programmation que vous connaissez un programme qui affiche les triangles suivants :

*

**

***

****

*****

******

*

**

***

****

*****

******

*

**

***

*****

*******

********

Projet de recherche 0.3 Recherche sur le Web

Directives

Cet exercice est un projet permettant d’évaluer votre compétence en recherche Web.

(26)

Note sur 100 Commentaire

[80,100] Succès

Évaluation

En utilisant le Web, recherchez :

• Deux exemples de moteurs de recherches francophones autres que Google

• Le document de la proposition de Tim Berners-Lee par lequel il a créé le Web.

• La première page Web de l’histoire

• Les 50 sites web les plus populaires d’Afrique.

Lectures et autres ressources

Les lectures et ressources de cette unité sont se trouvent au niveau des lectures et autres ressources du cours.

Si vous n’avez pas réussi le test vous pouvez réviser en lisant les liens suivants comme remédiation :

• http://windows.microsoft.com/fr-fr/windows-8/files-folders-windows-explorer

• http://windows.microsoft.com/fr-fr/windows-8/copy-move-files

• http://informatiquedebase.e-monsite.com/pages/cours/utilisation-de-l- explorateur-windows.html

• http://openclassrooms.com/courses/debutez-en-informatique-avec-windows-7/

la-navigation-dans-windows-1

(27)

Unité 1. Fondements du World Wide Web et d’Internet

Introduction à l’unité

Ce chapitre a pour but de vous permettre de comprendre les bases du WWW ainsi que les différentes technologies en jeu pour le développement WEB.

Objectifs de l’unité

À la fin de cette unité, vous devriez être capable de:

• Décrire ce qu’est l’Internet et World Wide Web, les composants du Web (Le langage HTML, Le protocole HTTP, l’adressage des ressources avec les URL)

• Expliquer la différence entre les différents types de ressources Web (Page Statique, dynamique et Actives)

• Décrire l’architecture des applications Web (Modèle de communication Client Serveur, Architecture 3/3)

• De classifier les langages du Web.

• D’utiliser quelques outils offerts par les navigateurs pour donner un aperçu des quelques technologies du Web (Protocole HTTP, Code HTML, …)

TERMES DES

Internet: L’Internet est une collection de millions d’ordinateurs, tous reliés grâce à un réseau informatique. Le réseau permet à tous les ordinateurs de communiquer.

World Wide Web : Le World Wide Web (WWW), littéralement la « toile (d’araignée) mondiale », communément appelé le Web, et parfois la Toile, est un système hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites

Navigateur Web: Un navigateur Web, également appelé navigateur tout court, est un programme qui interprète et affiche les pages Web. Elle permet de visualiser et d’interagir avec une page Web.

Serveur Web: Un serveur Web est un serveur informatique utilisé pour publier des sites web sur Internet ou un intranet. L’expression « serveur Web » désigne également le logiciel utilisé sur le serveur pour exécuter les requêtes HTTP, le

protocole de communication employé sur le World Wide Web.

(28)

Langage HTML: Le langage HTML est un langage informatique qui permet de créer et structurer des pages Web. Toutes les pages Web sont faites de code HTML.

Protocole HTTP: L’HyperText Transfer Protocol, plus connu sous l’abréviation HTTP — littéralement « protocole de transfert hypertexte » — est un protocole de communication client-serveur développé pour le World Wide Web.

DNS: Domain Name System (DNS): Un service Internet qui traduit les noms de domaine en adresses IP.

URL: Le sigle URL (de l’anglais Uniform Resource Locator, littéralement « localisateur uniforme de ressource »), auquel se substitue informellement le terme adresse web, désigne une chaîne de caractères utilisée pour adresser les ressources du World Wide Web : document HTML, image, son, forum Usenet, boîte aux lettres électronique, entre autres.

Activités d’apprentissage

Activité 1.1 - [Lecture] Internet et le WWW (perspective historique)

Introduction

L’objectif de cette partie est de vous présenter la signification des principaux termes l’Internet ainsi que le World Wide Web.

Détails de l’activité L’Internet

L’Internet en des termes simples est un ensemble de réseaux informatiques interconnectés à travers le monde, qui est accessible au grand public. Parmi les réseaux interconnectés il y a ceux d’entreprises, de gouvernements, des universités et des maisons des individus.

Cette infrastructure que constitue Internet est utilisée dans plusieurs applications comme le transfert de fichiers, le chat en ligne, la consultation de site Web dans le World Wide Web.

Ces réseaux son reliés au niveau mondial par un ensemble de câble sous-marins qui couvrent quasiment tout le globe (Voir Figure 1).

(29)

Figure 1 Grand réseau de câbles sous-marins reliant les continents à Internet (http://www.

submarinecablemap.com/, 21 mars 2016)

La particularité de ce réseaux est que tous les ordinateurs qui y accèdent utilisent le même protocole IP (Internet Protocol) et des adresses IP pour les identifier. Sur Internet il y a deux catégories d’équipements : les équipements terminaux et les équipements intermédiaires.

Les équipements terminaux sont au bout des communications et les équipements intermédiaires s’occupent de l’acheminement des données à travers le réseau (Figure 2).

Figure 2 L’organisation des équipements dans Internet

Une classe d’équipements terminaux fournit les services (Web, Partage de Fichier, Base de données, Mailing) : les serveurs. Les serveurs sont de puissants ordinateurs sur lesquels sont installés des logiciels implémentant des services. Ces serveurs sont en général entreposés dans des centres de données (Datacenter) gérés par des fournisseurs de contenu comme Facebook, Skype avec Microsoft, Youtube ou Google.

(30)

Figure 3 Datacenter de Google (http://www.google.com/about/datacenters/)

La seconde classe d’équipements terminaux sont directement utilisés par les internautes pour accéder aux services du réseau Internet. Ces équipements peuvent être des ordinateurs, des tablettes, des smartphones, ainsi que tous les équipements que vous utilisez au jour le jour lorsque que vous accédez à un service d’Internet.

Les équipements intermédiaires sont les commutateurs, les routeurs, les modems, … Ces équipements sont gérés en général pas les fournisseurs d’accès Internet (FAI) ou opérateur de télécommunication. Pour vous connecter à Internet à partir de chez vous, vous êtes raccordé au réseau de votre fournisseur d’accès Internet grâce à un modem qui est lui raccordé au grand réseau International grâce aux câbles sous-marins.

Figure 4 Les différentes parties d’Internet Le World Wide Web

Le World Wide Web ou W3 est le service d’Internet qui permet d’accéder à l’ensemble des sites Web publiques du monde. C’est le service qui permet d’accéder à Facebook, Google, Youtube, … Contrairement à l’usage commun,

(31)

le Web est différent de l’Internet : le premier est un service qui permet d’accéder aux sites et le second est l’infrastructure qui permet de déployer un tel service. Skype est un exemple de service d’Internet qui permet de téléphoner sur Internet et qui est donc différent du service World Wide Web.

Le World Wide Web avait pour objectif initialement de permettre l’accès à des documents sous forme de texte reliés les uns aux autres grâce aux liens hypertextuelles. Les

fonctionnalités se limitaient simplement à de l’affichage des documents texte et le passage de l’un à l’autre à l’aide des liens. Les sites Webs étaient sous les propriétés d’organisations qui décident du contenu des sites Web. Par la suite, la popularité du Web a fait que les technologies se sont tellement enrichies que les pages Webs actuels n’ont rien à voir avec les toutes premières pages du Web. Il y a beaucoup plus d’interactivité dans les pages Web avec des images, du son, de la vidéo. Les sites webs sont devenus des applications Webs.

Aussi, dans le Web moderne, les utilisateurs sont au centre de la création du contenu : sur youtube, les utilisateurs déposent du contenu, sur facebook les utilisateurs remplissent leurs profils et alimentent les discussions. On parle du Web 2.0 où les programmeurs donnent aux internautes les moyens de créer du contenu sur le Web.

Figure 5 Le site Web de Yahoo en 1995! (src http://blog.crazyegg.com/2012/02/17/90s-websites/)

(32)

Figure 6 Le site Web de CNN en 1996 (source http://blog.crazyegg.com/2012/02/17/90s-websites/)

De nos jours, le web est dominé par quelques grands sites Web qui sont les plus utilisés et qui sont détenus par de grandes multinationales1 :

• Google. L’acteur le plus important.

• Facebook du réseau social

• Youtube.com

• Yahoo.com

• Baidu.com

• Amazon.com

• Wikipedia.org

• Taobao.com

• Twitter.com

• Qq.com

• De la même manière que le Web est devenu une valeur marchande au cœur de l’économie, ces acteurs sont parmi les plus importants du monde moderne.

Sur le plan architectural, le Web est composée de quatre grands blocs fonctionnels :

• Le modèle de communication client-serveur défini le rôle des nœuds dans le service en deux catégories : les serveurs et les clients.

• Le langage de structuration du contenu HTML accompagné d’un langage de mise en forme (CSS) et un langage de gestion du comportement de la page (JavaScript)

Source http://www.alexa.com/topsites

(33)

• Les URLs pour l’adressage des ressources du Web

• Le protocole HTTP pour la transmission des données

• La Figure 7 montre l’interaction entre ces différents éléments

Figure 7 Architecture du World Wide Web

Conclusion

Cette activité vous a présenté l’Internet qui est un réseau mondial et le WWW qui est le service le plus populaire d’Internet.

Après cette activité vous devez pouvoir décrire l’Internet et son fonctionnement et son organisation générale. Vous devez pouvoir définir ce qu’est le Web et décrire son architecture et ses composants.

Évaluation

Questions d’auto-évaluation:

Définissez ce qu’est Internet

Listez les différentes catégories d’équipements sur Internet Expliquez le rôle des serveurs

Donnez comment appelles-t-on les endroits où sont stockés les serveurs ? Expliquez comment est-ce que les continents sont interconnectés.

(34)

Donnez cinq exemples d’équipements terminaux Définissez ce qu’est le World Wide Web

Quels sont les éléments qui composent l’architecture du Web

Exercice de recherche.

Recherchez à l’aide de Google des images des Datacenter de Microsoft et OVH (un grand hébergeur de site Web).

Rechercher sur le Web les 10 activités les plus populaires sur Internet Cherchez la part de marché des Web

Trouvez une page Web qui parle de l’histoire d’Internet Qui est l’inventeur du World Wide Web ? En quelle année ? Quel est le nombre d’internaute en Afrique ?

Localisation d’un serveur/site Web

Le but de cet exercice est d’apprendre à afficher le pays dans lequel se trouve un serveur Web.

Ouvrez avec votre navigateur le site Web2 http://www.ipligence.com/geolocation Dans le champ « find » entrez l’adresse du site web www.uva.org

Vous pouvez faire la même chose avec ce site http://check-host.net/

(35)

Figure 8 Localisation du site de l’UVA

En déduire le pays où se trouve le serveur qui héberge le site Web de l’UVA ?

Faites la même chose pour le site Web www.ugb.sn et www.maroc.ma

Domaines d’application du Web

L’objectif de cette activité est de vous prendre conscience de l’importance que les technologies Web ont prises dans la vie de l’humanité.

Action 1 : Faites un petit rapport de 4 pages au plus expliquant la relation entre l’e-commerce et le WWW.

Action 2 : Trouvez 10 domaines d’activités qui dépendent directement du WWW.

Domaine d’activité Description brève de l’utilisation du WEB

(36)

Action 3 : Trouvez 4 profils professionnels qui sont liés au WEB

Profil professionnel Description brève

Activité 1.2 Le modèle de communication du Web : Client/Serveur

Introduction

Dans cette partie, nous allons voir le modèle de communication du Web et les ressources du Web. Après cette partie vous comprendrez quels sont les éléments qui interviennent dans le World Wide Web et les catégories de ressources sur le Web.

Détails de l’activité

Le modèle de communication client Serveur.

Le service Web fonctionne selon le modèle de communication du Web client/serveur, c’est à dire que tous les objets qui implantent le service WWW jouent soit le rôle de serveur, soit le rôle de client. Dans ce modèle, les serveurs sont les fournisseurs de service (Web) et les clients sont les consommateurs de ce service. Pour consommer le service Web le client envoie une requête au serveur pour accéder aux ressources du Web. Le serveur Web quant à lui héberge les ressources auxquels les clients peuvent accéder (Figure 9) à travers des requêtes.

Figure 9 Modèle de communication du Web : Client/serveur

Dans ce modèle de communication, un client peut accéder à des ressources qui se trouvent sur différents serveurs et un serveur web peut traiter de multiplies requêtes venant de clients différents. Le premier cas arrive lorsque vous ouvrez plusieurs onglets pour ouvrir différentes pages Web.

(37)

Ces pages peuvent se trouver à différents endroits différents du globe (voir Figure 10).

Figure 10 Relations entre clients et serveur

Les serveurs Web.

Un serveur Web est un logiciel qui gère des ressources qui sont accessibles via le protocole HTTP. Ces ressources peuvent être des fichiers de n’importe quel type (Page Web, Image, Vidéo, Logiciel, …), stockés sur le système de fichier de la machine qui héberge le serveur ou bien des informations calculées. Par abus de langage, la machine qui héberge le serveur Web est aussi appelé Serveur Web. Le fonctionnement d’un serveur Web peut être décrit trois étapes (Figure 11):

Etape 1 : Attendre une requête HTTP

Etape 2 : [à l’arrivé d’une requête] Localiser la ressource lorsqu’elle est stockée ou la calculer lorsqu’elle doit l’être.

Etape 3 : Répondre à la requête en envoyant la ressource demandée ou une erreur. Retourner à l’étape 1

Ces étapes sont répétées indéfiniment pour répondre aux requêtes des clients WEB.

Figure 11 Fonctionnement d’un serveur Web

(38)

L’implémentation du protocole HTTP est l’élément le plus important dans les fonctionnalités d’un serveur Web. Ceci à tel point que le terme Serveur HTTP est rigoureusement équivalent à serveur WEB. Le serveur Web n’interprète pas les ressources qu’il gère (il n’affiche pas de page ou de vidéos), il se contente de fournir le service d’accès à ces ressources. L’autre aspect important des serveurs Web est qu’ils n’ont pas d’interaction directe avec les êtres humains. Les internautes ont besoin d’utiliser un client capable de récupérer des ressources sur le serveur Web.

Le marché des serveurs WEB est dominé par quatre logiciels :

• Apache2 : Le serveur Web le plus déployé d’Internet. Environ 60% des sites Web tourne sous Apache2. Il est sous licence Apache, c’est-à-dire utilisable quasiment sans contraintes de propriété.

• Microsoft IIS : Le serveur Web de Microsoft. Il est surtout utilisé pour les applications basées sur les technologies Microsoft tel qu’ASP.NET

• NGINX : Ce serveur prend de plus en plus de place et prétend améliorer les performances par rapport à Apache2

• Google WebServer : Il s’agit d’un serveur Web basé sur Apache2 et qui a été modifié par les ingénieurs de Google pour leurs besoins. Ces modifications n’ont jamais été divulguées.

Les navigateurs Web.

Le client Web est un logiciel capable de récupérer des ressources sur les serveurs Web en émettant des requêtes HTTP. Historiquement le premières ressources du Web et qui font succès sont les pages WEB car ils sont des documents interconnectés les uns aux autres avec des liens hypertextuels. Un navigateur Web est un client Web qui est capable d’afficher les pages Web et permet à l’utilisateur d’aller d’une page à l’autre en cliquant sur les liens hypertextuels. Le rôle d’un navigateur est donc double : récupération des ressources et affichage des pages Web. Ils existent aussi des clients Web qui ne sont pas des navigateurs WEB, ils sont surtout utilisés entre logiciels lorsque la seule fonctionnalité Web intéressante est l’accès aux ressources.

Dans le cadre du développement Web, sans précision, le client Web correspond au

navigateur. La Figure 12 illustre de manière simplifiée l’architecture d’un navigateur WEB. Elle est composée :

d’un moteur HTTP permettant d’interagir avec le serveur Web afin de récupérer les ressources. C’est ce moteur qui construit les requêtes HTTP et traite les réponses.

Les interpréteurs HTML, CSS, JavaScript permettant d’afficher la page Web correctement et exécuter le code source JavaScript qui accompagne la page. Les pages Web modernes de 2014 sont en général constituées d’une page HTML, un fichier CSS qui l’accompagne, des images et d’autres médias. Le rôle des interpréteurs aussi est de d’identifier et de récupérer toutes ces ressources annexes à la page WEB pour son affichage correct.

(39)

Les plugins : Ils permettent d’exécuter correctement des pages Web dynamique qui sont basés sur du code binaire (voir la section sur les types de pages Web). Les plugins les plus utilisés sont Flash Macromedia Player, Java et SilverLight

Les protocoles : Dans l’absolu, l’implémentation de protocoles autres que HTTP n’est pas obligatoire. Toutefois, la force des choses a fait que beaucoup de liens à des ressources sur le Web sont accessible via des protocoles autres que HTTP. Notamment le protocole FTP sert beaucoup à la distribution de logiciels. Les éditeurs de navigateurs n’ont fait que s’adapter à cette situation.

Figure 12 Architecture d’un navigateur Web

Le marché des navigateurs est très disputé par les principaux navigateurs : Internet Explorer, Firefox, Google Chrome, Opéra,Safari… La conséquence de cette diversification des navigateurs sur les développeurs est qu’ils doivent tester leur application sur au moins ces navigateurs pour s’assurer d’une compatibilité.

Figure 13 Navigateurs Web les plus populaires en 2014

(40)

Conclusion

Cette activité présente le modèle de communication du Web (client / serveur) ainsi que les composants logiciels du Web que sont les serveurs et les clients. Pour faire du développement Web, comprendre ces aspects est indispensable car ces éléments font partie de l’environnement de développement et de déploiement.

Évaluation

Questions :

Expliquez le modèle de communication du WWW ?

Quel est le rôle du langage HTML dans l’architecture du WEB ?

Quel est le rôle d’un langage comme PHP et ASP.NET dans l’architecture du WEB ? Quel rôle jour un navigateur dans l’architecture Web ?

Décrivez le fonctionnement d’un serveur Web Citez cinq navigateurs Web

Décrivez brièvement l’architecture d’un navigateur Web.

Matiching

Faites le matching entre les éléments à gauche et à droite.

HTTP Un programme qui s’exécute sur votre ordinateur pour afficher les fichiers accessibles sur le web

Serveur Le protocole principal du Web

Internet ordinateurs qui hébergent les fichiers qui composent le web Navigateur Web Le plus grand réseau informatique du monde

Installation navigateur

Si ce n’est pas déjà fait, téléchargez et installer les navigateurs Google Chrome ou Chromium et Firefox.

(41)

Installer un serveur Web local avec LAMP Introduction

L’environnement développement WEB est l’ensemble des outils qui vous permettre d’écrire votre code afin d’obtenir une application WEB. Dans ce lab vous apprendrez à installer un environnement local sur votre machine vous permettant d’ecrire des applications HTML/

PHP/MySQL. Cet environnement s’appelle : Windows Apache MySQL PHP (WAMP) ou Linux Apache MySQL PHP (LAMP)

Détails de l’activité Action 1 :

Lisez les pages suivantes et répondez aux questions suivantes :

• http://fr.wikipedia.org/wiki/WAMP

• http://fr.wikipedia.org/wiki/LAMP

Dans quel systèmes d’exploitations respectifs peuvent être installés LAMP et WAMP ? A quoi servent les environnements WAMP et LAMP ?

Quels sont paquets inclus dans les environnements LAMP/WAMP ?

Quel est le langage de programmation coté serveur qui est concerné dans l’environnement LAMP/WAMP ?

Action 2 : Téléchargement et installation de WAMP

Etape 1 : Allez sur le site Web http://sourceforge.net/projects/wampserver/files/

WampServer%202/ pour télécharger La dernière version de Wampserver qui correspond à votre architecture (32bit, 64bits).

(42)

Figure 14 Site de téléchargement de Wamperver

Quelles sont les versions des logiciels suivants qui sont installées ? Apache

MySQL PHP

PHPMyAdmin

(43)

Web 2.0

Recherchez et faites un rapport d’une page au plus pour présenter les principaux concepts du Web 2.0.

Activité 3 – Les contenus du Web : URL et les ressources

Introduction

Le World Wide Web contient principalement des pages Web qui contiennent à leur tour des liens vers d’autres ressources. Les URLs sont le type d’adressage utilisé pour localiser et d’accéder aux ressources du Web.

Cette partie a pour objectif de présenter les URL et les classes de pages Web en fonction de comment elles sont créées et mis à jour.

L’adressage des ressources Web : URL

Le web donne accès à des ressources qui peuvent être des pages Web, des images, des vidéos, des fichiers PDF, Excel… Toutefois, les pages Web sont le principal type de document du Web et sont écrits en HTML. Les URLs sont des noms standard pour les ressources

d’Internet en général dont les ressources du Web en particulier. Ils indiquent la localisation de ces ressources(le serveur qui les contient) ainsi que la manière d’interagir avec eux pour les récupérer(le protocole standard). Ce sont des adresses qui permettent de localiser de manière unique chaque ressource disponible sur le Web. Même si ça parait compliqué dit comme cela, vous avez certainement déjà utilisé des URLs quand vous mettez dans la barre d’adresse d’un navigateur (Figure 15).

Figure 15 URL dans la barre d’adresses de Google Chrome

Cette URL est composée de plusieurs parties en réalité. La Figure 16 montre les différentes parties de l’URL <http://www.avu.org:80/Services/content-development.html>. Cette URL indique que pour récupérer la page web (la ressource) content-development.html, il faut interroger le serveur qui a le nom de domaine www.avu.org sur son port 80 (WWW) en utilisant le protocole HTTP. A partir du répertoire contenant les pages Web sur le disque, il faut entrer dans le répertoire Services pour trouver la page demandée.

(44)

Figure 16 Anatomie d’une URL

De manière plus générale, la syntaxe simplifiée des URLs est la suivante :

:<port>/<chemin>;<parametres>?<requete>#<etiquette>

Pour expliquer ces différents champs plus en détail, nous allons partir d’une analogie.

Supposons qu’une personne habitant en dehors du Sénégal souhaite consulter des documents à la bibliothèque de l’université Gaston Berger de Saint-Louis sur l’agriculture dans la vallée du fleuve Sénégal. Cette personne doit se poser au moins trois questions :

• Où est la bibliothèque de l’université Gaston Berger de Saint-Louis ?

• Comment y aller ?

• Quels sont les documents dont j’ai besoin ?

• Le champ <protocole> indique le protocole à utiliser pour accéder aux données.

Ce champs donne l’information du comment accéder à cette ressource indiquée dans l’URL. HTTP, HTTPS, FTP, MAILTO, … sont quelques exemples de

protocoles. Dans la situation de la personne de l’analogie cela correspondrait à se demander quel est le moyen de transport à utiliser pour aller vers les documents qu’elle souhaite consulter : Avion? Trains ? Voiture ?

• Le champ <serveur> indique le nom de domaine du serveur ou son adresse IP3. Ce champ indique où trouver la ressource, le serveur qui contient les données voulues. Le champ <port> donne plus de précision sur le service qui gère les données sur le serveur. Le numéro de port 80 est le service http, 443 pour le service HTTPS alors que le 21 correspond au protocole FTP. Dans notre analogie, ce champ correspondrait au pays dans lequel se trouve la bibliothèque en question et le numéro de port correspond à l’université Gaston Berger de Saint-Louis qui est l’institution qui gère le service. Le numéro de port est souvent occulté lorsque ce sont les ports standard, c’est-à-dire 80 pour HTTP, 443 pour HTTPS et 21 pour FTP.

L’adresse IP d’une machine est un identifiant unique dans le réseau

(45)

• Les URLs http://www.google.fr et http://www.google.fr:80/ donnent exactement le même résultat dans la pratique car le port standard est utilisé. La même chose est valable entre https://www.google.fr/ et https://www.google.fr:443/. Le serveur peut être indiqué dans certains cas avec une adresse IP comme dans http://127.0.0.1/.

• Le <chemin> indique, quel est la ressource locale au serveur récupérer. Il indique le document, le fichier, ou autres informations utiles au serveur pour retrouver localement la ressource de demandée. Les autres champs sont des précisions apportées pour filtrer le contenu que l’on souhaite récupérer de la ressource.

Dans notre analogie, le chemin correspond au titre d’un document et les autres paramètres peuvent correspondre à l’année d’édition, le nom de l’auteur, le type de document (mémoire, livre, …), …

Un exemple complet ici pour l’URL de login de yahoo.fr

https://login.yahoo.com/?.src=ym&.intl=fr&.lang=fr-FR&.done=http://mail.yahoo.com Un développeur Web va beaucoup manipuler des URLs dans son code, pour référencer des images, créer des liens, récupérer des données par programmation. Il est donc important de connaitre les principes de base des URLs.

Les sites Web peuvent être ainsi définis en fonction des URL comme un ensemble de ressources sur le WEB dont les URLs ont la même valeur dans les champs

<protocole>://<serveur>:<port>/. En d’autres termes un site Web est un répertoire contenant des ressources électroniques dans un serveur Web.

Les classes de pages Web

En fonction de la manière dont les pages Web sont créés, mises à jour et leur interactivité, il y a principalement deux catégories de pages Web : les pages Web statiques et les pages Web dynamiques.

Les pages web statiques ont un contenu et une mise en forme fixés (codé en dur en HTML) au moment de leur création. L’apparence et le contenu de ce type de pages reste le même pour tous les clients et à tout moment. Pour modifier la page, le développeur Web doit éditer le code source de la page qui va avoir la même apparence et contenu pour tous les clients.

Elles ont l’avantage d’être simples, sécurisées (aucun échange de données avec l’utilisateur) et très facilement visibles des moteurs de recherche (URL fixe). La Figure 17 décrit le transfert d’une page statique par un navigateur. Lorsque le client demande la page qui est stocké dans un fichier sur disque, le serveur web la retrouve et envoie son contenu au serveur.

(46)

Figure 17 Principe des pages statiques

Les langages qui sont en jeu dans les pages web statiques ne servent qu’à structurer ou mettre en forme le contenu de la page c’est à dire mettre un texte en Gras, Souligné, Italique, changer la Couleur du texte ou du fond, organiser les éléments avec des tableaux, justification du texte, agencement et position des objets de la page web. A titre d’exemple nous avons : HTML, (X)HTML, CSS, XML. Ces langages ne sont pas des langages de programmation mais des langages de balisage4.

Les pages Web dynamiques quant à elles adaptent leur contenu ou apparence selon les interactions avec les utilisateurs, les évolutions des données fournies par l’application. Il y a deux sous-catégories de pages Web dynamiques selon là où leur contenu dynamique est généré : page dynamique coté serveur et page dynamique coté client.

Dans le cas des pages web dynamique coté client, du code binaire ou interprété est exécuté sur le client Web(Navigateur). Aucune interaction avec le serveur n’est nécessaire pour exécuter la page5. On trouve aussi dans la littérature l’appellation de page active pour cette classe de page.

L’exécution d’un code binaire sur un navigateur est décrite par la Figure 18. Le navigateur demande la ressource au serveur qui lui renvoie, nom pas une page Web mais un code binaire exécutable. Sur le navigateur contient un environnement sous forme de pluggin (ou machine virtuelle) exécute ce code pour produire le service demandé. A titre d’exemple de pluggins nous pouvons citer la JVM qui permet d’exécuter un programme Java (appelé Applet) directement sur le navigateur, Adobé Macromedia Flash Player qui exécuter du code Flash ActionScript et enfin Microsoft SilverLight. Les pages web de Youtube utilisent le pluggin Macromedia Flash Player pour télécharger le lecteur de vidéo avant de l’exécuter (jouer), même s’ils tendent à migrer vers le lecteur vidéo HTML5. Ces types de pages sont de moins en moins utilisée avec le développement de bibliothèques JavaScript et HTML5/CSS3 offrant quasiment les mêmes fonctionnalités.

http://infospace.ischool.syr.edu/2012/04/05/why-html-is-not-a-programming-language/

(47)

Figure 18 Principe des pages actives avec du code binaire

La réalisation de page Web dynamique, avec du code interprété, est réalisé avec le langage JavaScript. Tous les navigateurs modernes savent interpréter le langage JavaScript qui permet de manipuler contenu de la page web pour avoir de l’animation, des effets … On retrouve dans la littérature aussi l’appellation de DHTML ou dynamic HTML pour ce type de page Web. La création de page Web dynamique avec du JavaScript est décrite sur la Figure 19. Lorsque le navigateur demande une ressource au serveur, il lui envoie la page HTML

contenant le code source JavaScript prêt à être exécuté sur les objets de la page Web.

Figure 19 Page Web active avec code JavaScript interprétée par le navigateur

Les pages Web dynamiques coté serveur peuvent être réalisées en utilisant les scripts CGI ou les scripts coté serveur.

Les scripts CGI (Common Gateway Interface), comme leur nom l’indique sont des

interfaces pour permettre d’exécuter un programme écrit dans les langages classiques (C/

(48)

C++, Python, Perl, Pascal, Bash, …)6 pour produire du contenu pour le Web (RFC 3875)7.

Une des caractéristiques de l’interface CGI est d’être indépendante de tout langage de programmation. Le principe des CGI est décrit par la Figure 20. Lorsque le navigateur demande une ressource CGI, le serveur Web exécute le programme correspondant, récupère sa sortie (ce que le programme aurait affiché sur le terminal) puis retourne le contenu généré au client. La technologie FastCGI permet d’améliorer les performances des scripts CGI en maitrisant le nombre de processus créé par le serveur Web lors d’un accès à du ressource CGI.

Figure 20 Principe des pages dynamiques avec CGI

Dans ce cas de figure, le serveur Web et le programme exécuté sont différents. Un des avantages des scripts CGI est de permettre de continuer à utiliser les langages classiques qui sont soit très rapides (Langage C) ou disposant de fonctionnalités intéressantes (Perl avec les expressions régulières). Toutefois, si la page en question doit afficher beaucoup de texte, il peut y avoir certaines difficultés d’échappement avec des langages comme le C. Voici un exemple de page Web CGI affichant « Hello world ! »

#include <stdio.h>

int main() {

printf(“Content-type: text/html\n\n”);

printf(“<html>\n”);

printf(“<body>\n”);

printf(“<h1>Hello World!</h1>\n”);

printf(“</body>\n”);

printf(“</html>\n”);

return 0;

}

Les langages les plus populaires pour les CGI sont Perl et C, Python http://www.ht http://www.ietf.org/rfc/rfc3875.txt

(49)

Si cette page devait contenir du JavaScript et CSS, jusqu’à 99% du code peut être constitué de « printf » pour afficher du HTML et très peu d’instructions du langage C.

Les scripts cotés serveurs, ont une approche contraire des CGI, plutôt que d’avoir un programme qui affiche du code HTML, nous avons une page HTML qui contient les instructions d’un programme dans un langage comme PHP, ASP, JSP, … Il y a ensuite un programme s’exécutant comme le ferait un script CGI qui est chargé d’interpréter et d’exécuter les instructions qui sont contenu dans les pages Web. Cette page web contenant des instructions est appelé script coté serveur (car exécuté sur le serveur). Le serveur web à chaque fois qu’il reçoit une requête vers une ressource qui est un script va exécuter le programme correspondant en lui passant comme argument le script ainsi que les données transmises par l’utilisateur (Figure 21).

Figure 21 Principe des pages dynamiques avec script coté serveur

La Figure 22 est une taxonomie qui résume les différentes classes de pages Web.

Figure 22 Taxonomie des classes de pages Web

(50)

Conclusion

Cette partie présente les ressources qui sont disponibles sur le Web et la manière d’y accéder.

La ressource principale est la page Web qui permet à travers des liens contenant des URL d’acceder à d’autres ressources diversifiées.

Évaluation

Questions :

Quel est le principal type de document du Web HTML

Fichiers vidéo Youtube PDF

Fichier Microsoft Excel

Donnez quelques exemples de fichiers qu’on peut télécharger sur le Web Expliquez la structure d’une URLs

Parmi ces exemples, lesquels ne sont pas des URL ? http://www.bidon.net

ftp://abc.bidon.com [email protected] bidon.zip

mailto:[email protected]

Quelle partie de l’URL permet de spécifier le serveur où se trouve une ressource ? Expliquez la différence entre page statique et page Wed dynamique ?

Lister les types de pages WEB

Expliquez les catégories de langages du Web

Groupez les liens suivants en fonction du site Web (même partie serveur de l’URL) http://fr.wikipedia.org/wiki/Afrique

http://de.wikipedia.org/wiki/Digitales_Fernsehen

http://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Bac_%C3%A0_sable http://en.wikipedia.org/wiki/Digital_television

http://www.ieee.org/publications_standards/publications/authors/author_templates.html

(51)

Page statique, page dynamique.

Expliquez à l’aide d’un schéma le principe des pages Web actives Expliquez à l’aide d’un schéma le principe des pages Web dynamiques Expliquez à l’aide d’un schéma le principe des pages Web statiques Listez trois langages qui interviennent dans une page Web Statiques ?

Activité 4 – Le protocole du Web (HTTP) et les langages du Web

Le protocole du WEB : HTTP

Le protocole HTTP (Hypertext Transfer Protocol) permet le transport les ressources du WEB.

Les clients (Navigateurs) accèdent aux ressources des serveurs en leur envoyant des requêtes HTTP et le serveur Web répondent en émettant des réponses HTTP. (voir Figure 23).

Figure 23 Le protocole HTTP dans l’architecture du Web

Les requêtes contiennent l’URL de la ressource sollicitée, la méthode HTTP8 ainsi que d’autres informations telles que le nom du navigateur ainsi que sa langue. Une requête HTTP ressemble à celui du listing suivant généré par le navigateur Google Chrome:

• GET /Services/content-development.html HTTP/1.1

• Host: www.avu.org

Nous reviendrons dans la partie HTML sur les méthodes de HTTP

(52)

• Connection: keep-alive

• Pragma: no-cache

• Cache-Control: no-cache

• Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/

webp,*/*;q=0.8

• User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36

• Accept-Encoding: gzip,deflate,sdch

• Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

Sur la première ligne nous avons l’a méthode GET, l’URL ainsi que la version de HTTP, ici 1.1.

Les méthodes HTTP permettent au client d’indiquer au serveur comment il doit traiter les données.

La méthode GET permet de récupérer une ressource grâce à son URL. Lorsque cette ressource correspond à des données qui sont le résultat d’un traitement, des paramètres au format texte peuvent leur être envoyés en les mettant sur le l’URL. La méthode GET est utilisée pour récupérer du contenu statique ou bien pour envoyer des données de type texte(ASCII) issues d’un formulaire vers une page dynamique en les mettant directement dans l’URL (Voir exemple sur la Figure 24). La limitation de la longueur des URLs à 2048 caractères est une limitation pour cette méthode qui ne peut pas être utilisé, par exemple, pour envoyer des pièces jointes d’une certaine taille.

Figure 24 Requête GET mettant les données sur l’URL

La méthode POST permet d’envoyer des données à traiter à une page dynamique coté serveur. Elle permet d’envoyer n’importe quelle type de données (binaire en particulier) sans limitation de taille. La méthode POST est surtout utilisée pour transférer des données du client vers le serveur mais aussi pour transférer des données binaires ou sensibles9 du serveur vers le client. Les principaux désavantages sont : les données ne peuvent être mises dans les favoris du navigateur, elles ne sont pas non plus dans l’historique du navigateur (le bouton précèdent va renvoyer une nouvelle requête).

Il existe d’autres méthodes HTTP mais qui sont très peu utilisées car, soit ils posent des problèmes de sécurité (PUT, DELETE), soit ce sont des méthodes de test du fonctionnement du serveur WEB (HEAD, OPTIONS, CONNECT). Le navigateur Web construit les requêtes http avec les URLs tapé par le client, c’est ce qui simplifie la navigation sur le Web sans avoir besoin de connaitre l’existence de protocole.

POST est un peu, vraiment un peu, plus sécurisé que GET.