From 0b096aad6e0bbf8b403af8b030dd062ffe7067ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Marchal?= <me@theomarchal.com>
Date: Fri, 12 Feb 2021 20:53:40 +0100
Subject: [PATCH] IE compatibility message and W3C standardization

---
 biographie.html       |  2 +-
 divers.html           | 42 +++++++++++++++++++++---------------------
 explorer.html         | 22 +++++++++++-----------
 exposition.html       |  2 +-
 scripts/explorer.js   | 16 ++++++++--------
 scripts/exposition.js |  4 ++--
 scripts/menu.js       | 21 ++++++++++++++++++++-
 scripts/painting.js   |  3 ++-
 styles/main.css       | 23 ++++++++++++++---------
 9 files changed, 80 insertions(+), 55 deletions(-)

diff --git a/biographie.html b/biographie.html
index 98112d3..320f6b0 100644
--- a/biographie.html
+++ b/biographie.html
@@ -45,7 +45,7 @@
 
         <p>Curiosité de la vie, Ginou était en train de compléter la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017, laissant le numéro 383 inachevé.</p>
 
-        <p><img src="images/genevievedugny.jpg"></p>
+        <p><img src="images/genevievedugny.jpg" alt="Geneviève Marchal, Dugny"></p>
     </article>
 </body>
 </html>
\ No newline at end of file
diff --git a/divers.html b/divers.html
index 2725519..79530fd 100644
--- a/divers.html
+++ b/divers.html
@@ -42,21 +42,21 @@
 
         <p>Voici quelques photos du dernier atelier que Ginou utilisait, chez elle, entre 2011 et 2017.</p>
 
-		<div id="gallery">
+		<div class="gallery">
             <a data-fancybox="divers" href="photos/divers/normal/atelier.jpg" data-caption="L'atelier dans lequel Ginou peignait (vers 2012).">
-                <img src="photos/divers/mini/atelier.jpg">
+                <img src="photos/divers/mini/atelier.jpg" alt="L'atelier dans lequel Ginou peignait (vers 2012).">
             </a>
 
             <a data-fancybox="divers" href="photos/divers/normal/atelier2.jpg" data-caption="L'atelier dans lequel Ginou peignait (2015).">
-                <img src="photos/divers/mini/atelier2.jpg">
+                <img src="photos/divers/mini/atelier2.jpg" alt="L'atelier dans lequel Ginou peignait (2015).">
             </a>
 
             <a data-fancybox="divers" href="photos/divers/normal/palette.jpg" data-caption="La palette utilisée (vers 2012).">
-                <img src="photos/divers/mini/palette.jpg">
+                <img src="photos/divers/mini/palette.jpg" alt="La palette utilisée (vers 2012).">
             </a>
 
             <a data-fancybox="divers" href="photos/divers/normal/palettezoom.jpg" data-caption="Zoom sur la palette utilisée (vers 2012).">
-                <img src="photos/divers/mini/palettezoom.jpg">
+                <img src="photos/divers/mini/palettezoom.jpg" alt="Zoom sur la palette utilisée (vers 2012).">
 			</a>
 		</div>
 
@@ -65,54 +65,54 @@
         <p>Ginou a participé à de nombreuses foires et expositions en Lorraine, principalement dans la Meuse : à Bar-le-Duc, Étain, Verdun et ses alentours, ou encore à Vigneulles.<br>
         Voici une sélection de quelques photos issues de ces événements.</p>
 
-        <div id="gallery">
+        <div class="gallery">
             <a data-fancybox="divers" href="photos/divers/normal/expodugny.jpg" data-caption="Exposition à Dugny-sur-Meuse (1996).">
-                <img src="photos/divers/mini/expodugny.jpg">
+                <img src="photos/divers/mini/expodugny.jpg" alt="Exposition à Dugny-sur-Meuse (1996).">
             </a>
             
             <a data-fancybox="divers" href="photos/divers/normal/exposaintjean.jpg" data-caption="À la fête du collège Saint-Jean de Verdun (2005).">
-                <img src="photos/divers/mini/exposaintjean.jpg">
+                <img src="photos/divers/mini/exposaintjean.jpg" alt="À la fête du collège Saint-Jean de Verdun (2005).">
             </a>
             
             <a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="À la foire aux puces de Dugny-sur-Meuse (2004).">
-                <img src="photos/divers/mini/foiredugny.jpg">
+                <img src="photos/divers/mini/foiredugny.jpg" alt="À la foire aux puces de Dugny-sur-Meuse (2004).">
 			</a>
 
             <a data-fancybox="divers" href="photos/divers/normal/foirethierville.jpg" data-caption="À la foire de Thierville-sur-Meuse (2002).">
-                <img src="photos/divers/mini/foirethierville.jpg">
+                <img src="photos/divers/mini/foirethierville.jpg" alt="À la foire de Thierville-sur-Meuse (2002).">
             </a>
             
             <a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="La dernière exposition où les tableaux de Ginou ont été présentés (2017).">
-                <img src="photos/divers/mini/derniereexpo.jpg">
+                <img src="photos/divers/mini/derniereexpo.jpg" alt="La dernière exposition où les tableaux de Ginou ont été présentés (2017).">
 			</a>
 		</div>
 
 		<h2>Presse</h2>
 
         <p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en avons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p>
-        <div id="gallery">
+        <div class="gallery">
             <a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="todo">
-                <img src="photos/divers/mini/ainesdugny.jpg">
+                <img src="photos/divers/mini/ainesdugny.jpg" alt="todo">
             </a>
         </div>
 
 		<h2>Divers</h2>
 
-        <div id="gallery">
+        <div class="gallery">
             <a data-fancybox="divers" href="photos/divers/normal/ginouchloe.jpg" data-caption="Ginou posant à côté d'un de ses tableaux (vers 2011).">
-                <img src="photos/divers/mini/ginouchloe.jpg">
+                <img src="photos/divers/mini/ginouchloe.jpg" alt="Ginou posant à côté d'un de ses tableaux (vers 2011).">
             </a>
 
             <a data-fancybox="divers" href="photos/divers/normal/ginou.jpg" data-caption="Ginou en voyage en Argentine (2012).">
-                <img src="photos/divers/mini/ginou.jpg">
+                <img src="photos/divers/mini/ginou.jpg" alt="Ginou en voyage en Argentine (2012).">
             </a>
 
             <a data-fancybox="divers" href="photos/divers/normal/carnet.png" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
-                <img src="photos/divers/mini/carnet.jpg">
+                <img src="photos/divers/mini/carnet.jpg" alt="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
             </a>
 
             <a data-fancybox="divers" href="photos/divers/normal/carnetouvert.jpg" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
-                <img src="photos/divers/mini/carnetouvert.jpg">
+                <img src="photos/divers/mini/carnetouvert.jpg" alt="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
             </a>
         </div>
 
@@ -124,13 +124,13 @@
         </p>
 
         <div id="stats">
-            <div id="stat">
+            <div class="stat">
                 <canvas id="month" width="400" height="200"></canvas>
             </div>
-            <div id="stat">
+            <div class="stat">
                 <canvas id="year" width="400" height="200"></canvas>
             </div>
-            <div id="stat">
+            <div class="stat">
                 <canvas id="dimension" width="400" height="200"></canvas>
             </div>
         </div>
diff --git a/explorer.html b/explorer.html
index 57a73d6..6e4ada8 100644
--- a/explorer.html
+++ b/explorer.html
@@ -35,14 +35,14 @@
 
     <article class="explorer">
         <h1>Explorer</h1>
-        <p>Cette section du site permet de générer une <img width="14rem" src="styles/icons/list.svg"> liste (aussi visible sous le format d'une <img width="16.5rem" src="styles/icons/frame.svg"> galerie) en fonction de différents paramètres, listés ci-dessous. Il permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.<br>
-        En mode <img width="14rem" src="styles/icons/list.svg"> liste, l'icône <img width="16.5rem" src="styles/icons/eye-black.svg"> &oelig;il permet de voir le tableau en grand ; en mode <img width="16.5rem" src="styles/icons/frame.svg"> galerie, il faut cliquer sur les tableaux.<br>
+        <p>Cette section du site permet de générer une <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste (aussi visible sous le format d'une <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> galerie) en fonction de différents paramètres, listés ci-dessous. Il permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.<br>
+        En mode <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste, l'icône <img width="16.5rem" src="styles/icons/eye-black.svg" alt="&oelig;il"> &oelig;il permet de voir le tableau en grand ; en mode <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> galerie, il faut cliquer sur les tableaux.<br>
         Une &#x2606; étoile vide dans la colonne photo signifie que nous n'avons pas de photo pour un tableau ; une &#x2605; étoile qu'elle est de mauvaise qualité ; deux &#x2605;&#x2605; étoiles qu'elle est acceptable ; et trois &#x2605;&#x2605;&#x2605; étoiles qu'elle est tout à fait satisfaisante.<br>
-        Le symbole <img width="5rem" src="styles/icons/exclamation-mark.svg"> dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.<br>
-        Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la <img width="12rem" src="styles/icons/triangle.svg"> flèche pour la faire réapparaître.</p>
+        Le symbole <img width="5rem" src="styles/icons/exclamation-mark.svg" alt="double point d'exclamation"> dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.<br>
+        Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la <img width="12rem" src="styles/icons/triangle.svg" alt="flèche"> flèche pour la faire réapparaître.</p>
 
         <h2 class="active">Configuration&nbsp;</h2>
-        <form name="explorer" action="" onsubmit="onSubmit();">
+        <form name="explorer" onsubmit="onSubmit();">
             <div class="container">
                 <div class="box photos active">
                     <h3>État photo&nbsp;</h3>
@@ -149,7 +149,7 @@
                         <span><input type="checkbox" id="dimensions" name="dimensions" value="all">
                         <label for="dimensions">Toutes</label></span>
                         <span><input type="checkbox" id="18" name="dimension" value="18">
-                        <label for="18">< 20cm</label></span>
+                        <label for="18">&lt; 20cm</label></span>
                         <span><input type="checkbox" id="20" name="dimension" value="20">
                         <label for="20">20cm - 29cm</label></span>
                         <span><input type="checkbox" id="30" name="dimension" value="30">
@@ -178,7 +178,7 @@
                         <span><input type="checkbox" id="no" name="help" value="no">
                         <label for="no">Non</label></span>
                         <span><input type="checkbox" id="yes" name="help" value="yes">
-                        <label for="yes"><img width="5rem" src="styles/icons/exclamation-mark.svg"> Oui</label></span>
+                        <label for="yes"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"> Oui</label></span>
                     </div>
                 </div>
             </div>
@@ -186,10 +186,10 @@
         </form>
         <p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
         <div id="style-container">
-            <img class="style-select frame" src="styles/icons/frame.svg">
-            <img class="style-select list" src="styles/icons/list.svg">
+            <img class="style-select frame" src="styles/icons/frame.svg" alt="galerie">
+            <img class="style-select list" src="styles/icons/list.svg" alt="liste">
         </div>
-        <div id="gallery"></div>
+        <div class="gallery"></div>
         <table>
             <thead>
                 <tr>
@@ -207,7 +207,7 @@
                 </tr>
             </thead>
         </table>
-        <p class="result" style="text-align:center;"></p>
+        <p class="result" class="center"></p>
     </article>
 </body>
 </html>
\ No newline at end of file
diff --git a/exposition.html b/exposition.html
index 7d24e36..ba8af64 100644
--- a/exposition.html
+++ b/exposition.html
@@ -36,7 +36,7 @@
     <article class="exposition">
         <h1>Exposition</h1>
         <p class="center">Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
-        <div id="gallery"></div>
+        <div class="gallery"></div>
     </article>
 </body>
 </html>
\ No newline at end of file
diff --git a/scripts/explorer.js b/scripts/explorer.js
index c913ac9..e94af5a 100644
--- a/scripts/explorer.js
+++ b/scripts/explorer.js
@@ -442,11 +442,11 @@ jQuery(document).ready(function($)
                     result += '<td class="photo">&#x2606;</td>';
 
                 if (i.help == "yes")
-                    result += '<td class="help"><img width="5rem" src="styles/icons/exclamation-mark.svg"></td>'
+                    result += '<td class="help"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"></td>'
                 else
                     result += '<td>&nbsp;</td>'
 
-                result += '<td><a href="painting.html?number=' + i.number + '"><img src="styles/icons/eye.svg"></a></td>';
+                result += '<td><a href="painting.html?number=' + i.number + '"><img src="styles/icons/eye.svg" alt="Voir"></a></td>';
                 result += "</tr>";
 
                 $("table").append(result);
@@ -455,20 +455,20 @@ jQuery(document).ready(function($)
                 if (i.photo == "none")
                 {
                     paintingHtml = '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
-                    paintingHtml += '<img src="images/unknown.jpg"></a>'
+                    paintingHtml += '<img src="images/unknown.jpg" alt="Tableau ' + i.number + '"></a>'
                 }
                 else
                 {
                     paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
-                    paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg"></a>'
+                    paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>'
                 }
-                $("#gallery").append(paintingHtml);
+                $(".gallery").append(paintingHtml);
             }
             $(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " élément" + (numberOfItem > 1 ? "s" : "") + "</strong>.");
             return hasResult;
         }
 
-        $("#gallery").hide();
+        $(".gallery").hide();
         $(".style-select").hide();
 
         generateMenu();
@@ -503,11 +503,11 @@ jQuery(document).ready(function($)
         $(".style-select.frame").click(function()
         {
             $("table").hide();
-            $("#gallery").show();
+            $(".gallery").show();
         })
         $(".style-select.list").click(function()
         {
-            $("#gallery").hide();
+            $(".gallery").hide();
             $("table").show();
         })
 
diff --git a/scripts/exposition.js b/scripts/exposition.js
index 04a277c..90fcf0d 100644
--- a/scripts/exposition.js
+++ b/scripts/exposition.js
@@ -7,8 +7,8 @@ jQuery(document).ready(function($)
             if (i.photo == "ok" || i.photo == "good")
             {
                 paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
-                paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg"></a>';
-                $("#gallery").append(paintingHtml);
+                paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
+                $(".gallery").append(paintingHtml);
             }
         }
 
diff --git a/scripts/menu.js b/scripts/menu.js
index 6da643c..c621738 100644
--- a/scripts/menu.js
+++ b/scripts/menu.js
@@ -5,4 +5,23 @@ function mobilemenu()
         navmenu[0].classList.remove("active");
     else
         navmenu[0].classList.add("active");
-}
\ No newline at end of file
+}
+
+document.addEventListener("DOMContentLoaded", function(event)
+{
+    function isIE()
+    {
+        user_agent = navigator.userAgent;
+        return (user_agent.indexOf("MSIE ") > -1 || user_agent.indexOf("Trident/") > -1);
+    }
+
+    if (isIE())
+    {
+        var IEheader = document.createElement("div");
+        IEheader.className = "IE-header"
+        var textnode = document.createTextNode("Votre navigateur est obsolète. Veuillez utiliser Edge (inclus avec Microsoft Windows), Safari (inclus avec macOS), Firefox ou Chrome.");
+        IEheader.appendChild(textnode);
+
+        document.getElementsByTagName("header")[0].insertBefore(IEheader, document.getElementsByTagName("nav")[0]);
+    };
+});
\ No newline at end of file
diff --git a/scripts/painting.js b/scripts/painting.js
index 55300a8..f09218e 100644
--- a/scripts/painting.js
+++ b/scripts/painting.js
@@ -30,7 +30,8 @@ jQuery(document).ready(function($)
         if (data[i].photo != "none")
             $(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg");
         else
-        $(".photo img").attr("src", "images/unknown.jpg");
+            $(".photo img").attr("src", "images/unknown.jpg");
+        $(".photo img").attr("alt", "Tableau " + data[i].number);
 
         // metadata
         $(".metadata .content.number").append(GetNumber());
diff --git a/styles/main.css b/styles/main.css
index 9a6c128..9d92609 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -30,6 +30,11 @@ a {
     text-align:center;
 }
 
+.IE-header {
+    font-size: 1.5rem;
+    margin: 1rem;
+}
+
 header {
     border-top:.2rem solid #187795;
     box-shadow:0 .4rem .4rem 0 rgba(0,0,0,.04);
@@ -196,7 +201,7 @@ article.main p.signature {
 
 /* Exposition */
 
-article #gallery {
+article .gallery {
     display:inline-block;
     position:relative;
 
@@ -204,23 +209,23 @@ article #gallery {
     margin-top:0;
 }
 
-article.exposition #gallery {
+article.exposition .gallery {
     text-align:center;
 }
 
-article #gallery img {
+article .gallery img {
     max-height:30vh;
     max-width:40vw;
     margin:0.5rem;
 }
 
 @media only screen and (max-width:1000px) {
-    article #gallery img {
+    article .gallery img {
         max-height:85vh;
         max-width:85vw;
     }
 
-    article #gallery {
+    article .gallery {
         display:grid;
         text-align:center;
     }
@@ -351,7 +356,7 @@ article.painting .container .metadata span.content img {
 
 /* Explorer */
 
-article.explorer #gallery {
+article.explorer .gallery {
     text-align:center;
 }
 
@@ -592,7 +597,7 @@ article #stats {
     justify-content:center;
 }
 
-article #stats #stat {
+article #stats .stat {
     width:28vw;
     margin-right:4vw;
     margin-left:4vw;
@@ -603,7 +608,7 @@ article #stats #stat {
         display:block;
     }
 
-    article #stats #stat {
+    article #stats .stat {
         width:85vw;
         text-align:center;
         margin:auto;
@@ -616,7 +621,7 @@ article #stats #stat {
         display:block;
     }
 
-    article #stats #stat {
+    article #stats .stat {
         width:55vw;
         text-align:center;
         margin:auto;