Maintenance et évolutions – Stéréo Club Français

Préparation d’une évolution du site – fin 2022

Révision de la page d’accueil

Appel à contribution et maquette illustrative

Au dernier CA du SCF , on a prévu de solliciter les membres pour proposer le contenu de la prochaine page d’accueil du site.

La bannière le menu horizontal et le sommaire restent ;
Le corps du texte peut -être organisé en blocs ou pavés pour faciliter l’accès .
Avec ou non couleur de fond, cadre, et selon divers arrangements dont :
– zone horizontale avec une image, le texte à droite passant en dessous sur smartphone
– pavé constitué de de 4 sous-blocs pouvant contenir du texte et éventuellement une image. Taille adaptée à la vision sur smartphone.

Les possibilités de présentation (selon mes capacités) sont illustrées dans la page : Lien provisoire Accueil2

Remarque :la taille des images est limitées à 310px en largeur, et peut varier en hauteur, mais en fonction du bloc (255px ou 320px)
Pour une image à hauteur faible, on peut limiter le bloc en hauteur ( exemple de code html <div style=”height : 212px;”…)

Liste des blocs/pavés de page d’accueil

1) Première proposition FL

– Titre (3 lignes)
– Actualités ( à mettre à jour très fréquemment, nécessité d’un responsable;
– La Lettre, avec des items :
            pour tout public : Une, sommaire, ….
            pour les adhérents : Lire la dernière Lettre, Accès aux images , Index, etc…
– Activités (4 sous-blocs)
       Calendrier – Annuaire – Documents (administratif)
       Groupes de travail
       Adhésion, cotisation
       International-Partenaires
– Les Images :       Comment voir, Médiathèque, liens ponctuels
– Comment Faire (4 sous-blocs)
       Démarrer/ Débutants … ou « Kit pour le nouveau stéréoscopiste »
       Traiter et montrer (SPM, diaporama, publier projeter , …)
       Techniques avancées
       Quatrième bloc disponible
– Théorie – Histoire – Glossaire … Comprendre la stéréoscopie.

2) Contribution Patrick Demaret jeu. 05/01/2023

1) jeu. 05/01/2023 : deux thèmes me paraissent dignes d’être présentés en première ligne:
-“Programme ” indiquant les dates des événements à venir :visioconférences, foires,CA…comme dans la Lettre
-“News”: nouveautés: nouvelles de dernier moment, exposition en cours … etc…..

2) mar. 10/01/2023 18:55 .. (après vision de maquette)
Je ne le voyais pas tout-à-fait comme cela, …
Les deux premiers blocs sont parfaits…
La typographie me convient, le fond en couleurs pastel agréable, …
Les blocs sont bien individualisés par des fonds de couleurs différentes.
Les blocs suivants peuvent suivre la même présentation….
Après ces deux blocs fondamentaux , il est difficile de choisir le thème des suivants.
“calendrier, annuaire,documentation”:un fourre-tout?
-groupes de travail:si c’est les groupes de rencontres, il y en a une douzaine, difficile de tous les présenter en une page.
Ou mettre la liste, avec adresses mail des animateurs (s’ils sont d’accord pour publier leur adresse , ou mettre en accès réservé aux adhérents).
-Adhésion , cotisation: il y a déja “adhésion” dans le menu horizontal et “adhésion cotisation” dans le sommaire..
Il faudrait présenter l’intérêt d’adhérer..Je peux fournir une photo de présentation du contenu du kit de bienvenue et un texte.
-un bloc “prochains évènements” si le bloc “actualités” ne les présente pas (des événements comme Bordeaux ou Gaillac ont intérêt à etre annoncés au moins six mois à l’avance).
-le groupe “Nouvelle Aquitaine” souhaite-t-il disposer d’un bloc spécifique?
– “comment faire”,”comprendre”,”espace membres” (accés réservé),”Edition gestion”(réservé) méritent-ils un bloc?

Évolutions techniques demandées

2) Création d’une annonce d’un évènement ; exemple de procédure pas à pas :

Pour annoncer l’évènement : deux actions ou 3
a) créer un petit article ad hoc
b) le signaler sur la page d’accueil
c) éventuellement : ajouter un item dans le calendrier

a) créer un petit article ad hoc
aller à Calendrier puis cliquer “Articles sur divers évènements”
(en étant connecté avec droits ad hoc) cliquer sur “Nouvel article”
renseigner un titre explicite : “L’Egypte en 3D à Saint-Louis (Haut-Rhin) du 13 janvier au 4 mars 2023”
déclarer le texte (précaution : cliquer l’icone abc en bas de barre d’icones)
Je tape une première ligne
puis je copie le texte fournit dans le mail de Pierre

J’ai enregistré sur mon PC une image jointe au mail de Pierre
Je peux alors la présenter dans l’article :
j’importe sur le site une image, icone image “Insérer/Modifier Image”
Il faut choisir le bon dossier/répertoire, ici : articles_divers/Evenements
Mode d’emploi pour importer image :
https://www.image-en-relief.org/stereo/espace-membres/pages-personnelles/169-creation-de-page-personnelle#images

Je vérifie l’onglet Publication
notamment “accès” : Public (c’est là où on peut réserver aux adhérents)
(comme c’est à accès public, je n’ai mis en image que l’affiche et pas le carton d’invitation)

Puis enregistrer / sauvegarder
Je vois que l’article est en haut de la liste
je copie le titre

b) le signaler sur la page d’accueil
Retour Accueil
Je descends à la partie d’annonce (au dessous 3 images) et je clique “Modifier”
(précaution : cliquer l’icone abc en bas de barre d’icone)
J’ajoute l’annonces au-dessous de L’annonce de la Lettre de Janvier :
… par copier-coller du titre figurant dans la liste des évènements divers

Maquette et bascule de la page d’accueil

catégorie Accueil2

Plusieurs articles 1 par blocs, dans la catégorie “Accueil” pour préparer et maquette, création de catégorie Accueil2
on sauvegardera les articles actuels de la catégorie “Accueil” et on transportera les articles de Accueil2

Articles pour la page d’accueil – RÉVISION<br/>
Sera Utilisé comme blog par lien de menu Accueil (alias home) <br/>
Dans l’item de menu, onglet affichage du blog, on a “Ordre des articles” => “Ordre des articles”(par opposition à alphabétique, les plus récents …)<br/>
“Nombre de colonnes” =1; dans “paramètres” : Titre de l’article : “masquer”;

Mise en page – CSS

Un blog d’articles a un container avec marge (padding) de 25px
Les containers actuels floating-zone1 (contenant floating-image1, floating-legende1) sont trop larges pour passer sur smartphone
(Pour utilisation dans un article affiché directement, on a floating-youtube qui passe (sans marge de blog )

il faut donc réduire les containers : floating-zoneA, floating-imageA1 avec titre et sous-titre, floating-imageA2 sans sous-titre, floating-legendeA) largeurs: 320, 314, 314, 300

Plus container pour texte à coté, élastique ? .floating-zoneB

Un bloc peut contenir quatre parties “floating-zoneA” avec une imageb ou du texte; ou une floating-zoneA pour image , et une floating-zoneB pour texte,

Cadre pour bloc: bord-bloc… à mettre au point

Lien provisoire Accueil2

1) Image animée, 3 modalités

– “mp4” = fichier vidéo, léger au chargement, fluide, … possibilité de contrôler (arrêter) mouvement en positionnant le curseur sur l’image
respecter les attributs autoplay=”autoplay” loop=”loop” muted=”muted” controls=”controls” ; exemple :
<video src=”/stereo/images/une/Calcite Champagnole 103mm_reduit.mp4″ autoplay=”autoplay” loop=”loop” muted=”muted” controls=”controls” width=”416″ height=”263″></video>

– “15ms” = gif animé , plus lourd, moins fluide (1 image toutes les 15 millisecondes) animation permanente NON contrôlable par le visiteur

– “30ms” = gif animé , plus lourd, moins fluide (1 image toutes les 30 millisecondes) animation permanente NON contrôlable par le visiteur

Calcite Champagnole – Michel Fels
Animation logiciel zédification = focus stacking : mp4

Calcite Champagnole – Michel Fels : 15ms

Calcite Champagnole – Michel Fels : 30ms