# Site web V.Mouvet : Transfert de connaissances

## 1. FAQ post-entretien

### *A. Comment rendre le site à nouveau visible ?*

1. Se connecter avec le profil administateur
2. Visiter la page: https://webflow.com/dashboard/sites/violettemouvet-avocat/general
3. Désactiver le bouton ci-dessous
<img src="https://i.imgur.com/ikKWh6I.png" width=500 style="border:1px solid black; margin:1em;">

### *B. Comment modifier les paramètres de référencement d'une page ?*
1. Se connecter avec le profil éditeur
2. Cliquer sur "Settings" de la page concernée
3. Modifier la "Meta description" avec les mots-clés les plus pertinents

### *C. Quels seront les frais récurrents liés à l'hébergement du site?*

- Webflow, le système de gestion de contenu, coûte 192 USD par an. Le prochain paiement (automatique) aura lieu le 26 avril 2023.
- One, l'hébergeur lié au nom de domaine violettemouvet-avocat.be et gestionnaire mail, coûtera 41,87 euros autour du 18/04/2023.

## 2. Webflow: Mode "Designer"

C'est le mode qui permet d'avoir accès à l'interface complète de Webflow. Elle permet de gérer le HTML et le CSS de manière granulaire: design, interactions, code customisé, plug in. Vous n'en aurez **à priori pas besoin**, sauf si vous désirez, p.ex., rajouter l'un ou l'autre bouton :-)

Pour avoir accès au compte “Administrateur” ou “Designer” du projet Webflow, voici les identifiants à rentrer sur https://webflow.com/dashboard/login:

> Email: [e-mail]
> Password: *******

## 3. Webflow: Mode "Editeur"
C'est le mode que vous allez utiliser la plupart du temps ! Afin de rajouter ou de modifier facilement du contenu (e.g. texte, image, publication), ou de consulter les messages reçus (dans l'onglet "Forms"), je vous ai rajoutés en tant qu'*éditeurs* du projet Webflow. A cet effet, vous devriez avoir reçu sur vos adresses mail respectives une invitation à collaborer.


Pour vous y connecter, il suffit de naviguer sur le lien **violettemouvet-avocat.be/?edit** et d'entrer vos identifiants (que vous allez créer à la première connexion) dans la bannière apparaissant en bas de page.


Entre autres, l'interface vous permet en cliquant sur "*Collections*", puis "*Blog Posts", de facilement publier un nouvel article sur le site web.


Par ailleurs, pour modifier une image ou un segment de texte en particulier, il vous suffit de voyager sur la page du site concernée et de:
- Soit ajouter *?edit* à la fin de l'URL
- Soit, si vous êtes déjà dans le mode éditeur, cliquer sur "Back to live site" suivi du bouton "Edit site" en bas à droite de la page à modifier.

Enfin, il suffit généralement de double cliquer sur la zone à modifier et de confirmer la modification en cliquant sur "Publish" en bas à droite :-)

### A. Exemples du mode Editeur
#### A1. Ajouter une Publication
(En live: okay)
#### A2. Modifier la Page Présentation
(En live: okay)
#### A3. Changer les liens des réseaux sociaux
1. Se mettre en mode édition sur n'importe quelle page
2. Cliquer sur le menu de l'élément
3. Editer les paramètres du lien

### B. Ressources
A toute fin utile, je vous joins également les deux ressources ci-dessous pour plus de détails:
* Une vidéo d'introduction de l'outil: https://www.youtube.com/watch?v=t7moqInkxo4&feature=emb_logo
* Une introduction (textuelle) plus détaillée: https://university.webflow.com/lesson/intro-to-the-editor

## 4. Webflow: Forms/Contact
Il y a 2 manières d'avoir accès aux messages laissés par les visiteurs du site web:
- Soit directement dans le mode Editeur, en cliquant sur "Forms"


- Soit en allant vérifier votre courrier, sur l'adresse mail professionnelle créée à cet effet: [e-mail]


## 5. Adresse mail professionnelle: One
- Pour se connecter à l'interface Webmail en ligne, visiter simplement https://mail.one.com/
<img src="https://i.imgur.com/zauPRwE.png" width=500 style="border:1px solid black;margin:1em;"> et rentrer les identifiants habituels
- Il est également possible de synchroniser la messagerie sur iOS ou Mac en suivant quelques étapes, dépendamment du logiciel utilisé. Toutes les informations sont reprises sur cette page: [ : Configuration des programmes de messagerie](https://help.one.com/hc/fr/sections/115001513365-Configuration-des-programmes-de-messagerie)
- Par exemple, pour synchroniser la messagerie avec iOS: https://help.one.com/hc/en-us/articles/115005586709

## 6. Podcasts via Podbeam

(En live: okay)

- Se connecter: https://www.podbean.com/login (identifiants habituels)
- Pour intégrer un podcast dans un article:
1. Cliquer sur "Share & Embed"
2. "Copy" le code à intégrer
3. Colle le code en question, dans le blog post en question, en sélectionnant l'icône "balises"

## 7. Gestion des rendez-vous: Calendly
(En live: okay)
- Se connecter: https://calendly.com/login (identifiant: [e-mail], mot de passe habituel)

<!--
## 8. Facturation
(En live: okay)

#### ✅ A. Webflow: Màj du paiement mensuel automatique

:::info
Notez qu'avant le 7 mai (j'ai effectué le premier versement mensuel) il faudra encoder votre moyen de paiement VISA et souscrire à un abonnement annuel.

La modification se fera via https://webflow.com/dashboard/sites/violettemouvet-avocat/billing/manage, en cliquant sur l'onglet "Annual", puis sur "Switch from monthly...".


Une fenêtre s'ouvrira alors, il **faudra modifier le numéro de la VISA** avant de procéder au paiement :-)


:::
--->

#### ✅ B. One: Paiement annuel à màj

#### ✅ C. Facture Droits d'auteur envoyée

## 8. Mailchimp
(En live: okay)
- Se connecter: https://calendly.com/login (identifiant: Vmouvet)

### A. Terminer la configuration
(En live: okay)
### B. Démo
(En live: okay)
### C. Importer une audience
(En live: okay)

## 9. Webflow: help ?
Si vous avez la moindre question vis-à-vis de Webflow, notez que vous bénéficiez d'un accès gratuit à la documentation et la communauté Webflow (Forum) ici : https://forum.webflow.com/, autrement bien sûr, je reste disponible ! :-)

## 10. Annexes

### A. Identifiants de comptes

| | Compte | Login | Password | Remarques |
| --- | ------------------------------------ | ----------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------ |
| https://www.violettemouvet-avocat.be/?edit | Webflow (Editeur) | [e-mail] et [e-mail] | *Défini lors de la première connexion* | Permet de modifier le contenu: texte, images, podcasts |
| https://webflow.com/design/violettemouvet-avocat | Webflow (Admin/Designer) | [e-mail] | $$$ | Permet de modifier le design avancé des pages, et la facturation Webflow |
| https://mail.one.com/[e-mail]/INBOX/ | Mail Pro: One | [e-mail] | $$$ | |
| https://www.podbean.com/site/userCenter/profile | Podcast: Podbeam | [e-mail] | $$$ | Permet de gérer les podcasts à intégrer |
| https://calendly.com/event_types/user/me | Calendly | [e-mail] | $$$ | Gestion des rendez-vous |
| https://www.one.com/admin/frontpage.do?locale=fr | Hébergement & Domaine: One | [e-mail] | $$$ | Permet de gérer la configuration de la messagerie, le nom de domaine (paramètres DNS), et la facturation One |
| https://mail.protonmail.com/u/8/inbox | Protonmail (Billing) | [e-mail] | $$$ | Compte mail utilisé pour gérer tous les comptes liés au site web. C'est là qu'apparaissent toute la "paperasse" de Podbeam, Webflow, One. |

### B. Autres Ressources

- Compression images: https://compressor.io/
- Compression PDF: https://smallpdf.com/compress-pdf

----

# Site web V.Mouvet: Meeting 09/08

## 1. Optimisation SEO

### A. Pertinence au niveau technique


:::info
NB. Après avoir validé la "sitemap" auprès de Google Search Console, le site est déjà bien remonté dans le référencement :-) (mea culpa)
:::


Théoriquement tout est réglo, le score théorique SEO est de 100% ! (existence des “metaparamètres”, de la “sitemap”, vérification DNS auprès de Google Search, vitesse de chargement du site, design adapté mobile, ...)

### B. Pertinence du contenu des pages p/r aux mots-clés SEO

*Comment modifier les paramètres de référencement d'une page ?*
1. Se connecter avec le profil éditeur (via Google Chrome)
2. Cliquer sur "Settings" de la page concernée
3. Modifier la "Meta description" avec les mots-clés les plus pertinents

### C. Cross-référencement 

C'est simplement le fait que plus un site est référencé sur un autre site "pertinent", plus il va gagner en crédibilité et donc en visibilité !

#### Tip n°1: maximiser les liens possibles :-)
- LinkedIn
- Instagram
- Facebook
- ...
#### Tip n°2: créer un profil Google Business et recueillir des avis
- Tutoriel: https://mobilosoft.com/tuto-creer-page-google-my-business/
- Get started: visiter et suivre les étapes https://www.google.com/intl/fr_be/business/ :-)

### D. Engagement par rapport au contenu créé

Là ça dépend uniquement de statistiques que récupèrent Google, telles que le "temps d'interaction" d'un visiteur sur un article ou une page du site :)

## 2. Optimisation éco-conception
:::info
Le site obtient déjà un excellent score mais, avec ton accord, j'aimerais bien essayer de l'optimiser :-)
:::

- Essais/erreurs websitecarbon.com & GreenIT Analysis
- Images -> compresser & convertir au format .webp
- Pop-up Calendly au lieu d'une page

## 3. Ajustements design

- Redynamiser certaines couleurs (cfr. couleurs des publications)
- Footer: réaligner "Menu"
- Podcast:
- Full width
- Page Blog
- Bannière
- Encadrer catégorie
- Refaire la bannière "Restons connectés"
- Redonner du "peps"
- Bouton
- Fond
- Bannière "Une question"
- Lien vers FAQ
- Ajouter logo Pwablo (format .svg)

:::info
Bien sûr, avant confirmation de ta part, les modifications seront publiés sur:
- https://violettemouvet-avocat.webflow.io/

:::

<!--
Page
-->
## 4. Document "Transfert de connaissances"
- Je vais le simplifier :-)

## 5. Publication IG ce vendredi ou lundi prochain ?

| | | |
| -------- | -------- | -------- |
|  |  |  |

<!--


Au niveau du référencement "technique", d'après l'outil de Google "Lighthouse", tout semble coller et le score théorique est de 100% :-)

- Désactiver l'indexation de webflow.io
- Création automatique du plan de site, XML
- Google Search Console
- google-site-verification=xxxx
- 

- Optimiser les mots-clés des pages et des articles
- Le méta titre
- La méta description
- L’URL
- Les différents niveaux de titre (Hn)