Études supérieures - Les enseignements - Plateforme Temps Réel - Atelier Hypermédia - HTML / CSS -

web#02 { HTmL : configuration ; }

Dans ce cours, nous allons créer des hyperdocuments sur Internet. mais avant de s’y mettre, nous avons besoin de comprendre quelques bases concernant le fonctionnement du World Wide Web.

Transfert de fichiers

Ce que beaucoup de gens ignorent du World Wide Web, c’est qu’il s’agit en permanence de transferts de fichiers, autremment dit de copies de documents d’un ordinateur à un autre. Pour regarder un « document » — souvent appelés (dans une terminologie plutôt douteux) « une page » — nous sommes obligés de copier ce document sur notre propre machine avant de pouvoir le lire dans notre navigateur. Cette copie du document peut se faire sur notre disque dur ou tout simplement dans la mémoire temporaire de notre machine, quoi qu’il en soit, nous avons une copie locale d’un document distant.

Notez : c’est pour cette raison que Internet pose de sérieux problèmes structurelles par rapport aux anciens supports du vieux copyright. Bien qu’il existe maintenant les « flux » Internet plus ou moins impossibles à copier, dans tous les cas, votre ordinateur copie tout ce qu’il consulte sur Internet. Logique, puisqu’il a besoin de ces données pour les afficher dans votre machine.

En conséquence, quand vous pointez votre navigateur vers un site distant, par exemple http://www.ecole-art-aix.fr/, en réalité vous êtes en train de le pointer vers une machine physique, dans une salle réelle. Cette machine dois être connecté 24/24h, 7/7j. Cela fait beaucoup d’électricité. Parfois cette machine ressemble à une des machines comme celles-ci :

Parfois cette machine est chez quelqu’un, dans son grenier, son bureau, voire dans sa cuisine ou sa chambre :

Il n’est pas important de connaître l’addresse postale de cette machine. Cette machine n’a même pas besoin d’être propre ou bien rangé. Par contre, vous avez besoin de connaître son addresse Internet. Et quand vous allez sur ce site, genre http://www.ecole-art-aix.fr, et que vous demandez un document, ce serveur vous enverra une copie de ce document sur votre machine. Vous pourriez ensuite le lire à l’intérieur de votre navigateur.

Un serveur chez-soi

Ce qui veut dire que votre machine peut regarder des documents situés sur un serveur distant, ou localement sur votre propre machine. C’est très pratique, surtout quand vous voulez créer un site Internet localement, le tester, l’affiner, avant de l’envoyer sur un serveur distant. Le fichier de l’illustration suivante, par exemple, a été créé sur notre propre machine. En double-cliquant dessus, je peux le lire dans mon navigateur, comme n’importe quel document web.

En d’autres termes, nous utiliterons dans ce cours notre propre machine comme serveur pour tester nos créations. Nous ferons comme si notre site est sur une de ces fameuses machines ouvertes 24/24h, alors qu’en réalité elle est sur notre propre machine. Ce genre de repli, où la machine se lit comme d’une étrangère est tout à fait commun dans l’informatique — c’est une des fonctions de base de ces machines. Une fois notre site prêt, nous transferons l’ensemble des documents sur notre serveur distant (réellement ouvert 24/24h et accessible via Internet) via une service qui s’appelle FTP = file Transfer Protocol.

Du coup, avant de commencer un site web, il est important de créer un dossier local dans lequel vous allez placer l’ensemble des élements qui composeront votre site. Comme un site web se « lit » à travers le transfert de ses fichiers, la structure d’un site web vient du coup de l’interelation de fichiers à l’intérieur de ce serveur : on va avoir beaucoup de fichiers et ça va faire du bordel. Pour organiser ces fichiers, il est pratique — voire essentiel — de commencer par créer un dossier dans lequel vous aller mettre l’ensemble de vos fichiers : toutes les « pages » + toutes les « images » et autres données contenus dans ces « pages ».

Sur macintosh, il existe déjà un endroit qu’il est important de respecter (surtout pour la suite). Il nous simplifie la vie pour tout un tas d’activités et surtout nous donne un bon endroit pour ranger proprement nos fichiers qui vont vite se mettre à se multiplier. Il s’agit d’un dossier qui s’appelle Sites :

Ce dossier contient tous les sites sur lequel vous aller travailler.

Editeur de pages

Vous vous posez peut-être la question : comment est-ce qu’il a créé le fichier page.html dans l’illustration en haut ? Autrement dit, quel logiciel dois-je acheter pour construire les pages web que je vais transférer sur mon serveur ?

La réponse : aucun. Tout ce qu’il vous faut existe déjà sur votre ordinateur. Contrairement à ce que pense beaucoup d’étudiants, vous n’avez pas besoin d’acheter Dreamweaver à 400€ pour faire de belles pages internet. Au contraire, si vous ne conaissez pas bien toutes les règles de fabrication d’une page HTmL, Dreamweaver peut même vous causer des dégats en vous proposant des élements totalement contradictoires qui rendront vos pages incohérentes sur un navigateur moderne. Ceci dit, si vous avez déjà Dreamweaver, il est un bon logiciel de fabrication des sites internet, pourvu que vous l’utiliser selon les normes actuellement en vigeur. Les activistes les plus vocales des standards web ont même créé une commitée pour travailler avec macromedia pour que leur logiciel devienne plus respectable (cf. http://www.alistapart.com). Pour plus d’informations sur ce travail en particulier, lisez cet article sur leur site.

Pour ce cours, nous allons utiliser le logiciel le plus basic pour faire nos pages, disponible sur tous les macintosh et avec un équivalent semblable sur Windows. Il s’agit du logiciel TextEdit, qui peut être configuré pour faire de bonnes pages Internet. Pour ce faire, ouvrez TextEdit, allez dans le menu TextEdit > Préférences et cochez/décochez les options suivantes :

Ensuite, sélectionner le deuxième onglet (« open and save » dans mon exemple impérialiste) et cochez/décochez les options suivantes :

Vous êtes maintenant prêt à fabriquer des pages pour le World Wide Web.

mac OS X = Serveur Simplifié

Vous pouvez même utiliser votre mac personnel, si vous le désirez, pour publier vos contenus en ligne. C’est-à-dire que vous pouvez, si vous achetez une service spéciale vous donnant une addresse « publique » pour votre machine, laisser des gens venir regarder vos pages personnels. Dans tout macintosh depuis mac OS X 10.0 il existe un programme de partage très puissant, le même d’ailleurs de la plupart des grands (et petits) serveurs sur Internet : Apache.

Sécurité

Cette idée vous fait peur ? Ne vous inquiétez pas. Dans l’école nos machines sont protégées derrière un « firewall » (une porte coupe-feu). Vous pouvez activer ce serveur Apache en toute sécurité. mais faites attention quand vous êtes en déplacement et assurez-vous chez vous que vous êtes derrière un firewall avant d’activer votre serveur Apache. La plupart du temps vous serez connecté via un modem ADSL qui contient d’office un « firewall » pour vous protéger des pirates qui veulent s’accaparer de votre machine. Vous avez aussi un « firewall » intégré dans votre mac lui-même qu’il est aussi bon d’activer, au cas où.

Si tout cela vous semble trop, ne vous inquiétez pas. Nous en parlons d’entrée de jeu parce que la sécurité est un élement essentiel qu’il faudra prendre en compte à tout moment, surtout quand nous commençons à créer des programmes en PHP. mais nous ajouterons les élements progressivement. Pour l’instant, vérifiez juste que vous êtes derrière un « firewall ».

Pour configurer votre machine pour être un serveur sur le réseau local de l’école, ouvrez les Préférences de la machine (menu Pomme > Préférences Système) et sélectionnez Partage (sur ma machine elle est appelé Sharing parce que je fais partie de la force obscure anglophone ;-).

Ensuite, à l’intérieur des préférences de partage, activé la fonction Partage Web :

Notez qu’en bas de fenêtre, votre mac vous indique maintenant comment d’autres machines du réseau local (notre école, dans notre cas) peuvent accéder à votre machine et regarder vos pages web. Vous pouvez vous-même cliquer sur ce lien ou entrer ces chiffres dans la barre d’addresse de votre navigateur.

Il existe également une adresse standarde qui marchera sur toutes les machines de l’école pour regarder son propre dossier Sites : 127.0.0.1. Quand nous voulons regarder à quoi ressemble notre propre machine vis-à-vis les autres, c’est-à-dire quand nous voulons remplacer http://www.ecole-art-aix.fr, http://www.wikipedia.org ou http://www.zombo.com par quelque chose qui ressemblerait à http://notre-propre-machine, on peut taper 127.0.0.1 dans la ligne d’adresse de notre navigateur :

En tapant ces lignes, nous tombons sur une page standarde d’Apache (oui oui, je le sais, étant impérialiste de naissance ma machine est en anglais, mais votre page sera marquée en français).

Vous vous êtes peut-être déjà posé la question : où se trouve cette page ? Revenons alors à notre dossier Sites : dedans se trouve un fichier appelé index.html puis un dossier appelé images avec des images.gif à l’intérieur.

Si nous ne donnons pas de « sous-dossier » à notre adresse 127.0.0.1 notre serveur local nous donner ce fichier. Il s’agit du fichier « par défaut » que le serveur Apache donnera au navigateur, si celui-ci dans son barre d’adresse ne demande pas un fichier spécifique. Par exemple, si vous tapez http://www.whitehouse.gov cela revient à demander leur fichier index.html dans la racine de leur dossier site, autremment dit : http://www.whitehouse.gov/index.html

OVH

Une fois que nous avons mis en place notre configuration pour créer et tester des pages localement, il faut trouver une solution distante, c’est-à-dire un hébergeur Internet.

Voici une adresse pratique pour héberger vos contenus. Il s’agit d’un hébergeur qui n’est pas cher (1 euros par an pour la plus petit place sans base de données, 12 euros pour plus de place avec 1 base de données — ce qui sera nécessaire pour ce cours). Il permet donc d’avoir vos pages disponibles 24/24h avec toutes les sécurités de base contre les malfrats, pour peu de frais. Nous avons également un serveur expérimental http://hypermedia.loeil.org à l’école où vous pouvez placer vos pages temporairement. mais ce qui est essentiel avec une sérvice comme OVH, c’est que vous pouvez aussi y acheter votre propre nom de domaine, genre http://www.supercoolsite.com. Un pas essentiel vers l’autonomie. Voici l’adresse de cet « hébergeur » qui vous permettra tout cela :

- http://www.ovh.com

Une fois que vous avez acheté votre nom de domaine + espace-disque de votre serveur distant, vous pouvez commencer à y mettre des contenus qui seront par la suite publique. Si vous prenez le fichier index.html avec le sous-dossier images à côté de lui et le mettez sur le dossier du serveur d’OVH, il sera ensuite visible au publique chaque fois qu’on tapera http://www.supercoolsite.com (au d’autres noms de votre choix).

FTP = file Transfer Protocol

Comment transférer ces fichiers ? Bonne question.

Pour transférer vos fichiers, vous devez utiliser un programme spécialisé dans le transfert de fichiers de votre machine (à l’école) vers votre serveur distant (chez OVH). A l’école nous utilisons souvent le shareware Transmit, parce qu’il est joli, simple et pas cher. Il existe aussi de nombreux solutions dans le logiciel libre que vous trouverez sur http://www.versiontracker.com ou http://www.sourceforge.org.

Dans ce logiciel il faut utiliser le mot de passe que votre serveur distant vous a donné lors de l’achat de votre site. Puis vous n’avez à transférer (souvent par glisser-déposer) vos fichiers sur ce site distant.

Résumé

Avant de créer des pages web, il faut mettre en place un serveur de pages web, accompagné d’un dossier dédié à leur distribution. C’est une étape essentielle. Vous pouvez aussi vous servir de votre propre ordinateur comme serveur, pour tester vos pages web avant de les rendre public. N’oubliez pas que vous pouvez tester ces pages à l’intérieur de l’école, sur des machines Windows ou Linux en pointant leurs navigateurs vers l’adresse de votre machine (indiqué dans la fenêtre des préférences). Une fois l’ensemble prêt, vous pouvez le mettre sur un serveur public avec un nom de domaine spécifique à vous, voire à l’oeuvre.

Exercise

Achetez de la place sur un serveur Internet qui hébergera votre page web. Choissez également un nom de domaine (genre http://www.reallycoolbitchinart.org) chez ce fournisseur s’il ne vous donne pas un par défault (genre : http://tintin.free.fr). Habituez-vous d’entrée de jeu à comment ces achats se font en réalité. Vous trouverez sur http://www.ovh.com une formule permettant d’acheter un emplacement site pour un prix purement symbolique (1 euro par mois).


ESAAix - École supérieure d’art d’Aix-en-Provence - http://www.ecole-art-aix.fr