Notes de mises à jour

3 façons de gérer les avis internet

• Section dédiée intérée au site, version site PREMIUM avec sélection des avis Google & Instagram et intégration en base de données FTVA (fichier JSON) → maitrise du contenu & Code/Design
• Bouton → Lien vers Fiche Google Business → plus d'infos mais sans aucun contrôle contenu ni Design. Automatique mais sans contrôle
• Bouton → Lien vers compte Instagram idem Google. Automatique mais sans contrôle

Animation → Effet de scroll visible : oui mais ...

• Accès instantané aux Sections démandées → temps de latence nul ! ... et zéro temps de chargement des informations non plus !
• Effet de défilement/scroll : Cet effet est neutralisé quand on clique sur une option de menu ou un bouton. Elle n'est présente uniquement avec les boutons du volet latéral droit c'est à dire les flèches ↓/↑ les boutons flottants (FAB)

Favicon visible des les onglets de navigateur

• 1ère version "texte"  
• 2ème version à prévoir pour les Icônes d'App affichés sur iPad et écran accueil iPhone (signet Internet

Nouveautés

• Formulaire : Support du Site → Bug et Proposition fonctionnalité
• Bouton pour s'abonner à l'AGENDA
• Nouvelle section avec effet Parallax avec en fond une vidéo

Compatibilité

• Forte intégration et tests pour les moteurs de rendu →Chrome, Firefox, Edge et Vivaldi en complément de Safari
• TOUTES les vidéos ont été converties (réencodées avec un nouveau codec) dans un format .MP4 UNIVERSEL (

Derniers ajustements & boutons

• Consolidation des derniers ajustements (cohérence UI, responsive, petits détails de mise en page)
• Ajout/harmonisation de certains boutons d’action (CTA, accès plus direct, fermeture / retour)
• Micro-corrections sur textes, espacements et lisibilité (desktop & iPhone)

Page Principale (SOCLE) et Pages indépendantes (Section lourdes)

• Mise en forme adaptative ciblée iPhone Portrait

Traitement Section Activités Adultes

• Mise en forme adaptative des boutons du menu vertical en mode Desktop originalement et bascule en menu horizontal sur plusieurs lignes

Améliorations du moteur de recherche

• Affinage du moteur MIRA pour des résultats plus pertinents et rapides
• Amélioration de l’expérience utilisateur dans la navigation entre occurrences
• Optimisations de performance pour limiter les recalculs et garder la page fluide

Fermeture automatique et contrôles

• Ajout d’une fermeture automatique des blocs FAQ pour éviter l’empilement des réponses ouvertes
• Insertion d’un bouton de fermeture dédié pour revenir rapidement à la vue compacte
• Micro-ajustements d’ergonomie pour une lecture plus lisible sur desktop et mobile

Contenu d’introduction

• Ajout d’un texte d’introduction pour la section NoteBooks afin de contextualiser les ressources
• Petites harmonisations de mise en page pour aligner cette section avec le reste du site

Moteur de recherche avancé FT-VALAIGO

• 🔍 Recherche intelligente et complète sur tout le site
• Recherche insensible à la casse et aux accents : recherche en majuscules/minuscules et sans distinction des accents
• Recherche dans le contenu visible de la page web
• Recherche dans tout le contenu du site et la base de données
• Recherche dans le contenu caché : informations non visibles (cartes retournées, éléments masqués, etc.)
• Recherche dans les images : détection dans les attributs alt et les noms de fichiers
• Recherche dans les vidéos : métadonnées et descriptions
• Recherche dans le contenu externe : liens et ressources externes
• Matching de mots entiers : évite les correspondances partielles (ex: "équipe" ne correspond pas à "équipé")
• Navigation entre les occurrences : bouton "Parcourir les éléments trouvés" avec compteur
• Mise en évidence visuelle : surlignage des termes trouvés dans le texte et contour jaune pour les images
• Positionnement automatique sur la première occurrence lors de l'activation de la navigation
• Nettoyage automatique des mises en évidence lors de la fermeture du menu de navigation
• Exclusion intelligente : la zone de saisie du moteur de recherche est exclue des résultats
• Interface utilisateur intuitive : accordéon d'information sur la recherche avancée
• Performance optimisée : recherche rapide même sur de grandes pages

Bannière d'informations dans le Header du site

• 🤸🫵 Nouvelle version depuis vidéo SMS !
• Gestion automatisée : Si pas d'évèvement actif en fonction de la date du jour → pas de bannière
• Evènements avec dates DEBUT/FIN
• Evènement avec : texte, photos devant & derrière
• Lien cliquable vers AGENDA pour infos complètes et formulaire inscription en fonction
• Défilement auto avec réglages : vitesse et accès/retour à un message via slider à puces
• Défilement en pause au survol de la bannière
• Certains évènements peuvent avoir une vignette associée automatiquement (ou pas). Vignette cliquable pour Popup en grand et bouton CTA (Call To Action) ... vers AGENDA
• Tout est dynamique (données dans un fichier JSON – standard fichier échanges WEB & APP – ... et ensuite dans BDD MySQL/PHP quand activation du Back-End).

Améliorations générales

• Nombreuses évolutions et mises à jour sur l'ensemble du site
• Optimisations de performance et d'expérience utilisateur
• Corrections de bugs et améliorations de stabilité
• Améliorations de l'accessibilité et de la compatibilité navigateurs

Nouvelles fonctionnalités

• Fonctionnalités supplémentaires à venir... : Menu flottant d'accès à tout partout PC, MAC et Mobile !

Nouvelles sections et contenus

• Nouveautés à venir : Finalisation NOTEBOOK H-Y-R-O-X... et Section dédiée aux Notebooks FT-VALAIGO sur son étagère IKA !

Après vérification CGU

Pas de n° d'affiliation ou d'immatriculation comme Fédé ou licences ...

• Mais il s'agit bien d'une Affiliation / Label / Partenariat de marque
  • Le n° d'Affiliation est remplacé par l'autorisation d'utilisation de la mention "Offical Hyrox training club"
  • Ce label figure désormais sur :
    • La popup "Aperçu éclair du club"
    • En entête de la Section "nos propositions"
    • La carte Activité HYROX
    • La Section "la Team"
    • La Section "tarifs"
    • La Section "coordonnées"
• Section "activités adultes" :
  • Texte introduction section :  HYROX  en gras et jaune avec informations popup au clic
  • Menu latéral de la Section "Activités Adultes" : Carte HYROX →Mise en évidence aux couleurs branding
  • Mise à jour du texte de la Carte HYROX
    • Invitation à préparer sa course avec des Coachs de folie !
    • → dans un super Club ! (sur fond jaune)
    • Lien vers HYROX France → /course/
  • Un peu de jaune sur la Carte HALTEROPHILIE !
  • Re-modélisation du Menu Latéral
    • Couleurs par catégories (bleu, Hyrox/Haltérophilie, Yoga, Coaching)
    • Regroupement visuel des options par couleurs/"catégories"
    • Mise en évidence de nouvelle façon de l'option cliquée par l'utilisateur :
    • triangle/pointeur gauche/droite sur → grands écrans avec menu latéral
    • triangle/pointeur haut/bas sur → petits écrans avec menu au-desssus
• Section "Kids & Teens" → Bords arrondis sur le Slider en entête de section
• Section "nos propositions : "
  → Rappel Affiliationa HYROX-FR et lien cliquable en entête de Section
  → couleur "beige" sur l'icône Lotus pour "Yoga" en remplacememnt de "Parcours Pro" → la charte graphique se précise hahaha !

Section Kids & Teens

• Animation légère du titre de Section à l'identique des autres sections

Animation/Défilement → Accès à une Section de la page principale

• Suppression de l'effet de scroll rapide sur toute la page → pour arriver à la Section ciblée
• Accès direct/instantané à la Section demandée. Animation légère sur le titre de la Section.
• Effet de scroll sur toute la page uniquement pour les Boutons de Navigation Flottants (FAB) : TOUT en Haut de Page & TOUT en Bas de page

UI → Margin ...

• Section en entête de site :
  • Amélioration taille police & contraste des tuiles "Coachs"
  • et bulles " ? , ! , ... , + "
• Espacements entre les différentes Sections
• Nouveau cadrage → image cliquable "la Team" + MAJ : titre & couleur & badge Hyrox

Section "Coordonnées & Accès" ...

• Photo Coachs légèrement transparente pour intégration discrète à la section

Bannière vidéo Activités Principales reprise :

• en entête de site
• dans Section "La Team"
• dans le Footer du site

Section "Plannng & Horaires" :

• HYROX → changement de couleur de texte en jaune et si sélection alors → fond jaune
• Idem pour NAMASTE → Beige

Texte d'introduction

• ...

NoteBook

• ...

Résumé sous forme d'organigrammes

• ...

Témoignages

• ...

Cartes "Activités adultes" → Coaching & Programmation

• Ajout d'un bouton pour accéder à la Section Coaching

FACEBOOK

• → Prise en compte nouveauté technique FB-2025
• Désormais, 👉 https://developers.facebook.com/docs/plugins/page-plugin/ → site officiel pour générer les iframes et JavaScript SDK.
• Mise en place d'une fenêtre (iFrame) scrollable de tout le contenu Facebook (page professionnelle) en replacement des cartes posts manuelles
• Ajout d'une lien vers la page FT-VALAIGO sur le site Officiel

Effets PARALLAX

• 4 images avec effet Parallax sur toute la page principale du site

Suite prise en compte de tes remarques concernant la v7 et ajouts 🍐JPI

"Nouveautés" HYROX

• Sur la tuile "Aperçu éclair du club" :
  • ajout de l'information de l'affiliation HYROX France
  • → n'oublie pas STP de me donner votre n° affiliation
• Section "activités adultes" :
  • Texte introduction section :  HYROX  en gras et jaune avec informations popup au clic
  • Menu latéral de la Section "Activités Adultes" : Carte HYROX →Mise en évidence aux couleurs branding
  • Mise à jour du texte de la Carte HYROX
    • Invitation à préparer sa course avec des Coachs de folie !
    • → dans un super Club ! (sur fond jaune)
    • Lien vers HYROX France → /course/
  • Un peu de jaune sur la Carte HALTEROPHILIE !
  • Re-modélisation du Menu Latéral
    • Couleurs par catégories (bleu, Hyrox/Haltérophilie, Yoga, Coaching)
    • Regroupement visuel des options par couleurs/"catégories"
    • Mise en évidence de nouvelle façon de l'option cliquée par l'utilisateur :
    • triangle/pointeur gauche/droite sur → grands écrans avec menu latéral
    • triangle/pointeur haut/bas sur → petits écrans avec menu au-desssus
• Section "Kids & Teens" → Bords arrondis sur le Slider en entête de section
• Section "nos propositions : "
  → Rappel Affiliationa HYROX-FR et lien cliquable en entête de Section
  → couleur "beige" sur l'icône Lotus pour "Yoga" en remplacememnt de "Parcours Pro" → la charte graphique se précise hahaha !

Début de prise en compte de tes remarques concernant la v7

• Sur la tuile "Aperçu éclair du club" :
  • colonne de gauche → remplacement de "10 activités adultes" par "Plus de 40h de cours par semaine"
  • colonne de droite → suppression de "Parcours Pro"
• Section "Nos propositions" :
  • Suppression de la tuile "Parcours Pro" (non retenue pour l'instant)
  • Ajout pictogramme Yoga + Description → activité principale mise en avant
• Section "Activités Adultes" : Activités principales →Ajout d'une  bannière vidéo  sur fond de graphismes basés sur la Typo pour HYROX, CrossTraining et YOGA

MAJ mineures

• Réductions des espacements entre les Sections "header (bulles flottantes) / nos propositions / agenda"
• Sur la tuile "Aperçu éclair du club"
  • → Augmentation de la graisse de la police des sous-titres (parfait sur écrans UHD/4K mais trop fin pour écran classique, pas assez lisible)
  • → Réorganisation des espacements et couleur textes sous-titres
• Section "activités adultes" : Angles arrondis → tuile bleue

Barre de navigation principale

• Pour plus de lisibilité (sur –navBar– et sous-menus –DropDown–):
  • → Changement de Font (police –Raleway, sans-serif–)
  • → Augmentation de la taille (1.4rem)
  • → Augmentation de la graisse (800)

Correctifs mineurs

• Caractères accentués (table de conversion UTF-8) → "Fiches Techniques Interactives" (Mémo écran et PDF)
• Augmentation de la graisse de la police de caractères → texte de base des notes de Suivi de Dev

Contenu

• Section "Box & Equipements" → suppression des images en doublons dans un 1er temps avant ajout nouvelles photos

Ré-Activation de cette fonctionnalité de suivi

• Entre le Développeur/Designer (STUDIO 🍐JPI) et l'Administrateur/Webmaster du site (Sandrine)
• Rappel accès :
  • Clic sur le logo graphique,(rond) du Header
  • ou tape sur la lettre " i " n'importe où dans le site
  • tu peux fermer la popup avec :
    • la " X " en haut à droite
    • le bouton " Fermer " en bas à gauche
    • en cliquant n'importe où hors de la popup
• On sophistiquera/complexifira ce raccourci clavier bien pratique lors de la mise en PROD

Récupération partielle → infos dernières mise à jour

v5 → en ligne (pre-PROD)

• Section "La BOX & Equipements" : Vidéo montage pour mini-vidéos vues de la salle → 5 vidéos au format iPhone en boucle Avant/Arrière. La vidéo globale est en boucle également.
• La vidéo du centre affiche d'abord le logo FT-VALAIGO.
• La vidéo est incrustée (aucune bordure de cadre vidéo) dans sa page web et se lance automatiquement lors de l'apparition dans la fenêtre d'écran visible par l'internaute.
• Le montage de la bordure vidéo (design graphique) est au couleur du site ET des vidéos en boucles (noir, bleu, blanc et ocre – murs de la salle –).

Mise en pre-PROD de la v3

• Intégration du montage vidéo (Final Cut Pro) : "Vidéo KIDS". Vidéo inscrustée dans le fond de la page web, sans cadre vidéo ni bouton de contrôle au départ. Démarrage au clic de l'utilisateur.

Nouvelle Section AGENDA → v4

• Intégration d'un Agenda FT-VALAIGO 🦬. Avec types d'évènements, Tags, filtres, ...
• Possibilités de Post, Image, Vidéo, Formulaire d'inscription, Menu Partager, PDF, Résumé, ...

Évolutions de la Section AGENDA

• 🍐 Permettre à l'utilisateur d'enregistrer des événements dans son agenda personnel (Apple, Androïd, Windows, Linux) d'u seul Clic.

Pièces isolées en attente d'intégration

• Lien à suivre pour :
  Section TARIFS
• Lien à suivre pour :
  Section BOUTIQUE
• Lien à suivre pour :
  Section HORAIRES/PLANNING
• Lien à suivre pour :
  Section EQUIPEMENTS
• Lien à suivre pour :
  Section ESPACE VISUEL FT-VA
• Lien à suivre pour :
  Section FICHES TECHNIQUES
• Lien à suivre pour :
  Section ACTIVITES EN IMAGES (détail au clic "pile 3 images" : GALERIE TOURNANTE)

Déja cette Popup d'information/Suivi

• Entre le Développeur/Designer (bibi) et l'Administrateur/Webmaster du site (toi)
• Rappel accès :
  • Clic sur le logo graphique,(rond) du Header
  • ou tape sur la lettre " i " n'importe où dans le site
  • tu peux fermer la popup avec :
    • la " X " en haut à droite
    • le bouton " Fermer " en bas à gauche
    • en cliquant n'importe où hors de la popup
• On sophistiquera/complexifira ce raccourci clavier bien pratique lors de la mise en PROD

Section de tuiles pour Fiches Techniques (FT)

• Titre de la section → avec animation du fleuve ... le Tarn !
• Scroll original pour afficher les différentes FT
• Une couleur par Activité. Peut-être convenir de code couleur pour chaque activité
• ... et cohérence dans tout le site : horaires, planning, ...
• Les tuiles arrivent en pluie de façon fluide !
• Pour l'instant une seule FT de créée (toi en Haltérophilie → bravo !).
  • J'ai mis cette FT derrière les tuiles 1, 7 et 17 pour tester le clic et surtout le RETOUR sur cette liste de tuiles au même endroit comme on le constate trop de fois sur de nombreux sites !
  • De retour d'une FT, on revient pile en scroll/animation là on l'on était au clic.
  • Marre des retours en tout début de liste après consultation
  • ... et surtout rechargement des pages en aller/retour serveur
  • ... technologie possible grace à un peu de code et gestion des cookies sur le postre de l'internaute
  • Très bon comportement en RWD (redimentionnement écran, iPad, iPhone) limite presque TipTop !

Fiches Techniques augmentées (version relativement définitive)

• Ajout d'un volet gauche (titre, description, ...)
• Ce volet disparaît (glissement) au survol de la fiche
• >Un pictogramme → pour afficher d'un coup toutes les vignettes d'informations
• Un picto → pour cibler uniquement le mouvement et supprimer l'arrière fond de l'image = mode concentration :
  • Possibilité de choisir la couleur du fond
  • Les vignettes sont transparentes donc toujours en accord chromatique avec le fond
  • Retour à l'image orignale au clic de nouveau sur picto "cible/focus"
  • Cliquer sur une pastille nro ouvre et ferme la précédente automatiquement
• Un picto → pour un menu vidéos en Popup et lecteur vidéo du systéme (MacOS ou Windows/linux) cette fois ce n'est pas ma visionneuse créée de toute pièce, pour changer et maitriser les 2 solutions
  • Ce lecteur vidéo permet d'envoyer (pour Mac seulement) sur un appareil avec Air Play (TV, grand écran, Apple TV...)
  • Mon leteur "maison" n'a pas cette fonctionnalité système (pour l'instant !)
  • Menu "Conseils Coach" avec popup simple et popup tableau et icônes
• Ajout fonctionnalité Drag & Drop pour déplacer :
  • les tuiles/infos ouvertes pour les afficher au mieux sur l'écran (clic souris puis lacher/déposer)
  • peut-être ajouter info (avec bulle info -tooltip-) sur l'écran car fonctionnalité/interactivité peu courante
  • le menu Coach est aussi re-positionnable où l'on veut pour les petits écrans mobiles
• Un picto → pour une fonctionnalité de Loupe, voir en gros plan une partie de l'image HD
  • pointer une zone et zoom dans un cercle (ai fait au mieux pour afficher TOUJOURS la loupe bien dans le cadre de l'image)
  • Fonctionne bien aussi sur iPad (et même iPhone ! en zoomant)
  • Sur iPad : 1/ je tapote la loupe, 2/ Je tapote la zone à agrandir 3/ je re-tapote pour sortir du mode Loupe
• Evolution possible : marionnette 3D avec possibilité de tourner tout autour du mannequin au-dessus en dessous contre-plongée... Tout cela avec uniquement la SEULE photo d'origine détourée et mon logiciel STUDIO-MANGA PRO + codage → résultat BLUFFANT !
• Je pense qu'aucun site de sport n'a cette fonctionnalité complète actuellement. Votre site doit être unique en design et fonctionnalités proposées

Formulaire de contact

• Section avec image de fond
• Formulaire par-dessus en transparence SANS champs de saisie
• Au survol apparition des champs avec légère animation
• Les champs ont l'option de remplissage auto du système activée
• Champs MESSAGE redimensionnable par l'utilisateur (UT). Nouvelle fonctionnalité.
  • Interface utilisateur (UI) → Tailles identiques de tous les champs sur Chrome, Firefox (FF), Vivaldi, Edge
  • Safari → petit bug léger sur la taille de la zone mais uniquement lors de l'intégration de mon dev isolé (pièce) : sera vite résolu!
• Bouton (btn) "Envoyer" original (très) et dynamique"
  • Btn remplacé par le logo FTVA dans sa version "texte" pur
  • + icône plume et animation
  • Retour utilisateur "message envoyé" sans rechargement de la page
• Nouveau bouton "Contact" d'appel du formulaire dans l'entête du site (header). Btn bicolore et couleur survol suivant position curseur blanc ou noir
• Lien Instagram basique (pour l'instant), à venir une section dédiée aux réseaux sociaux

Section "nos activités en images"

• Scroll doux jusqu'à la Section
• Animation à l'affichage du Titre & de la liste des Activités ("menu" en nuage de mots)

Galerie tournante (détail de la section "nos activités en images")

• Une sorte de manège à photos
• Cette galerie originale de photos s'affiche quand on clique/sélectionn sur une des piles (constituées de 3 images) dans la Section "nos Activités en images"
• On peut survoler les images pour une sélection (bordure décalée !) et agrandissement possible au clic de l'UT
• Boutons Précédent/suivant (action balayage écran à ajouter pour mobile)

Barre de navigation (barNav) en mode figée (sticky) après scroll

• Ajout d’une dizaine de points de ruptures (breakpoints) pour le responsiv web design (RWD). Affiche OK quelque soit la taille de la fenêtre
• RWD → du positionnent du logo-texte (FT-VA) et bien le centrer dans la barre noire figée
• Texte toujours blanc pur pour Functional Training
  • val-aigo en bleu pale sur fond bleu
  • ou val-aigo en gris pale sur fond noir pur

Animations

Titres des Sections "nos propo..." & "nos activités..."

• Effet apparition douce en Zoom du centre petit vers grand → les animamtions sont en général jouées qu'une seule fois
• Infos gérées en local poste de l'UT

Message information pour UT (utilisateur) :

Cliquez sur une activité pour filtrer toutes les photos correspondantes

• avec un petit icône SVG (Scalable Vector Graphics) une ↓ en bleu FTVA.

? pourquoi SVG → car hyper RWD, léger, et surtout pas image

• Retour à la ligne pour les petits écrans et centrage du message

Mise en page

Section "Nos activités..."

• Ajout d'espace entre le titre et le paragraphe
• Les piles de 3 photos s'affichent sur 3 colonnes au maximum possible et pas sur 2 colonnes plus tard (écrans plus petits → breakpoints modifiés pour cette section
• RWD concernant l'espace entre le nuage des Activités et les premières piles du redimentionnement de la fenêtre du navigateur
• Résolution du chevauchement en mode iPhone/iPhone SE des piles images et nuage activités
• Ajout d'une animation effet zoom version 2 sur le nuage des Activités

Barre de navigation et sous menus "tombants" (menu dropdown)

• Des légères animations au survol et icônes pictogrammes colorés dans les menus Dropdown
• Dans le sous menu 1 (Accueil), partie gauche = sorte de présentation générale/vue d'ensemble,
• si une info de ce volet gauche correspond à une Section du site alors le clic vers la section sera opérationnel
• Je vais ajouter un menu burger tout à doite, menu qui propose la liste exhaustive de toutes options une sorte de carte du votre site
• ... cela en plus des menus fonctionnels qui guident/présentent le site de façon plus indiquative

Barre de scroll vertical personnalisée FT-VA !

• Gadget mais forte identité du site avec cela
• PLus large et carrée, bleu avec dégradé
• = site très personnalisé !!!!! fonctionalité rare et nouvelle
• ok Chrome, Vivaldi, FF et Edge
• ✔ (pb résolu fin juin) → Safari : çà fonctionne mais encore un peu capricieux code à renforcer pour outre-passer les verrous Apple
• Apple n'aime pas trop qu'on modifie les paramètres système par défaut ce qui est à la base de sa grande sécurité mais j'y suis arrivé à 95% (mai) et ok 100% (fin juin)