Comprendre le Web

Conseils pour créer un site

Tout site devrait être designed for smartphones

Parties d'un site

  1. Sans interactivité (= site statique, le HTML suffit).
    • Un site (vitrine) est un ensemble de pages web structuré en dossiers.
  2. Avec interactivité (= site dynamique, requiert le PHP-MySQL)
    • Le blog présente, sur la page d'accueil, le dernier article écrit. Les visiteurs peuvent les commenter. Les CMS permettent également la gestion de plusieurs rédacteurs. Exemple classique : Partis politiques
    • Dans un forum, ce sont les visiteurs qui prennent l'initiative. Ils posent leurs questions. La FAQ d'un site peut pointer vers un forum. Exemple classique : Site d'un développeur, constructeur, ...
    • L'espace client donnant accès à des informations privées sur des sites d'administration, de banques, d'ASBL, de commerce en ligne, ...
    • ...

Un site peut avoir, à la fois, une partie statique et des parties dynamiques : un espace-client, un blog, un forum, ...

Pré-requis

Recommandations

Bonnes pratiques du web mobile

"Designed for smartphones"

Le code doit être parfait (car les navigateurs pour smartphones sont des versions "light" et ils sont donc moins tolérants)

Le logiciel GIMP permet d'exporter (convertir) des *.jpg en *.webp. Pratiquement, cette conversion n'est intéressante que si la taille du fichier .jpg est supérieure à 30 Ko.

Bien structurer le site

/ (racine du site)

= fichiers ressource pour tout le site
= fichiers qui ne subissent pas de modification :

w3P.css, w3P.js,
401.html, 403.html, 404.html, 500.html,
alert.gif, travaux.gif, web.gif,
favicon.ico,
htaccess.txt, robots.txt, sitemap.xml
index.htm,
navBarMobile.txt, navBarPC.txt

Le fichier htaccess.txt, .htaccess sur le serveur, car il :

Le fichier index.* redirige vers fr/index.*
<meta http-equiv="refresh" content="0;fr/index.php" />

La présence de ce fichier empêche le listing des fichiers du dossier (au cas où le fichier .htaccess (sur le serveur) serait absent ou corrompu). Le but de ce fichier est aussi de rediriger (au cas où). Si, par impossible, ces deux buts ne sont pas atteint, le contenu de ce fichier index.* affichera le plan du site. Ce plan est destiné aux robots (qui n'utilisent pas le JavaScript) => ne requiert pas le JavaScript Ce plan est un copier/coller du "corps" du fichier fr/planSite.htm

Les fichiers - navBarMobile.txt, navBarPC.txt - sont du code HTML qui sera injecté dynamiquement (via du JavaScript) => les pages des dossiers /fr (/dev, /zAAAAMMJJ) requièrent le JS. Ils servent à afficher les barres de navigation. Rappel : Une seule barre de navigation sera affichée en fonction de la taille de l'écran (cfr style.css)

Les fichiers - 401.html, 403.html, 404.html, 500.html - n'utilisent que le(s) CSS de la racine. Le fond est volontairement gris

Le fichier - robots.txt - donne des instructions aux robots. 

User-agent: *
Allow: /fr/

Sitemap: http://www.monsite.com/sitemap.xml

Le fichier - sitemap.xml - donne les URLs des pages à visiter. 

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.monsite.com/fr/index.php</loc>
    <lastmod>2019-03-30</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://www.monsite.com/fr/planSite.htm</loc>
    <lastmod>2019-03-30</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  ...
</urlset>

Ce fichier peut être créé automatiquement notamment avec le programme Xenu's Link Sleuth (TM)

/fr

Le fichier planSite.htm est celui pointé par le lien des balises <noscript> contenu dans chaque page web.
<noscript><a href="planSite.htm">Plan du site</a></noscript>

- une page d'accueil
- une page "conditions d'utilisation"
- une page "mentions légales"
- une page contact (formulaire) => PHP
- ...

Ce dossier peut disposer de son propre fichier CSS et JS, liés à chaque fichier HTML ou PHP. Ainsi, l'apparence de toutes les pages web de ce dossier peut facilement être modifié.

/dev

= /fr en cours de développement => Ce dossier /dev DOIT être au même niveau hiérarchique que /fr (=avoir le même parent). Ainsi, les liens vers ressources sont les mêmes.

= dossier protégé par htaccess/htpasswd

Ce dossier peut disposer de son propre fichier CSS et JS, liés à chaque fichier HTML ou PHP. Ainsi, l'apparence de toutes les pages web de ce dossier peut facilement être modifié.

/res

Ce dossier contient les dossiers contenant les fichiers ressources

/img

= dossier ressources = fichiers images
NB : dont les versions légères (pour smartphones)
Ce dossier peut contenir des sous-dossiers : /webp, /jpg, /png, /gif, /svg, ...

/docu

= dossier ressources = fichiers documents
Ce dossier peut contenir des sous-dossiers : /pdf, /xls, /doc, ...

/audio

= dossier ressources = fichiers audio
Ce dossier peut contenir des sous-dossiers : /mp3, ...

/video

= dossier ressources = fichiers vidéo
Ce dossier peut contenir des sous-dossiers : /mp4, ...

/adm

= dossier pour les administrateurs (de l'asso, le webmaster)

Le fichier index.htm protège le dossier

Le fichier infoSite.htm permet de signaler des bugs, de consulter les statistiques (et logs), de gérer une "alerte", vérifier le fonctionnement de l'envoi de courriels, vérifier le code via validator de W3C, voir des aperçus sur smartphone, consulter le développement en cours, les archives, consulter le PHP utilisé et autres caractéristiques du site.
NB : Les fichiers style.css et update.js sont propres à chaque dossier

Ce dossier peut disposer de son propre fichier CSS et JS, liés à chaque fichier HTML ou PHP. Ainsi, l'apparence de toutes les pages web de ce dossier peut facilement être modifié.

/zAAAAMMJJ

= dossiers qui sont des copies du dossier /fr
Ces dossiers doivent avoir le même parents que /fr (pour conserver la validité des liens)

/zTmp

= dossier temporaire qui permet de recueillir des dossiers et fichiers d'un dossier du serveur pour les renvoyer vers un autre dossier du serveur

Typiquement utilisé pour récupérer le dossier /fr du serveur, le renommer (en zAAAAMMJJ) sur le disque dur, puis le renvoyer sur le serveur sous son nouveau nom (zAAAAMMJJ).

/no_web

= dossier qui contient des sous-dossier et des fichiers qui restent sur le disque dur.

/deep

= dossier qui contient des sous-dossier et des fichiers accessibles depuis internet ET inconnus théoriquement des moteurs de recherche.

Attention, les pages ciblées connaîtront l'URL de la page qui les cible
=> Pratiquement, ce dossier doit être protégé par un .htaccess

.htaccess

Le fichier spécial .htaccess (sur des serveurs Apache) permet de fournir des instructions au serveur.

Il peut se trouver dans tout dossier.

Contenu classique de celui situé à la racine du site : 

# pour le répertoire / (racine du site)
DirectoryIndex index.php index.html index.htm 404.html

# protection de la lecture des répertoires n'ayant pas de fichiers index.(htm,html,php)
 Options -Indexes

# "ErrorDocument" à placer avec les "redirect"
ErrorDocument 404 https://www.monsite.be/404.html
ErrorDocument 403 https://www.monsite.be/403.html
ErrorDocument 500 https://www.monsite.be/500.html
ErrorDocument 401 https://www.monsite.be/401.html

# redirection (permanente)
redirect 301 /index.php https://www.monsite.be/fr/index.php

Ci-dessus,

Ne pas oublier le "s" après chaque "http".

Plus d'info : Apache > fichiers .htaccess (tutoriel)

Ce fichier peut travailler aussi en binôme avec .htpasswd pour protéger un dossier.

Exemple de contenu du fichier .htaccess (dans le dossier /dev) : 

# Ce fichier doit être codé en ANSI (à cause des caractères accentués)
AuthType Basic
AuthName "Développement en cours"
AuthUserFile /xxxxxxxxxxxx/.htpasswd
AuthGroupFile /dev/null
Require valid-user

où xxxxxxxxxxx = nom du dossier sur le serveur contenant ce fichier .htpasswd

Le fichier spécial .htpasswd (sur des serveurs Apache) contient les mots de passe cryptés des utilisateurs autorisés à accéder aux fichiers de ce dossier (et sous-dossiers)

Exemple de contenu du fichier .htpasswd (dans le dossier /dev) : 

thibaut:$apr1$9DZBbdxy$moshiWi2Gg50x3fC4sB6b/

Le nom de l'utilisateur est non crypté et, est suivi - après les deux points (:) - par son mot de passe.

htaccesstools.com

Ces fichiers sont souvent nommés htaccess.txt et htpasswd.txt sur son disque dur, puis renommés .htaccess et .htpasswd sur le serveur (avec FileZilla).

Page classique

Structure d'une page classique : 

<!DOCTYPE html>
<html lang="fr-BE" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE">
  <head>
    <meta charset="UTF-8" />
    <meta name="robots" content="index, follow" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../w3P.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" href="../favicon.ico" type="image/x-icon" />
    <title>
      Titre
    </title>
  </head>
  <body>
    <noscript><a href="planSite.htm">Plan du site</a></noscript>
    <div id="pub"></div>
    <div id="container">
      <header id="titre">
        Titre
      </header>
      <nav id="navBarPC" data-w3-include-html="../navBarPC.txt" class="w3-green no_print"></nav>
      <nav id="navBarMobile" data-w3-include-html="../navBarMobile.txt" class="w3-green no_print">
      </nav>
      <main class="article w3-container">
        ...
      </main>
      <footer id="pied"></footer>
    </div><script src="../w3P.js">
</script><script src="update.js">
</script>
  </body>
</html>

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" /> permet au contenu de s'adapter à la taille de l'écran.

<noscript><a href="planSite.htm">Plan du site</a></noscript> afficher un lien en haut de la page si le JavaScript est désactivé.

data-w3-include-html est un attribut qui permet d'inclure du code HTML comme contenu de sa balise. Requiert w3.js

<main>...<main> = partie utile de la page (pour les robots)

Images adaptatives

Largeur de l'écran = px 
<figure class="w3-center no_print" style="margin:0px">
  <picture>
    <source media="(max-width: 640px)" srcset="imgXXX320.webp">
    <source media="(max-width: 960px)" srcset="imgXXX640.webp">
    <source media="(max-width: 1280px)" srcset="imgXXX960.webp">
    <source media="(min-width: 1281px)" srcset="imgXXX1280.webp">
    <img src="imgXXX640.webp" alt="">
  </picture>
  <figcaption>
    Largeur de l'écran = <span id="largeurEcran"></span>px
  </figcaption>
</figure>

La balise <img> doit être le dernier enfant de <picture>. qui peut être l'enfant de <figure> et dernier enfant <figcaption>

max-width => y compris la valeur indiquée
CSS max-width

Sur les images adaptatives 

        img { /* permet une transition douce en cas de changement d'image */
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

Media queries 

Smartphones                 320 à 480   (max-width: 480px)
De smartphones à tablettes  481 à 767   (max-width: 767px)
Tablettes à petits écrans   768 à 979   (min-width: 768px) and (max-width: 979px)
Ordinateurs                 980 à 1199  -
Écrans larges               1200 et plus  (min-width: 1200px)

/* Mise en page pour mobile */
@media (max-width: 480px) { ... }

/* Mise en page pour tablettes */
@media (max-width: 767px) { ... }

/* Mise en page pour les grands écrans */
@media (min-width: 1200px) { ... }

w3.CSS avec smartphones

L'événement survol de la souris n'a aucun sens sur un smartphone (car il n'existe pas de souris). Ainsi, les class w3-hover-* sont sans intérêt.

JavaScript avec smartphones

Certains événements JS n'ont pas de sens sur un smartphone : par exemple mouseover et mousemove ne réagissent pas car le mouvement du doigt sur l'écran fait défiler la page, dblclick ne se déclenche pas... tapoter deux fois déclenche en général un zoom.

Reférencement