- Parties d'un site
- Pré-requis
- Recommandations
- Designed for smartphones
- Bien structurer le site
- .htaccess
- Page classique
- Images adaptatives
- JavaScript on smartphones
Parties d'un site
- Sans interactivité (= site statique, le HTML suffit).
- Un site (vitrine) est un ensemble de pages web structuré en dossiers.
- 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
- Avoir suivi le mini-cours consacré au HTML
- Avoir suivi le mini-cours consacré au CSS
- Avoir suivi le mini-cours consacré au JS
Recommandations
- Bien structurer le site
- Utiliser des fichiers .htaccess dans des dossiers
- Et, à la racine du site : robots.txt et sitemap.xml
- Le nom des fichiers et des dossiers ne doivent contenir aucun espace et/ou caractères spéciaux.
-
Page classique
- Écrire le code en XHTML et indiquer, dans le code, l'encodage utilisé
(UTF-8).
Puis, enregistrer le fichier dans cet encodage. - Pour faciliter la mise à jour de chaque page, la lier à un fichier CSS et un fichier JS
- Utiliser le w3.CSS et w3.JS (ou équivalents)
- Structurer la page web et utiliser des balises sémantiques
<main>partie principale de la page</main>
= hors entête, barre de navigation, publicité, pied de page, ...
- Écrire le code en XHTML et indiquer, dans le code, l'encodage utilisé
(UTF-8).
- Proscrire :
- les "graphiques" pour espacer.
- les "frames"
- le défilement horizontal (pour lire le texte)
- Les événements liés au survol de la souris (tel que le
changement de couleur)
car il n'existe pas de souris sur un smartphone ou une tablette.
- Éviter :
- les images mappées
- les images d'arrière-plan (qui rendent le texte illisible)
- S'assurer que les informations transmises par les couleurs le sont également lorsque les couleurs sont absentes (imprimante ou écran noir/blanc).
- Indiquer la taille des images dans le balisage (sauf à l'intérieur de la balise <picture>)
- Pour tout élément non textuel, fournir un équivalent textuel.
- S'assurer que les combinaisons de couleurs d'avant-plan et d'arrière-plan offrent un contraste suffisant.
- Fournir les informations de mise en cache (htaccess).
- S'assurer que les informations pertinentes précèdent celles qui ne le sont moins.
- Valider chaque page publiée
- Tester, chaque page, en local et en ligne, sous différents navigateurs, sous différentes largeurs, sur différents appareils (ou émulateurs, emulateurs2)
Bonnes pratiques du web mobile
"Designed for smartphones"
- Dès le départ, tester le site sur des écrans de moins de 601px
- Écrire le code en XHTML5 et l'encoder en UTF-8
- Disposer de la même image en 320px, 640px, 960px et 1280px au format *.webp
- Fournir des options de navigation minimale en haut de la page.
- Proscrire
- l'affichage de pop ups
- le multi-colonnes
- les images intégrées au texte
- les tableaux imbriqués
- les tableaux à des fins de présentation.
- les images haute résolution
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)
- /fr
-
/res
- /img (/webp, /jpg, /png, /gif, /svg, ...)
- /docu (/pdf, /xls, /doc, ...)
- /audio (mp3, ...)
- /video (mp4, ...)
- /dev
- /adm
- /zAAAAMMJJ
- /zTmp
- /no_web
- /deep
/ (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 :
- choisit le fichier à afficher s'il est tapé /(sans préciser de fichier)
DirectoryIndex index.php index.html index.htm 404.html - protège du listing les dossiers n'ayant pas un fichier "index.*"
Options -Indexes - redirige vers une page 40? en cas d'erreur 40?
ErrorDocument 40? http://www.monsite.com/40?.html - redirige index.* vers fr/index.* redirect 301
/index.php http://www.monsite.com/fr/index.php
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,
- L'instruction DirectoryIndex permet de choisir le nom des fichiers à utiliser si le nom du fichier n'est pas donné dans l'URL. Le premier nom sera utilisé, s'il existe. Sinon, le serveur cherchera le second, ... Le dernier est celui qui indique que le fichier n'existe pas
- L'instruction Options -Indexes permet d'interdire le listing des fichiers du dossier au cas où des fichiers "index" est absent. Il est toutefois prudent de toujours placer un fichier index dans un dossier, même vide.
- L'instruction ErrorDocument permet de choisir le fichier correspondant à un numéro d'erreur. Le cas classique est l'erreur 404, signifiant que le fichier indiqué dans l'URL n'existe pas (ou plus).
- L'instruction redirect permet de transformer l'appel d'un fichier en appel d'un autre fichier. L'utilisateur est alors redirigé automatiquement vers cette autre page (qui peut être située sur un autre site)
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.
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
![](imgXXX640.webp)
<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
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
- Donner un nom de fichier HTML explicite
- Remplissez les meta title et keyword
Pour trouver les bons mot-clés : Google Ads
- Mettre les mots les plus important en gras.
- Donner aux images un nom de fichier explicite.
- Remplir l'attribut alt et title avec des contenus différents.