keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Merge branch 'dev' into filter

Browse Source
This commit is contained in:
Théo Marchal 2021-03-04 10:13:28 +01:00
commit 936af2a9fd
12 changed files with 234 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
biographie.html
View File

@ -34,13 +34,13 @@
<article class="main">
<h1>Biographie</h1>
<p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vu le jour un matin de mars 1936 à Mouilly, un petit village isolé dans la forêt meusienne, au fond d'une vallée accrochée aux contreforts des côtes de Meuse.</p>
<p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vécu la plus grande partie de sa vie à Dugny-sur-Meuse, village de la vallée de la Meuse où elle trouvera de nombreux sujets d’inspiration.</p>
<p>Comme l'écrit Ginou en 2016 dans un texte sur sa jeunesse, &laquo;&#8239;je suis née un jour de mars 1936 dans un petit village de la Meuse, Mouilly, le berceau des parents de mon père&#8239;&raquo;. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, et en garde des souvenirs très précis, même 75 ans après. Après avoir passé le certificat d'études avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du village, dans une maison sur les berges du petit ruisseau qui serpente au fond de la vallée.</p>
<p>Comme l'écrit Ginou en 2016 dans un texte sur sa jeunesse, &laquo;&#8239;je suis née un jour de mars 1936 dans un petit village de la Meuse : Mouilly, le berceau des parents de mon père&#8239;&raquo;. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, et en garde des souvenirs très précis, même 75 ans après. Après avoir passé le certificat d'études avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du petit village isolé dans la forêt meusienne, dans une maison sur les berges du petit ruisseau qui serpente au fond d'une vallée accrochée aux contreforts des côtes de Meuse.</p>
<p>Dans ce petit village blotti dans la forêt domaniale des Éparges, elle passe beaucoup de temps dans la nature environnante, accompagnant son père quand il allait dans les bois chercher des champignons ou bien pour aller jouer avec ses copains et copines du village. Elle se souvient&#8239;: &laquo;&#8239;j'ai appris à reconnaître girolles, cèpes, cela me plaisait bien. J'ai toujours aimé la nature, les fleurs, les oiseaux, apercevoir une biche qui détale au détour d'un chemin&#8239;&raquo;. Quand elle rendait visite à ses cousines à Saint-Dié dans les Vosges, elle faisait de longues promenades autour de la ville. Cet amour de la nature se ressentira tout au long de son &oelig;uvre.</p>
<p>Dans ce petit village blotti dans la forêt domaniale des Éparges, elle passe beaucoup de temps dans la nature environnante, accompagnant son père quand il allait dans les bois chercher des champignons ou bien pour aller jouer et se promener avec ses copains et copines du village. Elle se souvient&#8239;: &laquo;&#8239;j'ai appris à reconnaître girolles et cèpes, cela me plaisait bien. J'ai toujours aimé la nature, les fleurs, les oiseaux, apercevoir une biche qui détale au détour d'un chemin&#8239;&raquo;. Quand elle rendait visite à ses cousines à Saint-Dié dans les Vosges, elle faisait de longues promenades autour de la ville. Cet amour de la nature se ressentira tout au long de son &oelig;uvre.</p>
<p>Ginou a commencé très tôt à montrer un goût prononcé pour les arts graphiques. Comme elle le relate elle-même&#8239;: &laquo;&#8239;depuis toute petite, j'aimais dessiner et colorier et puis l'institutrice nous a appris à peindre à la gouache. Elle aussi, comme mon père, encourageait mon don&#8239;&raquo;. C'est ainsi que Geneviève peint ses premières aquarelles. Elle réalise aussi de nombreux portraits au fusain d'artistes célébres des années 50 et 60&#8239;: Grace Kelly, Marlon Brando, Zsa Zsa Gabor, Humphrey Bogart, etc.</p>
<p>Ginou a commencé très tôt à montrer un goût prononcé pour les arts graphiques. Comme elle le relate elle-même&#8239;: &laquo;&#8239;depuis toute petite, j'aimais dessiner et colorier et puis l'institutrice nous a appris à peindre à la gouache. Elle aussi, comme mon père, encourageait mon don&#8239;&raquo;. C'est ainsi que Geneviève peint ses premières aquarelles. Elle réalise aussi de nombreux portraits au fusain d'artistes célèbres des années 50 et 60&#8239;: Grace Kelly, Marlon Brando, Zsa Zsa Gabor, Humphrey Bogart, etc.</p>
<p>Ginou écrit ensuite&#8239;: &laquo;&#8239;et puis, un jour, j'ai rencontré une jeune femme qui peignait et qui m'a parlé de la peinture à l'huile. J'ai voulu essayer, c'est le voisin qui m'a rapporté de Metz mes premiers tubes de peinture et la palette (que j'ai toujours). J'ai aussi acheté quelques livrets traitant de la technique et je me suis lancée et j'ai progressé tout doucement. Et cette passion ne m'a jamais quitté.&#8239;&raquo; Ainsi est née Ginou&#8239;!</p>
@ -48,7 +48,7 @@
<p>Il ne faut pas oublier qu'elle n'aurait pas été Ginou sans le &laquo;&#8239;Jeannot&#8239;&raquo;, son mari. Le Jeannot a toujours accompagné cette passion, plus encore en retraite, en s'occupant de toute la logistique (trépieds, support, table, etc) lorsque qu'elle s'est décidée à participer aux expositions de peinture et autres foires artisanales locales.</p>
<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 deux tableaux inachevés&#8239;: deux esquisses au fusain représentant une 54ème &laquo;&#8239;Vieille Église&#8239;&raquo; (Église romane de Dugny-sur-Meuse) et un paysage asiatique.</p>
<p>Hasard 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. Elle laissa également deux tableaux inachevés&#8239;: deux esquisses au fusain représentant une 54ème &laquo;&#8239;Vieille Église&#8239;&raquo; (Église romane de Dugny-sur-Meuse) et un paysage asiatique.</p>
<p class="signature">Pour en découvrir plus sur la vie de Ginou, visitez notre section <a href="divers.html">Divers</a>.</p>

2
data.json
View File

File diff suppressed because one or more lines are too long

43
divers.html
View File

@ -39,26 +39,29 @@
<article class="divers">
<h1>Divers</h1>
<p class="center">Pour voir une photo en haute résolution et ses informations, veuillez cliquer sur celle-ci.</p>
<h2>Petit carnet</h2>
<p>Ce site est né grâce à ce petit carnet, qui contient quasiment l'intégralité des tableaux peint par Ginou (nous avons retrouvé quatre inédits). Il nous a permis de faire un index complet de ses &oelig;uvres à travers les années.</p>
<p>Ce site est né grâce à ce petit carnet appartenant à Ginou et dans lequel elle a consigné les informations de quasiment l'intégralité de ses tableaux (nous avons retrouvé quatre inédits). Il nous a permis de faire un index complet de ses &oelig;uvres à travers les années.
</p>
<div class="gallery">
<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" alt="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
<a data-fancybox="divers" href="photos/divers/normal/carnet.png" data-caption="Couverture du petit carnet qui nous a permis de lister l'intégralité des tableaux.">
<img src="photos/divers/mini/carnet.jpg" alt="Couverture du petit carnet qui nous a permis de lister l'intégralité des tableaux.">
</a>
<a data-fancybox="divers" href="photos/divers/normal/carnetpremierepage.png" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
<img src="photos/divers/mini/carnetpremierepage.jpg" alt="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
<a data-fancybox="divers" href="photos/divers/normal/carnetpremierepage.png" data-caption="Première page du petit carnet et les premiers tableaux à l’huile de Ginou.">
<img src="photos/divers/mini/carnetpremierepage.jpg" alt="Première page du petit carnet et les premiers tableaux à l’huile de Ginou.">
</a>
<a data-fancybox="divers" href="photos/divers/normal/carnetpage.png" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
<img src="photos/divers/mini/carnetpage.jpg" alt="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
<a data-fancybox="divers" href="photos/divers/normal/carnetpage.png" data-caption="Pages du petit carnet dans les années 2001.">
<img src="photos/divers/mini/carnetpage.jpg" alt="Pages du petit carnet dans les années 2001.">
</a>
<a data-fancybox="divers" href="photos/divers/normal/carnetdernierepage.png" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
<img src="photos/divers/mini/carnetdernierepage.jpg" alt="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
<a data-fancybox="divers" href="photos/divers/normal/carnetdernierepage.png" data-caption="Dernière page du petit carnet et derniers tableaux de Ginou.">
<img src="photos/divers/mini/carnetdernierepage.jpg" alt="Dernière page du petit carnet et derniers tableaux de Ginou.">
</a>
</div>
@ -68,26 +71,26 @@
<p>Voici quelques photos du dernier atelier que Ginou utilisait, chez elle, entre 2011 et 2017.</p>
<div class="gallery">
<a data-fancybox="divers" href="photos/divers/normal/atelier.jpg" data-caption="L'atelier dans lequel Ginou peignait (vers 2012).">
<a data-fancybox="divers" href="photos/divers/normal/atelier.jpg" data-caption="Atelier dans lequel Ginou peignait (vers 2012).">
<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" alt="L'atelier dans lequel Ginou peignait (2015).">
<a data-fancybox="divers" href="photos/divers/normal/atelier2.jpg" data-caption="Trépied et tableau (nº375, Venise, le Cannareggio) dans l’atelier de Ginou (2015).">
<img src="photos/divers/mini/atelier2.jpg" alt="Trépied et tableau (nº375, Venise, le Cannareggio) dans l’atelier de Ginou (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" alt="La palette utilisée (vers 2012).">
<a data-fancybox="divers" href="photos/divers/normal/palette.jpg" data-caption="La palette de Ginou !">
<img src="photos/divers/mini/palette.jpg" alt="La palette de Ginou !">
</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" alt="Zoom sur la palette utilisée (vers 2012).">
<a data-fancybox="divers" href="photos/divers/normal/palettezoom.jpg" data-caption="Zoom sur la palette.">
<img src="photos/divers/mini/palettezoom.jpg" alt="Zoom sur la palette.">
</a>
</div>
<h2>Expositions</h2>
<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-les Hattonchâtel..<br>
<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-les Hattonchâtel.<br>
Voici une sélection de quelques photos issues de ces événements.</p>
<div class="gallery">
@ -114,14 +117,14 @@
<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>
<p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en possédons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p>
<div class="gallery">
<a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse.">
<img src="photos/divers/mini/ainesdugny.jpg" alt="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse.">
</a>
</div>
<h2>Divers</h2>
<h2>Autres</h2>
<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).">
@ -135,7 +138,7 @@
<h2>Statistiques</h2>
<p>
De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint un total de 385 tableaux.<br>
De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint plus de de 385 tableaux.<br>
Parmi ceux-ci, elle a le plus souvent aimé travailler à la lumière printanière du mois de mai avec un total de 50 tableaux.<br>
Son année la plus active fut 1988 où elle réalisa 23 &oelig;uvres. Enfin, le format qu'elle privilégia fut le <em>55x46</em>, utilisé pour 53 toiles.
</p>

6
explorer.html
View File

@ -42,7 +42,7 @@
<article class="explorer">
<h1>Explorer</h1>
<div class="intro" style="text-align:justify;">
<p>Cette section permet de générer une <img width="14rem" src="styles/icons/list.svg" alt="liste"> <strong>liste</strong> (aussi visible sous la forme d'une <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> <strong>galerie</strong>) en fonction de différents paramètres, listés ci-dessous. Elle permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo, grâce aux informations du petit carnet (voir la section <a href="divers.html">Divers</a>)</p>
<p>Cette section permet de générer une <img width="14rem" src="styles/icons/list.svg" alt="liste"> <strong>liste</strong> (aussi visible sous la forme d'une <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> <strong>galerie</strong>) en fonction de différents paramètres, listés ci-dessous. Elle permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo, grâce aux informations du petit carnet (voir la section <a href="divers.html">Divers</a>).</p>
<p>En mode <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste, l'<strong>icône <img width="16.5rem" src="styles/icons/eye-black.svg" alt="&oelig;il"> &oelig;il</strong> permet de voir la photo du tableau ; en mode <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> galerie, il faut <strong>cliquer sur les tableaux</strong> pour accéder à leurs informations.</p>
@ -50,14 +50,14 @@
<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>.</p>
<p>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"> <strong>flèche</strong> pour la faire réapparaître.</p>
<p>Une fois cette liste générée, les options de configuration seront repliées, il suffit alors de cliquer sur la <img width="12rem" src="styles/icons/triangle.svg" alt="flèche"> <strong>flèche</strong> pour les faire réapparaître.</p>
</div>
<h2 class="active">Configuration&nbsp;</h2>
<form name="explorer" onsubmit="onSubmit();">
<div class="container">
<div class="box photos active">
<h3>État photo&nbsp;</h3>
<h3>Photo / État&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="photos" name="photos" value="all">
<label for="photos">Tout état</label></span>

1
exposition.html
View File

@ -46,7 +46,6 @@
</div>
<div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
<div class="gallery"></div>
<div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
</article>
</body>
</html>

BIN
images/unknown.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 799 KiB

After

Width:  |  Height:  |  Size: 604 KiB

2
index.html
View File

@ -35,7 +35,7 @@
<h1>L'art de Ginou</h1>
<p>Ginou était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses &oelig;uvres, principalement à la <strong>peinture à l’huile</strong>, occasionnellement à l’<strong>aquarelle</strong>, mais aussi par le biais de la <strong>peinture sur soie</strong> et <strong>sur bois</strong> ou bien encore dans les cahiers où elle écrivait des <strong>poèmes illustrés</strong>.</p>
<p>Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux, en leur attribuant un numéro et un titre et reportait les dimensions et leur destinataires / acheteurs / commanditaires. Dans ce petit carnet, <strong>de 1958 à 2017</strong>, sont référencés 383 tableaux. Cependant 2 tableaux (nº33 et nº49) ont été recouverts par Ginou elle-même. Nous avons aussi retrouvé 4 inédits. Ginou a commencé à prendre en photos certains tableaux qu’elle peignait dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter cette base iconographique, nous avons repris en photo en haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site <strong>248 des 385 tableaux recensés.</strong></p>
<p>Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux, en leur attribuant un numéro et un titre et reportait les dimensions et leur destinataires / acheteurs / commanditaires. Dans ce petit carnet, <strong>de 1958 à 2017</strong>, sont référencés 383 tableaux. Cependant 2 tableaux (nº33 et nº49) ont été recouverts par Ginou elle-même. Nous avons aussi retrouvé 4 inédits. Ginou a commencé à prendre en photos certains tableaux qu’elle peignait dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter cette base iconographique, nous avons repris en photo haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site <strong>249 des 385 tableaux recensés.</strong></p>
<p>Ce site est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son &oelig;uvre.</p>

28
informations.html
View File

@ -9,6 +9,8 @@
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script>
<link href="plugins/chart.min.css" rel="stylesheet">
<script src="plugins/chart.bundle.min.js"></script>
<script src="scripts/menu.js"></script>
<script src="scripts/mail.js"></script>
</head>
@ -35,30 +37,40 @@
<article class="main infos">
<h1>Informations</h1>
<h2>Contact</h2>
<p>Ce site dédié à la mémoire de Ginou n'est pas complet, et ne le sera peut-être malheureusement jamais. Cependant, si vous êtes en possession de l'une de ses &oelig;uvres qui n'est pas répertoriée ou dont la photo est manquante, vous pouvez nous contacter pour que nous puissions l'ajouter. Nous vous en serions extrêmement reconnaissants&#8239;!</p>
<h2>Nous aider à compléter le site - contact</h2>
<p>Ce site dédié à la mémoire de Ginou n'est pas complet, et ne le sera peut-être malheureusement jamais. Cependant, si vous êtes en possession de l'une de ses &oelig;uvres qui n'est pas répertoriée ou dont la photo est manquante ou de mauvaise qualité, vous pouvez nous contacter pour que nous puissions l'ajouter. Nous vous en serions extrêmement reconnaissants&#8239;!</p>
<p>Vous pouvez nous joindre en cliquant ici&#8239;: <a href="mailto:badmail" class="mail">nous contacter</a> (cela va devrait ouvrir votre client mail par défaut).</p>
<p>Vous pouvez nous joindre en cliquant ici&#8239;: <a href="mailto:badmail" class="mail">nous contacter</a> (cela devrait ouvrir votre client mail par défaut).</p>
<div class="stat">
<canvas id="photo"></canvas>
<span class="legend-cont"><span class="legend none"></span><span>Pas de photo</span></span>
<span class="legend-cont"><span class="legend bad"></span><span>Photo de mauvaise qualité</span></span>
<span class="legend-cont"><span class="legend ok"></span><span>Photo de qualité acceptable</span></span>
<span class="legend-cont"><span class="legend good"></span><span>Photo de bonne qualité</span></span>
</div>
<p>Certains noms de famille ont été remplacé par leurs initiales afin de respecter la vie privée des personnes dont Ginou a réalisé un portrait. Si ces personnes ou leur famille nous autorisent à publier le nom de famille complet en nous contactant, nous le feront avec plaisir.</p>
<h2>Notice d'utilisation</h2>
<p>Le site est constitué autour de deux rubriques majeures&#8239;: <em>Exposition</em> et <em>Explorer</em>.<br></p>
<h4>Exposition</h4>
<p>Cette rubrique se présente sous la forme d'une galerie de tableaux représentatifs dont nous possédons une photo de qualité correcte. Ceci la rend incomplète, mais c'est le meilleur moyen de découvrir de manière agréable l'&oelig;uvre de Ginou. En cliquant sur la photo d'un tableau, une galerie interactive s'ouvre. Il est alors possible de se déplacer à l'intérieur (avec les flèches de son clavier ou en glissant son doigt sur l'écran de son téléphone) pour voir la photo du tableau en grand. En bas, se trouve un cartel avec les informations essentielles du tableau. En appuyant sur le <strong>&#8505;&#xFE0E;</strong> situé en haut à droite du cartel, on accède à une page incluant également les méta-données du tableau. Il est ainsi possible de voir la photo dans sa qualité maximale, par exemple, ou encore son thème, le lieu représenté, etc.</p>
<p>Cette rubrique se présente sous la forme d'une galerie de tableaux représentatifs dont nous possédons une photo de qualité correcte. Ceci la rend incomplète, mais c'est le meilleur moyen de découvrir de manière agréable l'&oelig;uvre de Ginou. En cliquant sur la photo d'un tableau, une galerie interactive s'ouvre. Il est alors possible de se déplacer à l'intérieur de cette galerie (avec les flèches de son clavier ou en glissant son doigt sur l'écran de son téléphone ou tablette) tout en visualisant les tableaux en haute résolution. Dans ce mode, au bas du tableau se trouve un cartel avec ses informations essentielles. En appuyant sur le <strong>&#8505;&#xFE0E;</strong> situé en haut à droite du cartel, on accède à une page incluant également les méta-données du tableau. Il est ainsi possible de voir la photo dans sa qualité maximale, par exemple, ou encore son thème, le lieu représenté, etc.</p>
<h4>Explorer</h4>
<p>Cette rubrique quant à elle est interactive et permet de visualiser l'entièreté des créations de Ginou. En effet, elle regorge d'options pour pouvoir choisir précisément les tableaux à afficher. Par exemple, tous les tableaux de chiens dont la photo est de bonne qualité réalisés un mois de février&#8239;: il suffit de sélectionner ces options et de cliquer sur le bouton <strong>Générer</strong>. Évidemment, il est possible qu'il n'en existe pas, ce qui sera alors indiqué.<br>
Le résultat affiché sera sous la forme d'un tableau, mais il est également possible de l'afficher de la même manière que dans la rubrique Exposition en cliquant sur le bouton en haut à droite (seulement, il risque d'y avoir un certain nombre de tableaux dont la photo est indisponible, en fonction des critères de sélection, cela sera représenté par une image indiquant "Photo indisponible").</p>
<p>Cette rubrique quant à elle est interactive et permet de visualiser l'ensemble des créations de Ginou. En effet, elle regorge d'options pour pouvoir choisir précisément les tableaux à afficher. Par exemple, il est possible de créer un filtre pour voir tous les tableaux de chiens dont la photo est de bonne qualité réalisés un mois de février&#8239;: il suffit de sélectionner ces options et de cliquer sur le bouton <strong>Générer</strong>. Bien évidemment, il est possible qu'il n'existe pas de tableau réunissant ces critères, ce qui sera alors indiqué.<br>
Le résultat affiché sera sous la forme d'une liste, mais il est également possible de l'afficher sous forme d'une galerie (comme dans la rubrique Exposition) en cliquant sur le bouton en haut à droite. Dans ce mode, les tableaux n’ayant pas de photo disponible montreront une icône indiquant que la photo est manquante.</p>
<h4>Divers</h4>
<p>Cette page regroupe diverses photos et informations en complément de la biographie&#8239;: une vue de l'atelier que Ginou utilisait ses dernières années, des photos d'expositions, des coupures de presse, ainsi que des statistiques intéressante (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez du contenu pertinent, notamment pour les coupures de presse.</p>
<p>Cette page regroupe diverses photos et informations en complément de la biographie&#8239;: une vue de son atelier, des photos d'expositions, des coupures de presse, ainsi que des statistiques intéressantes (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez un document, une photo, des coupures de presse, tout ce qui peut être en relation avec l’art de Ginou.</p>
<h2>Informations technique</h2>
<p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que des plugins <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a>, <a href="https://www.chartjs.org/">Chart.js</a> et <a href="https://pagination.js.org/">Pagination.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a>, <a href="https://github.com/kosbarts/Commissioner">Commissioner</a> et <a href="https://www.1001fonts.com/hot-august-night-font.html">Hot August Night</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p>
<p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p>
<p>Site réalisé par Denis et <a href="https://theo.marchal.dev">Théo Marchal</a> avec la participation de toute la famille. Dernière mise à jour en février 2021.</p>
<p>Site réalisé par <a href="https://theo.marchal.dev">Théo</a> et Denis Marchal avec la participation de toute la famille. Dernière mise à jour en février 2021.</p>
</article>
</body>
</html>

2
photos

@ -1 +1 @@
Subproject commit 5bd4643c5c31f5a30eb50b49967dbe0f54b09d4c
Subproject commit 06d11b6b2f872ffb7bfcabf4e098000ff70b24fb

99
scripts/mail.js
View File

@ -16,4 +16,103 @@ jQuery(document).ready(function($)
var goodMail = a2 + a9 + a4 + a7 + a3 + a5 + a1 + a6 + a8;
$(this).attr('href', href.replace('badmail', goodMail + '?subject=[Ginou] Contact'));
});
// photos stats
fifties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
sixties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
seventies = {"none": 0, "bad": 0, "ok": 0, "good": 0};
eighties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
nineties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
zeroes = {"none": 0, "bad": 0, "ok": 0, "good": 0};
tens = {"none": 0, "bad": 0, "ok": 0, "good": 0};
$.getJSON("data.json", function(data)
{
function gatherYear(array, min, max)
{
if (i.year >= min && i.year <= max)
{
if (i.photo == "none") array.none++;
if (i.photo == "bad") array.bad++;
if (i.photo == "ok") array.ok++;
if (i.photo == "good") array.good++;
}
}
for (i of data)
{
gatherYear(fifties, 1950, 1959);
gatherYear(sixties, 1960, 1969);
gatherYear(seventies, 1970, 1979);
gatherYear(eighties, 1980, 1989);
gatherYear(nineties, 1990, 1999);
gatherYear(zeroes, 2000, 2009);
gatherYear(tens, 2010, 2020);
}
var canvasDimension = document.getElementById("photo").getContext('2d');
var chartDimension = new Chart(canvasDimension, {
type: 'bar',
data: {
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
datasets: [{
label: 'Pas de photo',
backgroundColor: '#FB6962',
data: [
fifties.none, sixties.none, seventies.none, eighties.none, nineties.none, zeroes.none, tens.none
]
}, {
label: 'Photo de mauvaise qualité',
backgroundColor: '#FCFC99',
data: [
fifties.bad, sixties.bad, seventies.bad, eighties.bad, nineties.bad, zeroes.bad, tens.bad
]
}, {
label: 'Photo de qualité acceptable',
backgroundColor: '#79DE79',
data: [
fifties.ok, sixties.ok, seventies.ok, eighties.ok, nineties.ok, zeroes.ok, tens.ok
]
},
{
label: 'Photo de bonne qualité',
backgroundColor: '#0CC078',
data: [
fifties.good, sixties.good, seventies.good, eighties.good, nineties.good, zeroes.good, tens.good
]
}]
},
options: {
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}, gridLines: {
display: true
},
scaleLabel: {
display: true,
labelString: 'Tableaux'
},
stacked: true,
}],
xAxes: [{
gridLines: {
display: false
},
stacked: true,
}]
},
legend: {
display: false,
position: "bottom",
}
}
});
});
});

4
scripts/stats.js
View File

@ -80,10 +80,10 @@ jQuery(document).ready(function($)
var chartDimension = new Chart(canvasDimension, {
type: 'bar',
data: {
labels: ["< 20cm", "20cm - 29cm", "30cm - 39cm", "40cm - 49cm", "50cm - 59cm", "60cm - 69cm", "70cm - 79cm", "80cm - 89cm", "90cm - 99cm", ">= 100cm"],
labels: ["Allégorique", "Animal domestique", "Animalier", "Campagne", "Forêt", "Marine", "Montagne", "Métier", "Personne", "Urbain", "Végétal"],
datasets: [{
label: 'nombre de tableaux',
data: [1, 60, 54, 97, 50, 54, 11, 2, 1, 2],
data: [2, 11, 67, 126, 3, 10, 5, 10, 46, 39, 39],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1

86
styles/main.css
View File

@ -159,12 +159,6 @@ article {
text-align:left;
}
@media only screen and (max-width:1200px) {
article {
width:95vw;
}
}
article h1 {
text-align:center;
}
@ -722,9 +716,87 @@ article #stats .stat {
article.infos .mail {
font-weight:bold;
font-size:1.2rem;
font-size:1.4rem;
}
article.infos .stat {
width:40vw;
margin:auto;
margin-top:2rem;
text-align:center;
}
@media only screen and (max-width:600px) {
article.infos .stat {
width:90vw;
}
}
@media only screen and (min-width:601px) and (max-width:1000px) {
article.infos .stat {
width:70vw;
}
}
@media only screen and (min-width:1001px) and (max-width:1200px) {
article.infos .stat {
width:60vw;
}
}
article.infos .stat canvas {
margin-bottom:1rem;
}
article.infos .stat .legend-cont {
display:inline-block;
text-align:center;
white-space:nowrap;
}
article.main.infos .stat .legend {
width:25px;
height:10px;
border:1px solid black;
display:inline-block;
margin-right:0.4em;
text-align:center;
}
article.main.infos .stat .legend + span {
margin-right:0.8em;
}
article.infos .stat .none {
background:#FB6962;
}
article.infos .stat .bad {
background:#FCFC99;
}
article.infos .stat .ok {
background:#79DE79;
}
article.infos .stat .good {
background:#0CC078;
}
article.infos h4 + p {
margin-left:1rem;
}
@media only screen and (max-width:1200px) {
article, article.main {
width:95vw;
}
article .center {
text-align:left;
}
}