Notes de mises à jour

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)