M2-EC10-ACREDITE (2013-2014) 1 / 22

M2-ACREDITE

M2- EC10 : Technologies du web Auteur : Laurent Jeannin

Version : 1 Date : Novembre 2013

Table de matières :

TABLE DE MATIERES : .................................................................................................................................... 1

INTRODUCTION ................................................................................................................................................ 2

POINT DE VUE HISTORIQUE ET CULTUREL ............................................................................................ 3 LE RESEAU.......................................................................................................................................................................... 3 LA COMMUNICATION ENTRE MACHINES ....................................................................................................................... 7 L’INFORMATION ................................................................................................................................................................ 9 LE SUPPORT A L’INFORMATION .................................................................................................................................... 10 LE LANGAGE ..................................................................................................................................................................... 11 EXEMPLE DE MISE EN ŒUVRE EN LOCAL D’UN CMS ................................................................................................. 13 COMMUNIQUER ............................................................................................................................................................... 15 HISTOIRE DE L’INTERNET .............................................................................................................................................. 16 HISTOIRE DE L’INFORMATIQUE .................................................................................................................................... 16 TECHNOLOGIES WEB : HISTOIRE ET FONCTIONNEMENT ......................................................................................... 16

LES LANGAGES : HTML ................................................................................................................................. 17

LES SCRIPTS .................................................................................................................................................... 17

SITUATION PROBLEME N°1 : ..................................................................................................................... 17

LES SYSTEMES DE GESTION DE CONTENU : CMS ................................................................................ 18

SITUATION PROBLÈME N°2 ....................................................................................................................... 18

LMS : LEARNING MANAGEMENT SYSTEM ............................................................................................. 19

SITUATION PROBLEME N°3 : ..................................................................................................................... 20

SITUATION PROBLEME N°4 : ..................................................................................................................... 22

M2-EC10-ACREDITE (2013-2014) 2 / 22

Introduction

M2-EC10-ACREDITE (2013-2014) 3 / 22

Point de vue historique et culturel

Pour initier cet enseignement, nous faisons un rappel historique en deux points : Histoire d’Internet (source Wikipédia, consulté le 21 Novembre 2013) :

http://fr.wikipedia.org/wiki/Histoire_d'Internet Histoire de l‘informatique (source Wikipédia, consulté le 21 Novembre 2013) :

http://fr.wikipedia.org/wiki/Histoire_de_l%27informatique

Le réseau

L’idée d’avoir un réseau de communication militaire capable de résister à une attaque nucléaire est initiée en 1962 par l’US Air Force. En 1964, Paul Baran le conceptualise par les mouvements dynamiques de données. Il est considéré aujourd’hui comme un des acteurs principaux de la création d’Internet. En août 1969, et sans objectif militaire au départ, naît le réseau ARPANET (Advanced Research Projects Agency Network), issu des travaux de plusieurs chercheurs visant à relier entre eux quatre instituts universitaires. Il est considéré aujourd’hui comme étant le précurseur du réseau Internet et possède déjà certaines caractéristiques du réseau actuel :

un ou plusieurs nœuds du réseau peuvent être détruits sans perturber le fonctionnement de l’ensemble ;

la communication entre les machines ne se fait pas à l’aide d’une machine centralisée ;

les protocoles de communication utilisés sont basiques.

En 1971 apparaît le courrier électronique, élaboré par Ray Tomlinson et amélioré par Lawrence G. Roberts en 1972. Cette même année, Bob Kahn travaille sur les bases d’un nouveau protocole baptisé TCP qu’il bâtit avec Vinton Cerf à partir de 1973. En 1976, le protocole TCP est déployé sur le réseau ARPANET, composé alors de 111 machines reliées entre elles. En 1978, ce protocole est scindé en deux : TCP et IP (ce qui, par la suite, deviendra TCP/IP.) D’une certaine manière, il représente aujourd’hui l’ensemble des règles de communications sur Internet et se fonde sur la notion d’adressage unique IP à chaque machine pour l’acheminement des paquets de données. Enfin, en 1980, Tim Berners-Lee, un chercheur au CERN de Genève, met au point un système de navigation hypertexte et développe, avec l’aide de Robert Cailliau, un logiciel baptisé Enquire® permettant de naviguer selon ce principe. Fin 1990, ce même Tim Berners-Lee met au point le protocole Http (Hyper Text Transfer Protocol), ainsi que le langage html (HyperText Markup Language) permettant de naviguer, à l’aide des liens hypertextes, à travers les réseaux. Internet tel que nous le connaissons aujourd’hui est né.

La connexion au réseau ne se résume donc pas à la connectivité physique entre des machines, mais fait également appel à des protocoles différents en fonction des outils utilisés : http(s), ftp(s), smtp et pop, ces derniers étant pour vos clients de messagerie : Outlook®, Windows Mail®, Mail OSX®, IRC : dialogue en direct par Chat ou clavardage. Il est donc important de connaître les procédures pour se connecter ou se déconnecter, mais également leurs caractéristiques :

les différents types de réseau et les protocoles ;

la connexion et la déconnexion au réseau ;

le paramétrage de la connexion au réseau.

M2-EC10-ACREDITE (2013-2014) 4 / 22

Depuis juillet 2007 en France, tous les centraux téléphoniques disposent d’au moins un dispositif capable de délivrer l’ADSL à des abonnés. Cela ne signifie pas, pour autant, que toutes les lignes raccordées sont éligibles à l’ADSL. Les internautes résidant en zone blanche sont toujours contraints de surfer en bas débit (56 Kbits) ou de s’abonner à Internet par satellite.

Les principales technologies permettant d’avoir le haut débit sont :

la fibre optique ;

le câble ;

le satellite ;

la DSL, asymétrique (ADSL) ou autres (xDSL) ;

le WIMAX ;

les courants porteurs en ligne.

Les caractéristiques techniques de chacune de ces technologies, tels que les flux montants et descendants ou les modes de diffusion : réseaux téléphonique et électrique, ne seront pas détaillées ici. Seul ce qui permet la connexion sera traité.

Figure 1 : Connexion à Internet

Pour se connecter à Internet, les ordinateurs disposent d’une ou plusieurs cartes réseau dont la fonction est de préparer, envoyer et contrôler les données sur le réseau. Chaque carte dispose d’une adresse unique, appelée « adresse MAC », affectée par le constructeur de la carte. Il existe aujourd’hui deux types de cartes réseau :

Ethernet utilisant un câble dont chaque extrémité est pourvue de prises RJ45. Les trois standards Ethernet (norme 802.3) correspondent aux trois débits les plus courants :

M2-EC10-ACREDITE (2013-2014) 5 / 22

– 10Base-T permettant un débit maximal de 10 Mbit/s pour une distance de 100 m ;

– 100Base-TX pour un débit théorique maximal de 100 Mbit/s pour une distance de 100 m ;

– 1000Base-T pour 1 000 Mbits/s ou Gigabit Ethernet pour une distance de 100 m ;

Wifi (Wireless Fidelity) ou WLAN (Wireless Local Area Network), dont les normes ont évolué, visant à augmenter la portée et la vitesse des échanges :

– 802.11b avec un débit théorique pouvant atteindre 11 Mbit/s (6 Mbit/s en effectif) pour une portée maximale sans encombrement de 300 m, se réduisant à quelques mètres à l’intérieur ;

– 802.11g pour un débit théorique maximal de 54 Mbit/s (25 Mbit/s en réel). Le matériel compatible 802.11g est compatible 802.11b, mais pas l’inverse.

– 802.11n (finalisée en 2008) avec un débit théorique de 600 Mbit/s ( 100 Mbit/s en réel pour une portée de 90 m).

La fibre optique dispose de nouvelles normes Ethernet permettant d’atteindre de plus grandes distances de propagation de l’information.

En résumé, un ordinateur comme un smartphone disposent d’un couple unique :

l’adresse MAC de la carte réseau :

– sous Windows® : ouvrez une fenêtre MS-DOS et tapez ipconfig/all. L’adresse MAC est l’adresse physique.

– sous OSX® : dans le menu Préférences système/Réseau en fonction de la carte : Airport® ou Ethernet.

– sous Linux® : dans le shell, tapez ifconfig. L’adresse MAC est HWADDR.

l’adresse IP, composée de quatre nombres entiers entre 0 et 255, notée sous la forme xxx.xxx.xxx.xxx. Un ensemble constitué des nombres de gauche désigne le réseau (ID de réseau), les nombres de droite désignant les ordinateurs (ID d’hôte).

La consultation des pages d’un site Internet fonctionne sur une architecture client/serveur. Un ordinateur est connecté comme un client à un serveur contenant une couche applicative (système d’exploitation et applications) pour délivrer les pages demandées. Pour communiquer avec ce serveur, vous indiquez dans votre navigateur une adresse URL (Uniform Ressource Locator) contenant cinq parties :

le nom du protocole : http, https, ftp ou ftps ;

un identifiant et un mot de passe permettant d’accéder à un serveur sécurisé ;

le nom du serveur ou nom de domaine. Notez ici qu’il est possible d’utiliser l’adresse IP du serveur, par exemple : http://xxx.xxx.xxx.xxx ;

le numéro de port : numéro associé à un service, par exemple 80 pour http, 21 pour ftp ;

un chemin d’accès spécifique.

Tableau 1 : Structure d’une URL

M2-EC10-ACREDITE (2013-2014) 6 / 22

Protocole Mot de passe (facultatif)

Nom de domaine Port (facultatif)

Chemin

http:// user:password www.u-cergy.fr :80 fr/formations/schema-des-formations/M/SHS/f03-109.html

Toutes les palettes de caractères ne peuvent être utilisées pour écrire une URL. Il y a une grammaire ( « / » spécifie un sous-répertoire et fait appel à l’arborescence interne du site Internet ; « & » et « ? » servent à envoyer des données qui concernent des formulaires) et un codage, une transcription des caractères spéciaux : tabulation équivaut à %09, espace à %20, « ( » à %28, etc.

Pour accéder à un service sur Internet, il faut donc se connecter à l’aide du nom de domaine ou de l’adresse IP du serveur. Les noms complets étant plus facile à retenir, il a fallu mettre au point un système qui fasse la conversion entre IP et nom de domaine. Cette tâche est réalisée par des serveurs spéciaux appelés DNS (Domain Name System). Ils forment ensemble un gigantesque annuaire permettant d’associer à un nom un numéro et un chemin pour accéder au serveur. Pour s’assurer du bon fonctionnement du système, celui-ci est doublé, proposant ainsi un DNS primaire et un secondaire. Ainsi, quand vous vous connectez à un service à l’aide de son nom de domaine, le navigateur va d’abord interroger les serveurs de noms définis dans la configuration réseau de votre machine pour obtenir la conversion nom et adresse IP du serveur et répondre à votre requête.

D’une manière générale, un enregistrement DNS comprend les informations suivantes :

le nom de domaine est un nom se terminant par un point ;

le type :

– A : type de base faisant la liaison entre un nom canonique et une adresse IP ;

– CNAME (Canonical Name) fait le lien entre un alias et un nom canonique ;

– HINFO permet de spécifier les caractéristiques matérielles de l’hôte du service. Attention, il peut être dangereux de renseigner ce champ, foisonnant d’informations importantes pour les pirates informatiques.

– MX (Mail eXchange) correspond au serveur de gestion de courrier. Quand un mail est envoyé à une adresse (user@domaine), le serveur de courrier sortant (smtp) interroge le serveur de nom afin d’obtenir l’enregistrement MX.

– NS correspond au serveur de noms ayant autorité sur le domaine ;

– PTR permet de pointer vers une autre partie de l’espace des noms de domaines ;

– SOA (Start Of Authority) décrit le serveur de nom ayant autorité sur la zone ainsi que l’adresse électronique du support technique dont @ est remplacé par un point.

La classe : IN protocole Internet

RDATA correspond au récapitulatif des données correspondant à l’enregistrement du nom de domaine :

M2-EC10-ACREDITE (2013-2014) 7 / 22

– A : un adresse IP ;

– CNAME : un nom de domaine ;

– MX : une valeur de priorité suivie d’un nom d’hôte ;

– NS : un nom d’hôte ;

– PTR : un nom de domaine ;

– SOA : plusieurs champs.

Pour terminer avec les noms de domaines, il en existe deux types, qui se distinguent par leurs terminaisons :

génériques, gérés par l’ICANN (Internet Corporation for Assigned Names and Numbers) : .aero pour l’aéronautique, .mil pour militaire, .gov pour les organismes gouvernementaux, etc.

nationaux, définis par la norme ISO 3166 : .fr pour la France, .eu pour l’Europe, .ch pour la Suisse, etc.

La communication entre machines

La communication entre des machines passe donc par des protocoles associés aux adresses IP. Le réseau Internet au sens large contient des milliards d’ordinateurs connectés entre eux, disposant chacun d’une adresse unique. À ce titre, pour que la communication soit fluide, il faudrait que chaque ordinateur dispose de l’annuaire mondial de toutes les adresses, ce qui n’est pas pensable. Le réseau mondial a donc été décomposé en une multitude de petits réseaux, à savoir des sous-réseaux. Pour faire une analogie, quand vous envoyez un courrier par voie postale, il arrive tout d’abord dans le pays de votre correspondant, puis dans sa ville, pour être enfin distribué à l’adresse exacte du destinataire. Dans cette optique, le premier sous-réseau correspondrait au pays, le second à la ville et l’adresse IP de la machine serait l’adresse exacte de la personne. L’adresse IP se compose de deux ensembles de nombres, dont le premier sert à identifier le sous-réseau et le second l’hôte. Le masque sous-réseau permet de définir le nombre de blocs de chiffres qui définissent le sous-réseau. Par exemple, dans le cas où l’adresse IP : 192.168.1.1 est associée au masque sous-réseau 255.255.255.0. Sachant que seul les blocs non égaux à 0 sont pris en compte, cela revient à dire que les trois premiers blocs de l’adresse IP définissent ici le sous-réseau et le dernier l’hôte.

Tableau 2 : Adresse IP et masque sous-réseau

Bloc 1 Bloc 2 Bloc 3 Bloc 4

IP 192 168 1 1

Masque sous-réseau 255 255 255 0

Sous-réseau 192 168 1 0

En termes de protocole, c’est aujourd’hui la version 4 du protocole IP qui est le plus utilisée : IPV4. Certains fournisseurs d’accès proposent également la version 6 : IPV6. En IPV4, l’adresse IP d’un ordinateur lui est généralement automatiquement transmise et assignée au démarrage par un serveur grâce au protocole DHCP : Dynamic Host Configuration Protocol. Il est également possible d’avoir un IP fixe permettant d’être toujours identifié, mais qui implique également une fragilité, enfin une identification certaine pour des dispositifs malveillants : pirate informatique ou trojan.

M2-EC10-ACREDITE (2013-2014) 8 / 22

Chaque paquet de données transmis par le protocole (http ou ftp) Internet contient deux adresses IP, à savoir l’IP du destinataire et l’IP de l’émetteur, pour permettre de router correctement le paquet à la machine destinataire et connaître l’origine des informations qu’elle reçoit, et y répondre le cas échéant. Cette notion de routage est importante, car elle fait le lien entre les différents sous-réseaux existants. Le rôle des routeurs est de permettre la transition des paquets au travers de l’ensemble des sous-réseaux et ce, grâce à des règles formant des tables de routage. Elles forment une véritable cartographie des itinéraires à prendre en fonction de l’adresse visée.

Par conséquent, lorsque nous cherchons à visualiser un site Internet, le navigateur interroge le serveur de noms (DNS), lui indiquant l’adresse IP de la machine visée, puis, routeurs après routeurs, en suivant la table de routage, l’information contenue dans la page recherchée arrive à votre machine. Ce sont en quelque sorte des échangeurs de l’information à l’image des échangeurs d’autoroute : plusieurs autoroutes permettent de couvrir la distance Paris-Lyon et, si un échangeur est fermé, il est toujours possible d’en prendre un autre pour continuer sa route vers Lyon.

À ce niveau d’explication des protocoles de communication, d’échanges et de transferts de l’information, il est important d’apporter deux nouveaux éléments : la passerelle et le proxy. Il ne faut pas confondre les termes de routeur et de passerelle. Une passerelle est un dispositif permettant de relier deux réseaux informatiques différents, comme un réseau local et Internet. Ainsi, les ordinateurs du réseau local peuvent accéder à Internet par le biais de la passerelle. Elle effectue donc le routage de paquets comme le routeur, mais peut également effectuer des traitements plus évolués, par exemple un pare-feu ou un proxy.

Un proxy est un dispositif qui fait le relais entre le client et le serveur et permet notamment les fonctions suivantes :

la journalisation des requêtes : accumulation d’un journal de bord, d’un fichier des requêtes ;

la sécurité du réseau local ;

le filtrage et l’anonymat ;

la mémoire cache.

Sachez, par exemple, qu’un proxy en entreprise permet de contrôler les sorties des employés sur Internet. Ainsi il apparaît clairement que la connexion est plus complexe que la simple désignation de son débit. Elle peut comprendre :

des masques sous-réseau ;

des routeurs, passerelles et proxys : par exemple votre Box Internet (routeur) configurée en wifi pour plusieurs ordinateurs. Il y a une adresse IP pour chaque ordinateur avec, en fonction ou non, des paramétrages des vérifications des adresses Mac ;

des switchs ou commutateurs réseau, qui sont des équipements permettant de relier plusieurs câbles ou fibres dans un parc informatique. Par exemple, vous connectez un switch de quatre ports à la suite de votre modem. Vous allez pouvoir connecter trois ordinateurs en Ethernet à ce switch. Le commutateur n’utilise pas les adresses IP, mais uniquement des adresses Mac.

Il est d’autant plus important de procéder à la configuration de sa connexion Internet avec la plus grande des précautions et d’avoir conscience du matériel comme des

M2-EC10-ACREDITE (2013-2014) 9 / 22

caractéristiques techniques et applicatives qui font partie de son environnement, son écosystème numérique.

L’information

En parallèle de ce paradigme technique, il y a l’information organisée, indexée, visible, codée... L’indexation d’une information ou d’un document suppose de définir les mots-clés pertinents pour décrire son contenu. Dans un livre, cela conduit à créer une table des index proposant une liste de mots-clés et les pages correspondant aux principales occurrences de ces termes. Les bibliothécaires et les documentalistes utilisent le plus souvent un thésaurus pour réaliser leur indexation. Il est normé (ISO 25964-1), garantissant ainsi son interopérabilité avec d’autres vocabulaires. Il existe trois méthodes de réalisation d’un thésaurus – analytique sur la base de mots-clés, synthétique à partir de listes de mots-clés préétablies et mixte – dont les termes sont organisés hiérarchiquement : relations hiérarchiques stricto sensu, d’équivalence et d’association. Dans le cadre des sites Internet, ils peuvent être indexés à l’aide de robots, c’est le cas des moteurs de recherche, ou manuellement, c’est celui des annuaires. Il n’existe pas, au niveau mondial, de thésaurus visant à normaliser l’indexation de l’information des sites Internet, la recherche de documents reste donc complexe. Cependant, à chaque site Internet peuvent être associées des métadonnées, qui ne sont pas affichées et dont le rôle est de décrire son contenu. Ces métadonnées sont généralement appelées « méta tags ». Elles sont situées dans l’en-tête du document html, afin de fournir des informations permettant aux moteurs de recherche d’indexer la page web. Pour se faire une idée de la nature de ces métadonnées, il convient de regarder le code source de la page d’un site. Cette possibilité est souvent proposée dans le menu Affichage de votre navigateur. Les métadonnées sont décrites par : <meta name="XXXXXX" CONTENT="Attribut">. L’importance des métadonnées pour al visibilité de l’information est cruciale.

Déposé le 30 janvier 2001 en Californie, le brevet de Google®, concernant ce que les personnes chargées de faire référencer un site appellent le « ranking » (ou classement), a été validé par l’office américain des brevets. Il concerne la méthodologie pour classer les pages les plus pertinentes que le moteur de recherche fournit en réponse aux requêtes de recherches. Suivant ce brevet, Google® effectue, en une fraction de seconde, un premier classement des pages extraites au départ en leur affectant un « taux de pertinence » calculé à partir des mots-clés. Puis il effectue un second calcul qui affecte à chaque page un « taux de valeur locale » (local score value ou ranking), qui quantifie le nombre de documents de sa base faisant référence aux pages précédemment sélectionnées. Le classement final reprend le classement initial modifié par le ranking. L’algorithme d’analyse des liens, ou « PageRank® », ne fournit aujourd’hui qu’un indice parmi d’autres dans l’algorithme qui permet de classer les résultats proposés par le moteur de recherche. De nombreuses corrections et améliorations de cette méthodologie ont été apportées ; les dernières rendues publiques concernaient le brevet du 17 avril 2007. Le nombre considérable d’entreprises spécialisées dans le référencement de sites Internet montre l’importance de la maîtrise de cette méthodologie et technologie.

Selon Microsoft®, son moteur de recherche rendu public le 1er juin 2009, Bing®, innove en termes d’algorithmes, proposant ainsi des résultats plus pertinents, mieux organisés et classés à l’aide de rubriques thématiques.

M2-EC10-ACREDITE (2013-2014) 10 / 22

Une étude sur Bing® (fondée sur une comparaison avec Google®) a donné le résultat suivant (voir http://www.cuil.com/info/blog/2009/06/26/so-how-is-bing-doing) :

Bing® accorde une grande importance à l’URL ;

Bing® semble apporter plus de poids aux termes en majuscule. Il est donc plus sensible à ce qui s’appelle la casse ;

Bing® ne semble pas utiliser de nouveaux critères qui ne soient déjà exploités par les autres ;

Bing® privilégie l’indexation des pages contenues dans un site composé d’un grand nombre de pages ;

Bing® aurait moins de spam que Yahoo!®, mais un peu plus que Google®.

Le support à l’information

Enfin, il y a le support à l’information, le document, la page, l’hypermédia… Un hypermédia est, avant tout, un document contenant plusieurs ressources nécessaires à l’information, à savoir du texte, des images, des sons, des vidéos. Ce terme est une transposition de la notion d’hypertexte aux donnéesErreur ! Signet non défini. multimédias. Le système hypertexte contient des « nœuds » reliés entre eux par des hyperliens permettant de passer de l’un à l’autre. En transposant à la notion de réseau, Internet est aujourd’hui le système hypertexte le plus vaste et le plus utilisé. À ce titre, comme les sites Internet sont des ressources au système, celles que vous utiliserez serviront l’information contenue dans votre document : votre hypermédia.

Avant de se lancer dans la production d’un hypermédia, il est important d’avoir en tête quelques considérations :

la spécificité-même de l’hypermédia rend la lecture non linéaire. Par conséquent, il est nécessaire d’organiser la navigation proposée au lecteur, voire d’en garder le contrôle, pour éviter qu’il ne se perde ou qu’il ne soit désorienté au fil de ses clics. À l’inverse, une navigation trop linéaire ou rigide perd l’intérêt de l’hypertextualité.

la consommation actuelle des documents mis en ligne tend vers une exploration rapide et transversale, impliquant pour l’usager le besoin d’un visuel des pages rendant explicites les points forts de leur contenu.

la conception, fondée sur la communicationErreur ! Signet non défini., doit être centrée sur le lecteur et sa compréhension du message que vous voulez donner.

les aspects multimédias et graphiques non seulement impliquent une mise en œuvre compétente, mais doivent aussi pouvoir être vus par tous.

le niveau d’interactivité du document et son objectif doivent vous guider pour le choix du support et de la diffusion. Prenons par exemple un DVD : sa mise à jour nécessite plusieurs étapes, dont le pressage et la distribution, alors que, dans le cas d’un site Internet au sens large, il pourra voir son contenu évoluer au fil des jours.

le contenu joue un rôle dans la décision finale. En effet, la production d’un document technique peut se faire sur un CD-Rom avec une navigation plus centrée sur la tâche, répondant directement à une question, alors que, dans le cas d’un document culturel pour le grand public, il est davantage du ressort de la création artistique.

M2-EC10-ACREDITE (2013-2014) 11 / 22

La conception d’un hypermédia est donc un habile compromis entre contraintes et désir de communiquer ; il est important d’avoir conscience des limites et des contraintes de nos décisions.

La multitude d’environnements numériques impose d’avoir une interopérabilité maximale sur l’ensemble des dispositifs. Par exemple, s’il s’agit de créer un site Internet, il doit pouvoir être lu par le plus grand nombre de navigateurs (point de vue technique) et par les personnes déficients visuels (norme WAI : Web Accessibility Initiative du W3C : World Wide Web Consortium).

Le langage

Lorsqu’on accède à un site à l’aide d’un navigateur Internet, l’ordinateur communique avec un autre, un serveur, sur lequel se trouvent les informations du site – fichiers texte, images ou vidéos – ; elles sont alors envoyées au navigateur qui se charge de les afficher. Pour réaliser un site Internet, il faut donc :

mettre en forme et présenter les informations à l’aide d’un langage dit html ;

rassembler des ressources, les enregistrer et les mettre à jour sur un serveur ;

trouver un nom de domaine et un hébergeur (société propriétaire de serveurs) ;

communiquer avec la partie du serveur qui vous a été allouée par l’hébergeur à l’aide du protocole ftp.

Le langage html (Hypertext Markup Language) est un standard dont les recommandations sont publiées par le W3C. Toutefois, il existe toujours une marge d’interprétation de la part des navigateurs, ce qui explique qu’une même page web puisse s’afficher différemment d’un navigateur Internet à l’autre. De plus, certains éditeurs de logiciels ajoutent parfois des instructions html propriétaires, c’est-à-dire ne faisant pas partie des spécifications du W3C. Ainsi, des pages web contenant ce type d’instructions pourront être parfaitement affichées sur un navigateur et en partie ou totalement illisibles sur les autres ; d’où la nécessité de créer des pages web respectant les recommandations du W3C afin de permettre leur consultation par le plus grand nombre.

Initié par Tim Berners-Lee en 1989, le langage html n’est baptisé qu’à partir de 1993, quand il est considéré comme suffisamment développé. On parle alors de langage html 1.0Erreur ! Signet non défini.. Ce n’est qu’en 1995 que la RFC 1866 officialise une version de ce langage, le html 2.0. La version 3.2 devient ensuite le standard officiel le 14 janvier 1997. Ses apports les plus significatifs sont la standardisation des tableaux ainsi qu’un grand nombre d’éléments de présentation. Le 18 décembre 1997, le html 4.est publié. Cette version standardise notamment les feuilles de style et les cadres (frames). On parle aujourd’hui d’une nouvelle version : html 5.

Comme tout langage, le html dispose d’une syntaxe et d’une grammaire spécifiques :

des balises :

des mots-clés simples délimitant des description d’éléments : title, img… ;

des balises ouvrantes (<title>), fermantes (<⁄title>) et vides (<hr ⁄>) ;

des balises avec attributs : <a href="http://www.reussirsonc2i.fr"> ;

des éléments :

généralement délimités par deux balises : <p>Un texte… <⁄p> ;

M2-EC10-ACREDITE (2013-2014) 12 / 22

pouvant être décrits par une balise avec des attributs : <img src= "image.jpg alt="Une image" ⁄> ;

pouvant en contenir d’autres (récursivement) : <p>Un texte avec un mot en gras <b>gras <b> (bold). <⁄p> : ce qui correspond à l’élément p contenant l’élément b.

Pour créer un site et « parler html », il existe trois solutions :

coder « à la main » les pages html ;

utiliser un logiciel WYSIWIG ;

exploiter un modèle préconçu.

Pour coder « à la main », il suffit de très peu de choses, à savoir : un éditeur simple, comme le bloc-notes de Windows® par exemple, et un navigateur pour visualiser le travail final – le plus fastidieux étant, bien évidemment, d’apprendre, de comprendre et de structurer le langage html. Une autre méthode consiste à employer les logiciels WYSIWIG. Avec ceux-là, il suffit de mettre en place les textes, les images ou les vidéos sur la page et le logiciel génère le code html correspondant. Cependant, tous les logiciels WYSIWIG ne codent pas de la même manière. Voici une liste non exhaustive de différents éditeurs ; certains sont déconseillés, d’autres recommandés :

déconseillés pour réaliser de l’html : Word®, Frontpage®, Publisher® ;

recommandés : Amaya® (gratuit), NVU/Kompozer® (gratuit), Dreamweaver® (payant).

Enfin, en termes de modèles préconçus, deux solutions s’offrent à vous :

la plupart des hébergeurs proposent aujourd’hui des modules permettant de créer son site en quelques clics : Free®, AMEN®, OVH®…

les générateurs de blogs comme WordPress® ou Dotclear®, que vous pouvez installer et configurer sur votre ordinateur, pour ensuite le confier à un hébergeur.

Dans l’étape finale de création, le choix du type de site ne doit pas se résumer à la technologie employée. Il existe deux types de sites.

Les sites statiques. Cela n’a rien à voir avec un manque de mouvements, d’animations ou d’interactivité, « statique » désignant simplement ici un site qui se construit et s’alimente page après page. À l’aide d’un logiciel WYSIWIG, vous créez la première, la deuxième, puis la troisième et toutes les autres. Chacune dispose de son propre contenu.

Les sites dynamiques. Ceux-là impliquent des pages disposant de « masques », qui se remplissent à l’aide d’informations contenues dans une base de donnéesErreur ! Signet non défini..

Par exemple, chaque page est composée d’un titre et d’un texte. Dans le cas d’un site statique, tout ce contenu est intégré à la page, alors que dans le cas d’un site dynamique, elle contient des champs vides pour le titre et le texte, qu’elle remplit en puisant les informations dans la base de données.

En comparant ces deux types, il s’avère que la différence essentielle réside dans le volume d’informations, son évolution et sa mise à jour. En effet, si vous souhaitez ajouter une page à un site statique, il faut reprendre un logiciel WYSIWIG et reconstruire la page, à moins qu’il n’existe un back office. Pour ajouter une page à un site dynamique, il vous suffit de compléter la base de données avec un nouveau titre et un nouveau texte. La meilleure des représentations d’un site dynamique est un blog. Pour ajouter un

M2-EC10-ACREDITE (2013-2014) 13 / 22

article, vous remplissez depuis l’interface administrateur (ou back office) les différents champs :

titre ;

texte ;

mot-clés ;

catégorie d’appartenance à l’article, souvent affiliée à la notion de menu.

Passons désormais à la pratique en détaillant étape par étape un exemple d’installation et de configuration d’un site dynamique, ou blog, à l’aide de l’un des générateurs, à savoir WordPress®. La démarche générale est la même pour Dotclear®.

Exemple de mise en œuvre en local d’un CMS

Prérequis :

Vous disposez d’un ordinateur connecté à Internet.

Vous employez un logiciel permettant d’avoir l’équivalent des équipements de l’hébergeur :

Windows® : Xampp® ou EasyPHP® ;

Apple® : Mamp®, Xampp® ;

Linux® : Lamp®, Xampp®.

Vous avez téléchargé le dossier contenant le générateur WordPress® à l’adresse http://www.wordpress-fr.net, puis vous l’avez décompressé sur le Bureau de votre ordinateur.

Installation locale du blog :

1) Installez le logiciel simulant les équipements de l’hébergeur.

2) Lancez l’exécution du logiciel.

3) Pour Xammp®, accédez au panneau de contrôle qui permet de démarrer les services MySQL (base de données) et Apache (serveur). Un même panneau est disponible dès le démarrage de Mamp®. Une fois les deux services démarrés, vous disposez d’un serveur possédant une base de données qui fonctionne sur votre ordinateur.

4) Donnez un nom et un mot de passe administrateur pour la base de données. Pour entrer dans cette interface de configuration, vous devez accéder, à l’aide d’un navigateur Internet, à l’adresse : http://localhost ou http://127.0.0.1, qui correspond à l’adresse IP de la base de données en local.

5) Il peut être nécessaire d’arrêter et de redémarrer MySQL depuis le panneau de contrôle.

6) Pour créer la base de données, vous devez passer par l’interface de configuration phpMyAdmin. Le lien permettant d’y accéder est généralement situé sur la page du navigateur (http://localhost ou http://127.0.0.1).

7) Entrez ici le nom de l’administrateur et le mot de passe que vous venez de créer.

8) Dans la zone Créer une base de données, nommez la base comme vous voulez, par exemple « bdwp » (pour Base de Données WordPress®) ;

9) Laissez le reste par défaut, à savoir « utf8_unicode_ci » et « Interclassement ».

M2-EC10-ACREDITE (2013-2014) 14 / 22

10) Cliquez sur Créer.

11) La base de données de votre site statique vient d’être créée, il faut désormais aborder l’installation et la configuration de votre blog.

12) Déplacez le WordPress® décompressé sur votre bureau dans l’un des dossiers suivants :

– xampp/httdocs ou xammp/www ;

– mamp/httdocs ou mamp/www ;

13) Saisissez l’adresse http://localhost/wordpress dans votre navigateur pour accéder à l’interface d’installation de WordPress®, puis suivez les instructions :

– mot de passe administrateur de la base de donnéesErreur ! Signet non défini. ;

– mot de passe de l’administrateur ;

– Database Host : localhost ;

– Table prefix : wp_.

14) Si tout se passe au mieux, le blog est installé sur votre serveur local, donc votre ordinateur ! Si vous rencontrez un problème à cette étape, vous pouvez le résoudre simplement en modifiant le fichier wp-config.php situé dans le dossier httdocs/WordPress/ ou www/WordPress/. Pour cela, ouvrez le fichier wp-config.php avec un éditeur de texte simple (NotePad® sous Windows® ou Tex-Edit® pour Apple®) et modifiez ces quelques lignes :

– define(‘DB_NAME’, ‘wordpress’); //nom de la base MySQL créée ;

– define(‘DB_USER’, ‘root’); //identifiant MySQL ;

– define(‘DB_PASSWORD’, ‘root’); //mot de passe ;

– define(‘DB_HOST’, ‘localhost’) ;

– enregistrez le fichier avec les modifications en conservant l’extension.php ;

– finalisez l’installation en accédant à la page : http://localhost/wordpress/wp-admin/install.php.

15) Vous pouvez désormais vous connecter à l’interface d’administration de votre blog à l’aide de l’identifiant et du mot de passe fournis depuis l’adresse : http://127.0.0.1/wordpressfr/wp-login.php ou http://localhost/wordpressfr/wp-login.php.

À présent, exercez-vous à loisir sur votre blog : modifiez le contenu d’une page, ajoutez une page et/ou un article, modifiez le thème, ajoutez des extensions… Cet exercice vous permettra de vous rendre compte de tous les points abordés lors de la conception :

linéarité et non-linéarité des contenus ;

visibilité et identité graphique ;

technologie avec une base de données et mise à jour, évolution des contenus ;

aspects multimédias, niveau d’interactivité ;

approche des outils serveurs : Apache, MySQL, phpMyAdmin et fichier wp_config.php ;

dossiers serveurs pour Internet : /httdocs ou /www.

M2-EC10-ACREDITE (2013-2014) 15 / 22

Sachez tout de même qu’installer son blog localement pour le transférer via le protocole ftp sur la partie allouée du serveur de l’hébergeur peut être une fausse bonne idée. Des erreurs peuvent se produire avec les adresses relatives ou absolues des contenus multimédias ou vous pouvez rencontrer un problème de configuration de la base de données. L’idéal est de vous entraîner à installer localement, puis de réaliser par la suite cette installation directement chez l’hébergeur. Voici ce qui sera différent dans cette procédure :

vous n’aurez pas besoin d’activer Apache et MySQL, puisqu’ils sont déjà actifs chez l’hébergeur ;

vous ne pourrez pas déplacer le dossier décompressé WordPress® simplement avec la souris : vous devrez faire appel à un logiciel ftp dont l’url et les codes d’accès vous auront été fournis par l’hébergeur ;

les interfaces d’administration MySQL et phpMyAdmin sont généralement directement accessibles depuis l’interface d’administration des serveurs de l’hébergeur.

Communiquer

La netiquette, charte définissant les règles de conduite et de politesse sur Internet, a été officialisée en octobre 1995 par la RFC 1855. S’il ne fallait retenir qu’une règle, ce serait que vous ne devez pas faire, au cours d’un échange via Internet, ce que vous ne feriez pas lors d’un échange en face en face.

Voici une liste de règles à suivre en rapport avec les pratiques sur Internet :

Chaque courrier électronique doit contenir un sujet en en-tête. Il devrait, dans l’idéal, commencer par une formule de salutation et se conclure par une signature. L’envoi de pièces jointes doit être fait dans des conditions acceptées par le correspondant. Lorsque vous recevez un message qui vous est spécialement destiné (A), il est de bon usage d’accuser immédiatement réception et d’informer l’expéditeur de la suite que vous allez donner au message reçu. Lorsque vous citez, dans un message, une tierce personne, mettez-la si possible en copie (visible ou cachée).

Dans le cadre d’un courrier électronique destiné à plusieurs personnes qui ne se connaissent pas forcément entre elles, ne mettez pas les adresses électroniques en destinataires directs, mais en « copie cachée » (Bcc ou Cci). Beaucoup d’utilisateurs pensent que Cc signifie copie cachée : c’est une erreur ! En fait, Cc signifie « copie carbone » (ou carbon copy) : c’est une copie simple. Pour masquer vos destinataires, utilisez bien Cci (« copie carbone invisible » ou Bcc, blind carbon copy).

Les membres d’une liste de diffusion s’y inscrivent volontairement. Les règles de fonctionnement doivent normalement être accessibles : les utilisateurs souhaitant s’inscrire doivent en prendre connaissance avant de s’abonner ou de poster des messages. Au moment de répondre à un message reçu via une liste de diffusion, vérifiez si la réponse est envoyée à toute la liste, ou bien seulement à l’expéditeur (ce qui est préférable dans le cas où la réponse n’est pas d’intérêt général).

Il est mal vu d’écrire en langage SMS sur un forum. Il est également préférable d’éviter les messages tout en lettres capitales, car c’est considéré comme

M2-EC10-ACREDITE (2013-2014) 16 / 22

agressif : cela équivalent au fait de crier. Il est tout aussi mal vu de poser une question dont la réponse aurait pu être trouvée moyennant une recherche préalable, ou de la poser plusieurs fois à différents endroits du message. Sur les sujets communs, la plupart des questions ont souvent déjà été posées et les réponses données.

L’envoi de fichiers en pièces jointes, quels qu’ils soient, est soumis à des règles de bon sens et de correction : la pièce jointe ne doit pas dépasser une certaine taille (par exemple, toujours inférieure à 10 Mo) ou le document ne doit pas être compressé (car le serveur mail du correspondant peut ne pas accepter ce type de fichier par crainte de virus dissimulé).

Histoire de l’internet

Ce qu’il faut retenir : 1. avec la notion de réseau, il y a la répartition et l’aiguillage des paquets de

données ; 2. de l’APRANET au réseau mobile ; 3. les protocoles de communication et d’échanges de l’information : TCP/IP, http,

ftp ; 4. les RFC, standards et normes : exemple IMS Global Learning Consortium :

http://www.imsglobal.org, W3C : http://www.w3.org ; 5. les « sites Internet », leur adresse, les moteurs de recherches et l’indexation de

l’information, hypertextualité (T. Berners-Lee & R. Cailleau, 12/11/1990 : http://www.w3.org/Proposal.html, les langages et leur grammaire, les systèmes de gestion de contenu…

6. les usages.

Histoire de l’informatique

Ce qu’il faut retenir : 1. articulation entre hardware et software ; 2. loi de Moore (http://fr.wikipedia.org/wiki/Loi_de_Moore) et/ou d’obsolescence

programmée ou non ; 3. In=>Out selon des lois programmatiques (on crée ou introduit une information

(IN) qui informatiquement traitée et modifiée (OUT)) ; 4. dimensions physiques, logicielles, applicatives et sociales ; 5. langage de codage et de programmation, interface, calcul, gestion des données,

méthodes de conception de logiciels… 6. les usages.

Technologies Web : histoire et fonctionnement

Source Wikipédia, consulté le 21 Novembre 2013 : http://fr.wikipedia.org/wiki/Technologies_Web

Ce qu’il faut retenir : 1. évolution du Web 1.0, 2.0, 3.0... 2. Web mobile, sémantique ; 3. son langage : aujourd’hui Html ? 4 et/ou 5 ;

M2-EC10-ACREDITE (2013-2014) 17 / 22

4. fonctionnement : réseau, page, serveur, client, échanges client-serveur, formats et interopérabilité, création, édition et diffusion

5. les applications possibles : exemple d’applications labélisées IMS : http://developers.imsglobal.org/catalog.html

Les langages : HTML

Tutoriels disponibles sur le Web : création d’un site Web :

http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/comment-fait-on-pour-creer-des-sites-web ;

Votre première page en html : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/votre-premiere-page-web-en-html ;

les balises html : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-1 ;

la feuille de style CSS : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mettre-en-place-le-css ;

tutoriel complet : http://fr.html.net/tutorials/html/ .

Les scripts

JAVA : « Le langage Java est un langage de programmation informatique orienté objet créé par James Gosling et Patrick Naughton, employés de Sun Microsystems, avec le soutien de Bill Joy(cofondateur de Sun Microsystems en 1982), présenté officiellement le 23 mai 1995 au SunWorld ». (source : http://fr.wikipedia.org/wiki/Langage_Java, consultée le 25/11/2013).

PHP : « PHP: Hypertext Preprocessor, plus connu sous son sigle PHP, est un langage de programmation compilé libre principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP. Le langage PHP fut créé en 1994 par Rasmus Lerdorf pour son site web. » (source : http://fr.wikipedia.org/wiki/PHP, consultée le 25/11/2013).

Tutoriel pour PHP : http://sylvie-vauthier.developpez.com/tutoriels/php/grand-debutant/?page=intro

Situation problème n°1 :

Contexte : vous êtes une petite équipe de et vous devez réaliser un site Internet en html de 4 pages pour la plateforme technique de l’Université de Cergy-Pontoise : TechEdulab.

Vous avez à votre disposition un texte général, d’un logo, d’une charte graphique et d’images.

Vous devez produire :

M2-EC10-ACREDITE (2013-2014) 18 / 22

le story-board du site Internet à l’aide d’un outil de PréAo : Powerpoint®, OpenOffice® ou Libreoffice® (attention, la production finale devra être lisible quelque soit le logiciel utilisé pour créer le story-board)

le site Internet après validation par le client du story-board.

Les systèmes de gestion de contenu : CMS

CMS :

« Un système de gestion de contenu ou SGC (Content Management System ou CMS) est une famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d'applications multimédia. Ils partagent les fonctionnalités suivantes :

• ils permettent à plusieurs individus de travailler sur un même document ;

• ils fournissent une chaîne de publication (workflow) offrant par exemple la possibilité de mettre en ligne le contenu des documents ;

• ils permettent de séparer les opérations de gestion de la forme et du contenu ;

• ils permettent de structurer le contenu (utilisation de FAQ, de documents, de blogs, de forums de discussion, etc.) ;

• ils permettent de hiérarchiser les utilisateurs et de leur attribuer des rôles et des permissions (utilisateur anonyme, administrateur, contributeur, etc.) ;

• certains SGC incluent la gestion de versions.

Lorsque le SGC gère du contenu dynamique, on parle de système de gestion de contenu dynamique ou SGCD (Dynamic Content Management System ou DCMS).

Les SGC ne doivent pas être confondus avec les systèmes de gestion électronique des documents (GED) qui permettent de réaliser la gestion de contenu dans l'entreprise. »

(Source : http://fr.wikipedia.org/wiki/Système_de_gestion_de_contenu, consultée le 25/11/2013).

Liste non-exhaustive de CMS :

WordPress® : http://fr.wordpress.org, http://www.wordpress-fr.net, et essayer à partir de : http://fr.wordpress.com ;

DotClear® : http://fr.dotclear.org, une communauté : http://dotaddict.org ; Joomla® : http://www.joomla.fr,un tutoriel :

http://www.youtube.com/watch?v=g5rlAR9jaOs, Drupal® : http://drupalfrance.com, une communauté : http://drupalfr.org, un

ensemble d’aides : http://www.drupalfacile.org .

Situation problème n°2

A l’aide de la plate-forme http://fr.wordpress.com, vous devez créer votre CMS et emprunter chacun des rôles :

Rôle Exemple de compétences associées à la fonction

Super Administrateur Gestion du réseau Gestion des sites Gestion des utilisateurs du réseau

M2-EC10-ACREDITE (2013-2014) 19 / 22

Gestion des thèmes du réseau Gestion des options du réseau HTML non filtré lors de l’utilisation Multisite

Administrateur Mise à jour de du coeur du CMS : Content Management system Changement de thèmes Édition de thèmes Activation de plugins Édition de plugins Gestion des utilisateurs Édition de fichier Gestion des options Modération des commentaires Export Gestion des catégories Gestion des liens Gestion du tableau de bord Upload de fichiers Importations Utilisation de code HTML, Javascript, PHP… Edition d’articles Edition des articles des autres utilisateurs

Editeur Modération des commentaires Gestion des catégories Gestion des liens Upload de fichiers Utilisation de code HTML, Javascript, PHP… Edition d’articles Edition des articles des autres utilisateurs Edition d’articles publiés Publication d’articles Edition de pages Lecture

Auteur Upload de fichiers Edition d’articles Suppression d’articles Publication d’articles Lecture

Contributeur Edition d’articles Lecture

Abonné Lecture

LMS : Learning Management System

« Un learning management system (LMS) ou learning support system (LSS) est un système logiciel web développé pour accompagner toute personne impliquée dans un processus d'apprentissage dans sa gestion de parcours pédagogiques. Les services offerts incluent généralement un contrôle d'accès, des outils de communication (synchrones et/ou asynchrones) et l'administration des groupes d'utilisateurs. En français, on trouve les appellations : plate-forme d'apprentissage en ligne, Système de gestion de l'apprentissage, centre de formation virtuel, plate-forme e-learning (FOAD) et, particulièrement au Québec, environnement numérique d'apprentissage (ENA).

Le système informatique mis en place du côté serveur est appelé CMS (content management system) ou un ENT (espace numérique de travail). Des fonctionnalités peuvent leur être associées en fonction du cahier des charges.

M2-EC10-ACREDITE (2013-2014) 20 / 22

Il s'agit d'une composante d'un dispositif de formation en ligne utilisant les Technologies de l'Information et de la Communication (TIC).

La plupart de ces systèmes présentent également des générateurs internes de tests d'évaluation que l'on retrouve sous forme de QCM, QCU, vrai/faux, texte à trous, appariements. Ces activités sont soit soumises à validation par l'enseignant soit proposées comme activités de régulation en auto-évaluation. D'une manière générale, elles sont intégrables en tant que ressources pédagogiques dans un parcours d'apprentissage au sein de la plate-forme. Si celle-ci est compatible avec le standard SCORM, les résultats à ces activités d'évaluation sont alors pris en compte dans la gestion du parcours d'apprentissage de l'étudiant.

Pour simplifier l'intégration des ressources et la remontée des informations à la plate-forme, il est fortement recommandé d'utiliser une plate-forme respectant les recommandations d'une des normes existantes comme LOM, ou conforme au standard SCORM qui est en voie de généralisation. »

(Source : http://fr.wikipedia.org/wiki/Learning_management_system, consultée le 25/11/2013).

Liste non-exhaustive des plateformes pédagogiques sous licence libre : http://fr.wikipedia.org/wiki/Tableau_des_Plates-formes_sous_licence_libre

Liste non-exhaustive des plateformes pédagogiques sous licence propriétaire : http://fr.wikipedia.org/wiki/Plates-formes_sous_licence_propriétaire

Situation problème n°3 :

En équipe de 4, réalisez une étude critique de deux chaines de production Scorm® :

a) a l’aide du logiciel auteur OPALE® : http://scenari-platform.org/projects/opale/fr/pres/co/index.html

b) à l’aide de l’extension du traitement de texte Word® : Wimba®Create http://www.wimba.com/products/wimba_create/

Exemple de schéma fonctionnel d’une chaine de production :

M2-EC10-ACREDITE (2013-2014) 21 / 22

M2-EC10-ACREDITE (2013-2014) 22 / 22

Situation problème n°4 :

Vous êtes responsable dans un établissement d’enseignement supérieur du service d’ingénierie pédagogique. A ce titre, la présidence vous demande de rédiger une note critique argumentée de 3 pages maximum sur les trois LMS suivants : Moodle®, Dokeos® et Ilias®.