Pour visualiser la présentation, chapitre par chapitre, cliquez par la suite sur les icônes :
Introduction - Qu'est-ce qu'une page WEB ?
Avec l'essor d'Internet, le "web" devient un lieu d'expression incontournable pour tous les domaines d'informations, y compris et en particulier les domaines techniques : Plus souple que les autres supports (puisque précisément l'information y circule sans support physique - papier, disquette, CDRom, etc.), il permet aisément corrections, mises à jour et enrichissements. Le courrier électronique ("e-mail") et les forums de discussion ("news") complètent le dispositif en proposant un moyen d'échange entre utilisateurs et auteurs, et entre utilisateurs eux-mêmes.
Les progrès toujours plus rapides de l'informatique pourraient laisser à penser que tout est, ou sera prochainement, pour le mieux dans le meilleur des (cyber-)mondes. Pour autant rien n'est aussi simple : Techniquement d'une part Internet présente des limites. Ensuite, comme toute technologie en développement, Internet repose sur des normes, mouvantes, évoluant parfois dans des directions contradictoires. Les outils sont souvent "à la traîne" de ces normes et ne permettent pas de les utiliser complètement. En somme, dans un environnement ou presque rien ne semble impossible (tout au moins inconcevable), la tâche du "cyber-rédacteur" est loin d'être aisée : Il lui faut en permanence faire la part entre ce qui lui est demandé, ce qui est techniquement faisable, et ce qu'il est raisonnable de faire.
Cet atelier propose une présentation simplifiée de ce qu'est, techniquement, Internet, pour en souligner les limites. Il aborde ensuite le formalisme et les bases du langage HTML, servant à rédiger les pages web. De ces présentations découlent un certain nombre de règles simples pour concevoir des pages ou des sites. Il est aussi l'occasion de s'élargir et de présenter rapidement les autres technologies naissantes ou se développant autour du web, qui permettent d'enrichir toujours plus les pages, et auxquelles les rédacteurs seront probablement confrontés dans les prochaines années. Lors des séances de travaux pratiques, les manipulations de base pour créer, organiser et faire héberger son site sont réalisées. En bref, il s'agit de tenter de donner aux rédacteurs les bases qu'il est aujourd'hui utile, souvent encore nécessaire, de connaître avant de se lancer dans la conception de pages web.

Présentation d'Internet, ses protocoles, ses limites -

Internet est un réseau mondial. Tout ordinateur, connecté à un ordinateur connecté sur Internet, l'est potentiellement. Internet est un "réseau de réseaux" : Il résulte de l'interconnexion de plus petits réseaux d'ordinateurs connectés entre eux.
Pour connecter deux ordinateurs ensemble, il faut définir des règles. C'est ce que l'on appelle des "protocoles". Il existe des protocoles de différents niveaux : Certains, dits de bas niveaux décrivent par exemple la manière dont sont physiquement reliés les ordinateurs (câble, fibre optique…). D'autres, dits de haut niveau, la manière par exemple dont vont discuter les ordinateurs une fois connectés (le "dialogue" qu'échange un ordinateur avec un serveur lorsqu'il va rechercher votre courrier électronique).
On dit de ces protocoles qu'ils sont en couche, car chacun a pour tâche de résoudre une partie du problème afin de rendre un service aux protocoles de plus haut niveau. Ainsi, lorsque deux ordinateurs sont "connectés" par les protocoles de bas niveau, les protocoles de plus haut niveau n'ont plus à savoir comment ils le sont. Si le type de connexion change (par exemple on passe d'un réseau local à une connexion par modem), on va remplacer les protocoles de bas niveau ("Ethernet" sans doute pour notre exemple, par "PPP"), mais les autres programmes ne verront pas de différence.
C'est ce principe qui permet de connecter différemment des ordinateurs eux-mêmes différents sur Internet et que chacun puisse "surfer" (presque) de la même manière, de lire son mail, etc. D'utiliser au choix, Netscape, Internet Explorer, Outlook pour le mail, etc. Cela fait que l'on dit que l'on est là dans un système "ouvert", par opposition à des réseaux qui ne permettraient pas d'interfacer des machines non prévues (réseaux propriétaires des constructeurs informatiques).
Cela a des avantages et des inconvénients. Les avantages sont évidents : On peut se connecter à Internet de partout et avec pratiquement n'importe quoi. Les inconvénients en découlent : Une grande hétérogénéité existe à tous les niveaux. La pile de protocoles permet en grande partie de prendre en compte cette hétérogénéité, c'est même en partie son rôle. Pour ce qui nous concerne, il subsiste cependant deux conséquences importantes (une à chaque bout de la chaîne) :
  • Les connexions différentes imposent des débits très différents (hauts débits - exemple ADSL -
    contre bas débits - exemple modem classique),
  • La diversité des machines et des navigateurs rend les affichages des pages très différents
    (malgré la référence HTML).
Il faut ainsi toujours garder à l'esprit que sauf dans des cas particulièrement explicites, le développeur de page web n'est jamais en situation de tester sa page, aussi bien en terme de temps de chargement que de rendu.
Pour en finir avec cette présentation d'Internet, parlons de deux protocoles centraux, qui donnent en fait leur nom à toute la pile : TCP et IP.
  • IP a pour charge d'acheminer des paquets de données jusqu'à la machine cible, tâche ardue puisque nous l'avons vu, les machines peuvent être très éloignées. Les paquets passent par des machines intermédiaires (des "routeurs") et tous ne prennent pas nécessairement le même chemin. D'ailleurs à l'origine, Internet, qui était un projet militaire, a été conçu pour cela : qu'il existe toujours plusieurs chemins possibles pour communiquer d'un point à l'autre, en cas de rupture de l'un d'entre eux. On comprend qu'IP soit une partie centrale de la pile de protocoles. Les protocoles de plus bas niveau peuvent assurer des connexions de nature différente, mais IP est indispensable pour se connecter à Internet.
  • TCP, lui, prend les paquets reçus grâce à IP et reconstitue les données. Au passage, il vérifie qu'il n'y a pas d'erreurs, qu'il a bien tout reçu, il réordonne les paquets (qui peuvent arriver dans le désordre). Il existe un TCP "dégradé" appelé UDP, qui, sans rentrer dans les détails, fait un peu moins de choses mais est suffisant pour un certain nombre de traitements. TCP et UDP sont de même indispensables pour se connecter à Internet. Contrairement au modèle "OSI" théorique et normalisé par l'ISO (International Standard Organisation), TCP/IP, qui est un standard de fait, ne possède pas de protocoles de plus haut niveau que TCP et UDP. Ce sont ensuite aux applications (navigateur, application de mail, etc.) de traiter les données acheminées (afficher la page web par exemple). Maintenant on comprend pourquoi on peut dire que TCP et IP forment la colonne vertébrale d'Internet.

Le Langage du WEB : HTML -

C'est un langage dit "balisé" : Si on ouvre un fichier HTML avec un simple éditeur de texte (le bloc note de Windows par exemple), on voit que le document est parsemé de code plus ou moins complexe entre chevrons (<B>, <TABLE>…). Ce sont des balises. Les balises, en HTML servent à structurer le texte de manière plus ou moins logique, mais le but est avant tout de guider le navigateur dans la manière de présenter le document. Ainsi, on peut définir des niveaux de titre (de 1 à 6) ou des types de texte (paragraphe, citation, code informatique, etc.). Il existe aussi des balises qui permettent de spécifier le style réellement voulu pour le texte (gras, italique…). Ainsi si l'on veut écrire du texte en gras on écrira en HTML : <B>mon texte</B> (une balise commençant par un "/" est une balise de fermeture, l'effet s'arrête là)
On voit donc ici que la manière dont sera affiché le document peut dépendre du navigateur : En pratique tous ou presque affichent par défaut une citation en italique, mais il pourrait en être autrement. Quant aux tableaux et aux mises en page un peu plus compliquées, tous ne réagissent pas exactement de la même manière, ce qui peut donner quelques surprises… C'est un peu le paradoxe d'HTML auquel sont souvent confrontés les développeurs de pages web : On voudrait que le document soit présenté partout de la même manière (celle que l'on a conçue), mais c'est impossible car tout le monde n'utilise pas les mêmes machines, les mêmes résolutions d'affichage, les mêmes tailles d'écran… et il est du ressort des navigateurs de savoir s'adapter.
En outre, il ne faut pas oublier que l'utilisateur peut lui aussi choisir ses préférences, préférer par exemple spécifier ses couleurs pour le fond de page, l'affichage des liens, etc. Enfin, l'utilisation de "feuilles de styles" peut modifier la manière dont les balises sont présentées. On peut également rajouter que les fabricants de navigateurs créent parfois leurs propres balises qui ne sont pas reconnues par les autres…

Tout cela fait d'HTML, qui est à la base assez simple, un outil un peu difficile à mettre en œuvre. Si bien que rares sont les éditeurs d'HTML qui permettent de fournir du code toujours optimisé et qui rendent exactement le résultat attendu. Autant dire qu'il est encore souvent nécessaire d'aller corriger les balises "à la main". Ce n'est d'ailleurs pas un hasard si la plupart des éditeurs donnent comme fonctionnalité d'éditer le fichier HTML au format texte. Dernière utilité à "lire" le HTML : L'inspiration ! Lorsque quelque chose vous plait sur une page visitée, il n'est pas toujours facile de comprendre comment cela est fait, mais tous les navigateurs permettent d'afficher le fichier "source". Il est alors facile de s'en inspirer (sans ensuite "pirater" pour autant !).
Conception de pages WEB -
Cette partie est plus intimement liée aux travaux pratiques de l'atelier. Les principales règles découlent des limitations techniques détaillées par ailleurs et sont liées à l'hétérogénéité d'Internet : A quoi bon faire une page très compliquée, qui ne s'affichera jamais comme prévu, voire qui ne s'affichera pas du tout chez les internautes qui possèdent une connexion trop lente (et pas suffisamment de patience pour attendre 10 minutes que la page se charge) ?
L'attention a principalement été portée sur les thèmes suivants :
  • La simplicité. Ne pas surcharger sa page d'éléments qui n'apportent rien au contenu et ralentissent exagérément le temps de chargement. Utiliser les images avec parcimonie. Utiliser un format compressé (JPG, GIF), des résolutions raisonnables (100 dpi suffisent largement pour un affichage à l'écran) et des images de la bonne taille. Trouver un compromis entre sobriété et aspect attractif permet aussi de limiter les changements de présentation d'un navigateur à l'autre.
  • Utiliser autant que possible pour la présentation les capacités des navigateurs (une couleur de fond peut souvent remplacer une image de fond, et cela limite le temps de chargement de la page). Structurer quand c'est possible ses pages en "frames", cela rend la navigation plus rapide à l'intérieur du site en ne rechargeant que les parties qui changent.
  • Travailler sur une version précise de la norme HTML. Choisir celle qui est nécessaire pour réaliser la présentation que l'on souhaite et annoncer dès lors quelle version minimum des navigateurs est requise pour la consulter. Ne pas se risquer à utiliser les dernières évolutions des navigateurs. Outre que cela ferme l'accès à de nombreux utilisateurs ne disposant que d'une ancienne version (et qui ne souhaiteront pas nécessairement en télécharger une nouvelle juste pour consulter votre page), c'est le meilleur moyen de n'être pas compatible avec les autres navigateurs.
  • Si l'on ne souhaite pas être compatible pour tous les navigateurs, préciser pour quelle famille le site est optimisé. Préciser aussi s'il requiert une résolution particulière d'affichage, un débit de connexion, etc. Tester ensuite son site sur le maximum de plates-formes pour lesquelles il est supposé fonctionner (si aucune restriction n'est mentionnée, il est supposé fonctionner partout !). Ne pas oublier les situations critiques (bas débit, faibles résolutions…).
  • Concernant l'ergonomie des pages, le monde d'Internet n'a que peu de règles instaurées. Il y a des "coutumes" qu'il est utile de reprendre à son compte (date de la dernière mise à jour, pour que l'internaute ne perde pas son temps à rechercher du nouveau s'il n'y en a pas - lien pour envoyer un mail au responsable de la page, au cas où des problèmes seraient rencontrés…). Concernant la mise en page et les liens de navigation, certaines règles se sont aussi imposées, qui facilitent grandement la vie des internautes. Elles concernent la gestion des fenêtres (ouvrir un lien externe au site dans une nouvelle fenêtre par exemple), les liens de navigation à l'intérieur des pages (prévoir un lien de retour en haut de page dans le cas de pages longues, dupliquer en bas de page des liens figurant en haut pour ne pas avoir à remonter en fin de lecture, etc.), le découpage de son site en pages (trouver la bonne granularité)… Autant de sujets qui se posent naturellement dans le cadre des travaux pratiques de l'atelier.

HTML avancé -

Dans cette partie, nous détaillons un certain nombre de techniques liées à HTML, qui ont pour but d'améliorer la présentation des pages web, et de prendre en compte la nécessaire introduction d'une "dynamique" (DHTML : Dynamic HyperText Modelling Language) :
  • Les frames (cadres), déterminant des zones pouvant changer de façon autonome dans la page, grâce aux targets (cibles), associées aux liens.
  • Les formulaires.
  • Les scripts, en particulier les javascripts, qui vont permettre de définir des réactions aux événements (events) actions de l'utilisateur.
  • Le mapping d'images, consistant à définir des zones dans une image et à y associer des actions particulières.
Après HTML -
Comme HTML n'offre que peu de balises permettant une vraie structuration logique du document, et que le nombre de balises est limité, d'autres langages semblent devoir lui succéder, tel XML (une "mouture" de SGML mieux adaptée au web). Il faut pour l'instant envisager ces langages comme des extensions possibles, HTML restant la technologie de base.
D'autant qu'HTML a su s'enrichir. Comme nous venons de le voir, les scripts permettent de faire réagir le navigateur aux actions de l'Internaute (ouverture d'une boite de dialogue, etc.). Les "applets java" que l'on peut maintenant insérer dans les pages permettent de les enrichir de petits programmes (souvent des animations, des petits jeux…). Sans compter que si nativement HTML ne gère que les images, les navigateurs sont maintenant capables de jouer des sons, des clips, etc.
Côté serveur, la génération dynamique de pages web, par des mécanismes comme CGI (l'ancêtre), les ASP et JSP, et maintenant PHP, permet d'envisager une page web non comme un document figé, mais un document répondant à une action de l'utilisateur (réponse à une requête…).
Des balises permettant des affichages de plus en plus complexes (XHTML), les feuilles de style (CSS), et autres évolutions en font un outil très performant pour la création de pages web. HTML a encore suffisamment d'avenir pour qu'il soit intéressant de s'y pencher un peu !

Etat de l'art - Evolutions - Sécurité -

Dans la conférence, nous revenons sur les évolutions actuelles et prévisibles, en particulier sur les développements de XML. Nous terminons par un rapide panorama des problèmes de sécurité.