Réalisation du site web

La réalisation d'un site web commence toujours par la création d'un dossier contenant ce site. Toute la suite va se passer dans ce dossier.

Elaboration de la charte graphique

Ce point a déjà été vu lors d'une précédente séance, avec notamment la mise au point et l'utilisation d'une feuille de style.

De nombreux sites fourmillent d'idées de présentation utilisant des feuilles de style, comme http://www.creativejuiz.fr/ ou http://www.w3.org/Style. N'hésitez pas à vous en inspirer, en faisant toujours attention, quand vous récupérez un code source d'une page sur le Web, de comprendre ce qu'il fait avant de l'utiliser.

Mais la charte graphique contient aussi les conventions entre les réalisateurs du site quant au nommage des pages et à la navigation dans ce site.

L'organisation du site

Il est habituel de convenir de mettre toutes les images dans un ou quelques dossiers. Par exemple, les icones seront dans un dossier icones et les photos du voyage dans un dossier photos, ou bien simplement toutes les images (icones et photos) seront dans un dossier images.

Par exemple, mettons deux images de drapeaux drapfr.jpg et drapen.jpg dans le dossier images.

La gestion de plusieurs langues

Par exemple, si l'on veut faire un site bilingue, un choix simple consiste à associer à chaque page d'une langue une page traduite dans l'autre langue. Il est alors nécessaire de se mettre d'accord sur la manière de nommer les pages et le mode de navigation.

Dans notre cas, où on cherche à réaliser un site en Français et son double en Anglais, on peut convenir par exemple d'ajouter fr aux noms des pages en Français et en aux noms des pages en Anglais, et de mettre un lien autour d'une image de drapeau.

Ainsi, dans la page en Français accueilfr.html, on mettra le lien de navigation: 

<a href="accueilen.html"><img src="images/drapen.jpg" alt="English Language"/></a>
Exercice
Quel lien faut-il mettre dans la page en Anglais accueilen.html?

Les liens de navigation

Un moyen simple de naviguer entre les pages d'un site est de mettre sur chaque page un menu permettant d'aller vers les autres pages, comme dans l'exemple du tutoriel du W3C.

Ce menu devra se trouver sur toutes les pages. Pour cela, deux moyens:

  • inclure son source dans celui de chaque page: c'est simple, mais il faut penser à l'actualiser à chaque mise à jour par le webmaster.
  • le mettre dans un fichier et inclure ce fichier en utilisant un cadre.

Supposons par exemple que l'on ait mis le menu dans un fichier menu.html. Il faudra mettre dans toutes les pages le lien suivant: 

<iframe src="menu.html">Votre navigateur ne gère pas les cadres.</iframe>
Exercice
Que peut-on ajouter pour que l'utilisateur dont le navigateur ne gère pas les cadres puisse quand même voir le menu?

Faire apparaitre des bulles de commentaire

De nombreuses balises HTML possèdent une propriété title qui permet de faire afficher par les navigateurs une information lorsque le pointeur passe "au dessus" (sans cliquer) de l'élément correspondant.

Cependant, les dernières spécifications du langage HTML n'encourage pas trop l'utilisation de cette balise, car certains navigateurs (notamment ceux des smartphones ou tablettes) ne les affichent pas.

Présentation d'un diaporama

Il est fréquent de présenter un diaporama sous la forme d'une video de ce diaporama. Les séquences video forment souvent des fichiers très volumineux qu'il peut être long de télécharger.

Jusqu'en HTML4, la séquence video était un élément emboité (embedded en Anglais): 

<embed type="application/x-mplayer2" 
       src="diaporama.wmv" 
       autostart="true" 
       controller="false" 
       height="400" width="900">

Mais, si la machine qui visionne la page (le client) ne contient pas l'application demandée, la séquence video ne sera pas affichée dans le navigateur client.

Avec HTML5, est apparue la balise video qui permet de proposer plusieurs choix au navigateur client, qui choisira ainsi un format qu'il connait.

Ainsi, en utilisant des formats standards comme mpeg4 ou ogg, qui peuvent être lus par la plupart des navigateurs, nous obtiendrons par exemple: 

<video width="900" controls preload>
<source src="diaporama.mp4" type="video/mp4" />
<source src="diaporama.ogg" type="video/ogg" />
  Votre navigateur ne gère pas la balise <code>video</code>.
</video>

La conversion d'un format video à l'autre peut être faite facilement avec des outils comme VLC.

La suite

retour à la page de l'ECUE

Cette page est en cours de constitution. Faites moi part de vos remarques à : Joël Quinqueton