Quelques indications sur la construction de ce site

Si la police de caractères affichée ne vous convient pas, pressez simultanément Ctrl et le "+" du pavé numérique pour l'augmenter ("-" pour la diminuer) avec Mozilla, ou faites Ctrl et tourner la molette de la souris avec Internet Explorer. (Ne marche pas toujours : dépend de la configuration du navigateur.)

Le CSS pour la mise en forme : experience
Le JavaScript pour les menus déroulants
Le PHP

Le CSS pour la mise en forme : experience

À l'exception du retour du formulaire (qui se trouve sur la page signaler un bug), tout le site utilise le PHP (PHP : Hypertext Preprocessor, acronyme récursif), d'où l'extension ".php" des URL. Pour la mise en forme, comme indiqué dans la page normes, l'utilisation des feuilles de style CSS (Cascading Style Sheets : feuilles de style en cascade) est ominiprésente.

Cela m'a particulièrement compliqué la tâche dans la mesure où je n'y connaissais rien au départ. Aujourd'hui ça va un peu mieux, même si - c'est sans doute le plus important à retenir - le CSS me paraît toujours un peu mystérieux. Je suis loin d'en maîtriser les subtilités, et même certaines grosses ficelles m'échappent encore. J'ai réussi à faire peu ou prou ce que je voulais, moyennant beaucoup d'essais et de tâtonnements, le résultat escompté arrivant quelquefois par surprise. Comme disait je ne sais plus trop qui : "Si je suis étonné que ça ne marche pas toujours, je suis parfois consterné que ça marche bien"...

Cela étant dit, le respect des standards web m'est apparu d'une importance capitale dès que j'ai eu connaissance de leur existence. Je ne rentrerai pas dans les détails dans la mesure où tout est déjà (bien) expliqué par les pros du domaine (taper par exemple "standards du web" dans un moteur de recherche et consulter les dix ou quinze premières réponses... ). Pour les curieux, voici présentés succintement quelques avantages et bienfaits de l'utilisation du CSS et du respect des standards :

Le problème que j'ai rencontré avec le CSS est que si les grandes lignes de la théorie sont simples, on se heurte à plusieurs barrières dès qu'on essaye de faire quelque chose ! Les points suivants sont particulièrement rebutants pour le non initié :

Je suis conscient que ce site est loin d'être un modèle d'accessibilité et de respect des standards en général. Ce n'était pas mon souci premier lorsque j'en ai commencé la construction, vu que le contenu principal, au moins pour l'instant, sont les photos. Non pas qu'il soit interdit aux personnes présentant un handicap visuel de les regarder, mais je pense que la démarche pour rendre le site immédiatement accessible aurait retardé encore la publication des premières images (prévue initialement pour avril 2004...). Mais comme à terme, le contenu "informationnel" textuel augmentera, il sera trop tard pour se poser la question de l'accessibilité si rien n'a été fait auparavant...

Je suis donc preneur de toute information sur tous les sujets que je viens d'évoquer et qui me permettraient d'améliorer le site dans le sens de l'accessibilité et des standards. Je suis également friand d'explications concernant mon code CSS principal (clic droit et "enregistrer la cible sous" pour copier la page sur son ordinateur par exemple). J'ai essayé de le commenter un peu, bien qu'il n'y ait pas grand chose à dire. Ça marche en général, mais je ne sais pas toujours à quoi servent les éléments utilisés ou si ma façon de faire est correcte du point de vue sémantique et philosophie du CSS. Avis aux bonnes âmes et aux connaisseurs !

 
Haut de la page
 

Le JavaScript pour les menus déroulants

Le menu déroulant utilisé sur le site est inspiré de plusieurs choses vues sur le Web. Beaucoup de sites proposent un menu déroulant, mais aucun ne m'a séduit complètement car tous utilisaient des techniques lourdes à un endroit ou un autre, et la plupart ne géraient pas les "sous-sous-menus" (i.e. les sous-menus des sous-menus ;-)). J'ai donc puisé à droite et à gauche et me suis construis, très laborieusement, mon menu déroulant, apprenant les rudiments du JavaScript en étudiant le code des menus que je trouvais sur Internet. Il existe des menus déroulants qui n'utilisent que le CSS. Revers de la médaille, ils ne fonctionnent pas sous Internet Explorer, celui-ci étant rétif à certaines "instructions" en avance sur leur temps. Ou bien ils ne passent pas le validator du W3Cen...

Voici le code JavaScript principal. Il est largement commenté (le poids du fichier a dû doublé !!), mais il se peut qu'il reste des zones d'ombre ici ou là... Faites comme moi encore aujourd'hui : creusez-vous la tête ;-) ! Je pense qu'il est facile d'adapter le script pour faire des sous-sous-sous-menus, mais au prix d'une multiplication des fonctions d'affichage ou d'une paramétrisation un peu plus lourde de leur code. Cependant, des menus de ce genre existent déjà pour qui la validation du code n'est pas un souci. Chacun voit midi à sa porte... Par ailleurs, un menu alternatif est proposé si le JavaScript est désactivé. Vous pouvez le tester en désactivant vous-même le JavaScript dans votre navigateur.

 
Haut de la page
 

Le PHP pour les photos

J'étais un peu frileux concernant l'utilisation du PHP pour le site. Je ne tenais pas à ajouter un "langage" de plus, après le HTML, le CSS et le JavaScript. Or les "galeries photos" s'y prêtent très bien. Voici donc, à l'intention de ceux qui désirent réaliser ce genre de pages, de quoi il retourne exactement...

Tout d'abord un petit rappel. Avec le HTML, on réalise des pages statiques. Ceci a pour conséquence, par exemple, que même si deux pages ne diffèrent que de quelques éléments placés au même endroit, il sera nécessaire de réaliser deux fichiers avec des noms différents (on exclut ici l'usage de tout langage de script !). Ainsi pour montrer 500 photos, il faudra 500 fichiers ne différant que par le nom de la photo, son titre, sa date, etc. Ça fait un peu beaucoup, mais certains sites (présentant des photos par ailleurs fort intéressantes, comme le wolkenatlasde - site photos consacré aux nuages et autres phénomènes météorologiques), sont construits ainsi.

Le PHP permet de "dynamiser" un tel site dans le sens suivant. En autorisant le passage de paramètres à une page par l'intermédiaire de son adresse et du caractère point d'interrogation "?" (cf. une adresse du genre showphoto.php?nom=ci0001), on peut commencer à envisager un affichage qui sera différent suivant le lien qui active la page. Ainsi, le lien ci-dessus montrant la photo dont le fichier porte le nom "ci0001" (première photo de nuages du genre "Cirrus") n'existe-t-elle pas sur les disques durs qui hébergent le site. On dit qu'elle est générée à la demande de l'internaute lorsqu'il clique sur le lien qui l'active.

Il existe en fait un "prototype" de page d'affichage des photos. Ce "prototyp" génère, quand l'utilisateur en fait la demande, des pages "virtuelles" pour montrer les différentes photos. Ces pages sont fabriquées par le serveur qui héberge le site (cet hébergeur doit autoriser l'utilisation du langage PHP, comme c'est le cas de free : voir la page des questions fréquemment posées de "free"fr pour plus de détails). On dit que le script PHP est interprété "côté serveur". Le poste de l'internaute reçoit le code d'une page où tout le PHP a été "traduit" ou "transformé" en HTML. C'est un avantage par rapport à des langages "traduits" par la machine de l'internaute ; en effet, il n'est pas nécessaire d'activer une quelconque option sur son navigateur puisqu'il ne reçoit que du code HTML. Par exemple, si vous désactivez JavaScript sur votre ordinateur, ou s'il n'a pas été installé du tout (c'est le cas avec les anciennes versions des navigateurs, même les plus connus), une page utilisant et abusant de JavaScript devient illisible, alors qu'une page utilisant du PHP est lisible sans problème... Revers de la médaille avec le PHP, il faut, pour tester un site en train d'être développé, installer un serveur capable de traduire le PHP sur sa machine personnelle. Mais c'est chose aisée et entièrement gratuite aujourd'hui sous Windows (avec par exemple EasyPHPfr) et Linux, et c'est probablement le cas aussi pour pas mal d'autres systèmes.

Pour bien voir la différence entre le code existant et le code envoyé par le serveur au navigateur, voyons ce qui se passe si le surfeur affiche chez lui le code source de la page showphoto.php?nom=ci0001 dont l'extension est ".php". Il voit quelque chose ressemblant à :

<br /><br />
<p class="boutonsretour">
<a href="photosaccueil.php?sujet=meteo" title="Accueil meteo">Accueil Meteo</a>
  
<a href="galerie.php?nom=cirrus" title="Retour accueil cirrus">Cirrus</a>
<br />
<span class="fleche" title="Photo précédente" href="showphoto.php?nom=&theme=cirrus">        </span>
<a class="fleche" title="Photo suivante" href="showphoto.php?nom=ci0002&theme=cirrus">----></a>
</p>
<div class="grandeh">
<a style="text-decoration:none;" href="showphotoBig.php?nom=ci0001&theme=cirrus"><img style="width:500px"
    src="photos/meteo/grandes/ci0001.jpg" alt="photo : ci0001" /></a>
</div>
<div class="titrephoto">
Cirrus uncinus (Ci unc) majoritaires, Cirrus fibratus (Ci fib)
</div>
<br />
<div id="tableauphoto">
    <table border="border">
        <tr>
            <th> Date </th>
            <th> Lieu </th>
            <th> Commentaires </th>
        </tr>
        <tr>
            <td> 11/03 08h30 </td>
            <td> École Nationale Météo. </td>
            <td>   </td>        </tr>
    </table>
<br />
</div> <!-- tableauphoto -->

...

C'est du pur HTML (+ CSS). Voici en fait ce qui a été écrit en PHP et qui est vu réellement par le serveur :


echo "<br /><br /><p class=\"boutonsretour\">" ;
if ($donnees['chemin'] != "") {
   echo "<a href=\"photosaccueil.php?sujet=$accueil\"
   title=\"Accueil $accueil\">Accueil ".ucfirst($accueil)."</a>  " ;
} ;
echo "<a href=\"galerie.php?nom=$theme\"
title=\"Retour accueil $theme\">".ucfirst($theme)."</a><br />" ;

/// AJOUT DU 28/03 :
/// Si le chemin est vide, c'est qu'il correspond en fait au $theme (et le chemin
/// est une donnée nécessaire alors on lui donne une valeur :
if ($donnees['chemin'] == "")
{
  $donnees['chemin'] = $theme ;
} ;
/// FIN AJOUR 28/03 - TESTE, OK LE 28/03

// Bloc pour l'affichage des flèches "photo suivante/précédente"
// Variable auxilliaire contenant les noms des photos précédente et suivante :
$photoPrecedente = "" ;
$photoSuivante = "" ;
// $index vaut 2 si la photo lue dans la base est <> de la photo affichée, 1 si
// les 2 photos sont les mêmes et 0 si la photo lue est la suivante de l'affichée
$index = 2 ;

// Lecture de la base de données :
$reponse2 = mysql_query
(
  "SELECT nom
  FROM photos
  WHERE theme2 = '$theme' OR theme1 = '$theme'
  ORDER BY nom"
) ;

// Utilisation des données extraites :
while($donnees2 = mysql_fetch_array($reponse2) and $index > 0)
{
  // si la photo extraite n'est pas la photo affichée dans cette page on "incrémente
  // $photoPrecedente avec le nom de cette photo extraite :
  // si $index vaut 1 on vient de dépasser la photo affichée dans la page
  if($index == 1)
  {
            // alors la photo suivante est la photo extraite à ce moment :
            $photoSuivante = $donnees2['nom'] ;
            // et on met $index à 0 pour sortir de la boucle :
            $index = 0 ;
  }
  // sinon on teste si la photo extraite est la photo affichée :

  elseif($donnees2['nom'] != $nom)
            // si ce n'est pas le cas, on "incrémente" $photoPrecedente :
            $photoPrecedente = $donnees2['nom'] ;
  else $index = 1 ;
} ;

// Affichage des boutons "précédent/suivant" et ancrage si nécessaire :
if($photoPrecedente != "")
{
  echo "<a class=\"fleche\" title=\"Photo précédente\"
  href=\"showphoto.php?nom=$photoPrecedente&theme=$theme\"><----   </a>" ;
}
else
{
  echo "<span class=\"fleche\" title=\"Photo précédente\"
  href=\"showphoto.php?nom=$photoPrecedente&theme=$theme\">        </span>" ;
} ;


// Affichage bouton "suivant" si nécessaire :

if($photoSuivante != "")
{
  echo "<a class=\"fleche\" title=\"Photo suivante\"
       href=\"showphoto.php?nom=$photoSuivante&theme=$theme\">----></a>" ;
}
else
{
  echo "<span class=\"fleche\" title=\"Photo suivante\"
       href=\"showphoto.php?nom=$photoSuivante&theme=$theme\">     </span>" ;
} ;
echo "</p>" ;

// Affichage de la photo en utilisant la classe liée à son format h ou v :
// On commence par déterminer les dimensions à utiliser suivant le format de la photo :
$size = getimagesize("photos/".$donnees['chemin']."/grandes/$nom.jpg");
// le tableau $size contient hauteur, largeur en premiers éléments :
$largeur = $size[0] ;
$hauteur = $size[1] ;
// On adapte le format a afficher suivant la taille de l'image
if ($donnees['format'] == "h") {
   if ($largeur > 1.9 * $hauteur) $largeur = 600 ;
   else $largeur = min($largeur, 500) ;
}
else $hauteur = min($hauteur, 400) ;

echo "<div class=\"grande".$donnees['format']."\">" ;
echo "<a href=\"showphotoBig.php?nom=$nom&theme=$theme\"><img " ;
if ($donnees['format'] == "h") echo "style=\"width:".$largeur."px\" " ;
// ici on utilise un style en ligne, dynamiquement avec variables $hauteur définie plus haut :
else echo "style=\"height:".$hauteur."px\" " ;
echo "src=\"photos/".$donnees['chemin']."/grandes/$nom.jpg\" alt=\"photo : $nom\" /></a>" ;
echo "</div>" ;
// Fin affichage photo

// Affichage du titre de la photo :
echo "<div class=\"titrephoto\">".$donnees['titrelong']."</div><br />" ;

// FIN DE LA TRANSACTION MYSQL :
mysql_close() ;

?>

<div id="tableauphoto">
    <table border="border">
        <tr>
            <th> Date </th>
            <th> Lieu </th>
            <th> Commentaires </th>
        </tr>
        <tr>
            <?php
            echo"<td> ".$donnees['date']." </td>
            <td> ".$donnees['lieu']." </td>
            <td>  ".$donnees['commentaire1']." " ;
            // si existe une ligne de commentaire supplémentaire on l'affiche :
            if($donnees['commentaire2'] != "")
            {
                echo " <br /> ".$donnees['commentaire2']." " ;
            } ;
            echo "</td>" ;
            ?>
        </tr>
    </table>
<br />
</div> <!-- tableauphoto -->

...

Heureusement que le code PHP n'apparait pas en clair chez l'internaute : des données très sensibles peuvent y être écrites, comme les login et mot de passe d'accès à la base de données utilisée pour stocker les informations relatives aux photos.

Car c'est là un autre grand intérêt du PHP : sa facilité d'utilisation des bases de données. En effet, les informations concernant chaque thème/pays, ainsi que chaque photo du site, sont stockées dans une base de données MySQL (page de l'encyclopédie en ligne "WikipédiA" sur MySQLfr) d'utilisation très intuitive avec son intégration dans EasyPHP : aucun code SQL n'est à écrire pour la créer... Elle est utilisée lors de chaque accès aux galeries pour récupérer les noms des fichiers à afficher, les informations sur les photos (titre, date de prise de vue, lieu, commentaire). À terme, elle pourra être utilisée pour faire des recherches de photos selon des critères choisis par l'utilisateur. Par exemple, on pourra demander à voir toutes les photos prises entre telle et telle date, ou dont le nom contient "pyramide", etc. Cette fonctionnalité n'est pas encore disponible sur ce site, et ne le sera pas avant quelques temps, mais l'internaute l'a déjà probablement utilisée à maintes reprises sur d'autres sites (peut-être codé dans un autre langage que PHP).

L'utilisation du PHP permet bien d'autres choses encore (travail sur les cookies, l'authentification, etc.), et c'est un langage orienté objet (la version 5 implémante un nouveau "modèle objet", pour ceux à qui ça dira quelque chose...). Sur ce site, j'ai utilisé entre autres choses la possibilité d'inclure des fichiers dans le code HTML. Ceci permet de faire apparaître le menu déroulant sur plusieurs pages différentes sans avoir à l'écrire effectivement dans les différents fichiers. Il figure sur le fichier menu (fichier JavaScript) qui est appelé par la commande "include" :


<?php
include("menu.js") ;
?>

Voilà. J'espère que ce petit aperçu n'est pas truffé de bourdes (sinon, n'hésitez pas à me le signaler par l'intermédiaire de la page signaler un bug), et surtout qu'il aura permis à certains internautes de se faire une idée du fonctionnement des outils utilisés sur le site...

 
Haut de la page