Arborescence et mise en ligne d un site. Quelques notions

(1)

1

Arborescence et mise en ligne

d’un site

Quelques notions…

(2)

2

De manière générale, il est essentiel d’organiser et de classer les fichiers qui se trouvent sur un support numérique (disque durs, clés usb, disque externe ou distant etc…)

Cette organisation est personnelle mais doit respecter quelques règles de bon sens (fichiers parents dans des dossiers identiques, noms de dossiers simples mais explicites…)

Une arborescence est un système de classement de données par hiérarchie.

Ce système sera utilisé pour l’organisation d’un site, et les mises à jour aisées.

o Arborescence

(3)

3

o Un exemple d’organisation simple

index.html

pages

page1.html page2.html

…

images

image1.jpg image2.jpg

…

style

style1.css style2.css

…

S‘il s’agit d’un site web, il est indispensable de placer un fichier index.html ou index.php dans la racine.

Ce sera le premier fichier lu par le navigateur

Les autres fichiers sont classés dans des dossiers en respectant une organisation cohérente

racine

(4)

4

Le codage des fichiers html et css devra tenir compte de l’arborescence du site et des chemins à suivre pour accéder à un fichier.

(href pour les liens, src pour les images, *.css et url() pour les feuilles de style) Sinon !!!

- pages introuvables

- images manquantes

- styles non appliqués

Pour pointer correctement vers un fichier cible, deux types d'écritures cohabitent, chacune avec leur spécificité propre :

- chemin relatif (absence de slash initial)

- chemin absolu (slash en préfixe du chemin)

o Arborescence d’un site

(5)

5

o Un exemple d’organisation simple Chemin relatif

pages/page1.html

On se trouve dans la racine. Le navigateur cherche la cible (page1.html) à partir du dossier dans lequel il se trouve

index.html

pages

…

images

…

style

…

racine

(6)

6

images/image1.jpg

On se trouve dans le dossier pages. Le navigateur cherche la cible (image1.jpg) à partir du dossier dans lequel il se trouve

index.html

pages

…

images

…

style

…

racine

(7)

7

pages/images/image1.jpg

Ou encore, de la racine, on appelle un fichier dans le sous-dossier images.

index.html

pages

…

images

…

style

…

racine

(8)

8

../index.html

Le navigateur cherche la cible (index.html) à partir du répertoire parent (on remonte d’un niveau).

index.html

pages

…

images

…

style

…

racine

(9)

9

../style/style1.css

Le navigateur cherche la cible (style1.css) à partir du répertoire parent.

index.html

pages

…

images

…

style

…

racine

(10)

10

../../style/style2.css

Le navigateur cherche la cible (style2.css) en remontant de plusieurs niveaux.

index.html

pages

…

images

…

style

…

racine

(11)

11

o Un exemple d’organisation simple Chemin absolu

Un chemin absolu ne tient pas compte de la position courante.

C’est le cas par exemple des liens vers les sites web : href = ’’ http://isnfeuillade.zz.mu/index.html’’

index.html

pages

…

images

…

style

…

racine

(12)

12

/style/style1.css

Le slash initial précise que l'on ne se réfère plus à

l'emplacement courant mais que l'on remonte directement à la racine pour ensuite préciser le chemin complet.

index.html

pages

…

images

…

style

…

racine

(13)

13

ATTENTION !

Si vous testez sur votre pc, le slash vous fera remonter à la racine de votre disque dur…

index.html

pages

…

images

…

style

…

racine

(14)

14

o Application Chemin relatif

L’exercice comporte un certain nombre de fichiers organisés en dossiers. Tous les fichiers et dossiers sont téléchargeables.

Il est suffisamment simple pour permettre de dessiner tout d’abord son architecture au brouillon.

En utilisant ce qui a été appris sur les liens relatifs, rendre le site fonctionnel.

Les fichiers et dossiers ne doivent pas être déplacés ni renommés, on ne pourra modifier que les liens dans les attributs href et url().

Une fois notre magnifique site fonctionnel, nous verrons comment le mettre en ligne pour changer la face du Monde !!!

(15)

15

TADAAAM !!!

(16)

16

o Mise en ligne d’un site

Cette opération est relativement simple si votre site ne comporte que des pages html et css.

Plus complexe si par exemple, le site nécessite l’activation d’une banque de données dans le cas d’un forum par exemple.

Pour mettre en ligne son site, il faut utiliser un ftp : File Transfer Protocol.

Le ftp permet notamment de communiquer d’un ordinateur à un autre sur un réseau afin de transférer ou supprimer des fichiers. Ce transfert se fait dans les deux sens

(17)

17

(18)

18

Dans la pratique, un logiciel (ou client ftp) est nécessaire pour établir ce protocole. FileZilla par exemple est gratuit et

parfaitement fonctionnel aussi bien sous PC que sous MAC.

Il en existe de nombreux autres…

Il faut aussi un serveur web qui hébergera le site en question. Il en existe certains qui sont gratuits, mais dont l’espace mémoire

alloué à l’utilisateur sera restreint (quelques dizaines de Mo) ce qui peut s’avérer parfois insuffisant.

Une fois inscrit sur un site d’hebergement, vous aurez un identifiant et un code d’accès

(19)

19

Il sera possible de transférer des fichiers dans un sens ou dans l’autre

(20)

20

On transfère sur l’hébergeur la totalité des fichiers et des dossiers, en veillant qu’à la racine se trouve le fichier

index.html ou index.php

(21)

21

On teste ensuite le comportement du site dans différents

navigateurs en corrigeant les erreurs d’affichage ou les problèmes de compatibilité qui ne manqueront pas d’apparaître.

Mais ceci est une autre histoire…