Créer un site internet : les indispensables à connaitre

Formation pour créer un site internet

Formation à la carte, 40€ / heure (pas de TVA), en visio avec partage d'écran (à enregistrer si vous le souhaitez).

« Formation » signifie pas de blabla ni de considération généraliste sur l’avenir d’internet ou les avantages & inconvénients de l’intelligence artificielle.
Après avoir écouté vos besoins, nous définissons les sujets à développer et ceux à passer rapidement, voire à ignorer (cf Sommaire ci-dessous).
Il s’agit d’une vraie démarche, concentrée sur votre projet. On est efficace, dans un échange convivial et détendu.

« A la carte » signifie que la formation est adaptée à vos besoins, mais aussi à votre niveau technique, à votre rythme et aux connaissances que vous souhaitez acquérir.

La plupart des notions s’appliquent quel que soit l’outil (le CMS) utilisé pour créer votre site internet.
Ces notions s’appliquent quel que soit l’objet du site : vitrine, boutique en ligne …

Si votre projet inclut un sujet « pointu », qui nécessite un développement ou des compétences très précises, je n’hésite pas à préciser jusqu’où s’arrêtent mes compétences et j’essaie de vous conseiller un spécialiste.

Les compétences acquises lors de la formation ne feront pas de vous un webmaster professionnel, mais elles constituent une base solide qui vous permettra de savoir comment rechercher sur internet un sujet que vous souhaitez creuser par vous-même. Également vous serez moins « béotien » lors d’un échange avec un technicien (chez l’hébergeur par exemple).
Vous serez autonome et si un besoin plus spécifique survient, je pourrai intervenir ponctuellement de mon assistance joomla (40€/heure).

Dernier point, être plus à l'aise sur un vaste sujet avec de nombreuses ramifications parfois un peu techniques, n'a pas de prix quant au gains de calme et de sérénité acquis. 

Structure d’un site internet

Durée : entre 0.5h et 2h selon les besoins

Un site est composé d’une base de données et de fichiers.

La base de données contient vos … données : textes affichés sur le site, catégories, utilisateurs, réponses aux formulaires, informations produit pour une boutique en ligne etc…
Une base de données est composée de tables par type de donnée : une table pour vos articles, une table pour vos utilisateurs etc…
Plus votre site est important plus vos tables augmentent en taille. Plus votre site contient de fonctionnalités, plus le nombre de tables est important.

Les fichiers sont de 2 types :

• les fichiers du logiciel (CMS ou Content Management System) utilisé pour le site (Wordpress, Joomla…)
• vos propres fichiers : principalement les images (cf. ci-dessous), mais aussi vos PDF, Word etc…

Les fichiers se présentent selon une arborescence très similaire à celle dans l’explorateur de fichiers de Windows.

Pourquoi est-ce important de maîtriser cette structure ?

• comprendre comment sont organisées les informations (sans connaitre les détails), c’est déjà une compétence que 90% des propriétaires de site n’ont pas ! Cela vous permettra de réfléchir aux évolutions du site, à d’éventuelles anomalies et de savoir (un peu) mieux échanger avec votre hébergeur. Par exemple, votre hébergeur peut vous demander si vous souhaitez restaurer les fichiers, la bdd ou les 2. Il faut être capable de comprendre la question.
• être capable d’effectuer une sauvegarde manuelle/restauration (de la bdd par exemple),
• apprendre à manipuler quelques données (export vers Excel par exemple),
• à l’occasion de la création d’un site de test par duplication du site de production, il faut comprendre ce que l’on fait,
• si vous avez plusieurs sites, la connaissance des noms et de la composition des bdd, permet d'éviter erreurs et confusions,
• savoir où se trouvent les quelques fichiers essentiels et bien comprendre ce que signifie "à la racine du site" (utile pour certains réseaux sociaux et pour Google Webmaster Tools, cf. chapitre concerné),
• cela permet de comprendre comment changer d'hébergeur et que cette démarche et vous est accessible.

Pour la base de données nous voyons ensemble :

Un exemple de base de données :

Identifier si une table est vide ou pas.
Accéder au contenu d'une table (cf. image ci-dessous une table de contenu des articles).
Trier les tables et les optimiser.
Pour aller plus loin, on peut voir la procédure pour supprimer ou vider certaines tables, dans quels cas il faut le faire, et quelles précautions sont nécessaires avant ces actions.
Également, la connaissance même succincte de la bdd et de ses tables, permet de gérer des besoins ponctuels (mot de passe administrateur à réinitialiser, export de données…).
Chaque table est composée de lignes (1 par élément de contenu), et de colonnes (x colonnes spécifiques à chaque table puisque chaque table est associée à un contenu différent). Il faut juste connaitre ce principe qui sera utile si on exporte une table : 1 ligne de la table = 1 ligne sous Excel, 1 colonne de la table = 1 colonne sous Excel.

Outil utilisé : PHPMyAdmin :

La base de données est en général de type MySQL (peu importe ce mot technique "MySQL", il est cité ici pour que, dès que vous rencontrez ce terme, vous fassiez le lien avec le sujet de la bdd).

Nous voyons ensemble comment accéder à la bdd via PHPMyAdmin (outil commun à tous les hébergeurs).
Les 3 identifiants de connexion à la bdd sont : serveur, utilisateur, mot de passe. Selon l'hébergeur, il est nécessaire de connaitre ces identifiants ou pas.
[avancé] Où sont indiqués ces identifiants chez votre hébergeur (et la création d'un utilisateur).
[avancé] Le lien avec le fichier de configuration de votre site.

Pour les fichiers nous voyons ensemble :

Un exemple d’arborescence de fichiers:

L'arborescence dépend bien sûr du CMS choisi. Chaque CMS présente une structure différente.
Il est utile de visualiser :

• comment repérer une anomalie : tris par taille et date des fichiers (taille anormale),
• dans quel dossier se trouvent les images. Il vous est possible en FTP (File Transfer Protocol) de charger en masse un grand nombre d’images,
• dans quel dossier se trouve la maquette/le template (sans rentrer dans les détails)
• les fichiers situés à la racine du site (sans rentrer dans les détails)

Comment accéder à votre arborescence de fichiers via FTP:

L'outil le plus communément utilisé pour accéder à l'arborescence des fichiers de votre site est Filezilla 
Outre les visualisations/tris évoqués précédemment, Filezilla permet de gérer les échanges de fichiers : PC vers serveur / serveur vers PC.
Nous abordons les précautions à prendre avec cet outil, simple à utiliser, mais une erreur peut aussi être facilement commise.
Les 3 identifiants de connexion FTP sont fournis par votre hébergeur : hôte (ou adresse Ip du serveur), utilisateur, mot de passe. En général le port est 21 et le protocole FTP.

Développement / Production

Durant la phase de développement tout est permis : ajouts, suppressions et modifications d'urls. Aucune url n'est indexée par les moteurs de recherche.
Dès que le site est en production, l'ajout d'url est évidemment favorable au site, la modification d'url est interdite ou nécessitera une redirection, la suppression d'url nécessitera une action sous Google Search Console.

Donc le site en développement doit être finalisé à 100% au niveau des urls avant mise en production.

Vous pouvez créer au niveau de votre hébergement un sous-domaine de test : "test.monsite.fr". Il ne sera jamais indexé à condition de le mettre en no-follow/no-index.
Vous pouvez mettre votre site simplement en no-follow/no-index.
Vous pouvez mettre votre site hors-ligne.

Ces notions sont expliquées durant la formation.

Choix de l’environnement : registrar / hébergeur / CMS /  template

Durée : entre 0.5h et 1.5h - GRATUIT

Registrar : organisme qui enregistre votre nom de domaine (souvent c’est l’hébergeur qui est le registrar). Vous réservez le nom de domaine pour une durée en années - importance du renouvellement.
Il est possible de transférer un nom de domaine d'un registrar vers un autre (code Auth).

Hébergeur :

Voici les principaux critères de choix de votre hébergeur:

• qualité et rapidité du support
• performance (puissance du serveur pour un affichage rapide de votre site)
• analyser les fonctionnalités incluses (nombre de bdd par exemple)
• services et qualité de l’interface d'administration (parfois appelée CPanel). Parmi les services, il faut connaitre les conditions de sauvegarde (nombre de jours d'archives conservées pour les fichiers et la bdd), l'heure de la sauvegarde chaque jour, l'outil de restauration (la sauvegarde étant un traitement automatique).
• niveau de sécurité
• coût

Au fil des années j’ai pu expérimenter plusieurs hébergeurs. Je peux vous conseiller.

CMS :

Le choix du CMS (Content Management Sytem) dépendra de votre projet et de l’expression de vos besoins. Par exemple, de manière extrêmement schématique, un site très simple sera plutôt à réaliser avec Wordpress, une boutique en ligne (sans autre type de contenu) sera plutôt réalisée avec Prestashop, un site plus complet peut être réalisé avec Joomla… Je peux vous conseiller.

Template (maquette) :

Je recommande vivement un template payant quel que soit le CMS choisi. Les template ne sont pas chers (autour de 50€), c’est une vraie opportunité pour bénéficier d'un support sur 6 mois/1 an.
Le choix du template vient après le choix du CMS, et il doit se porter sur les fonctionnalités bien plus que sur le design. celui-ci pourra toujours être modifié soit par vous, soit par un prestataire, sans que cela soit coûteux. Par contre, les fonctionnalités doivent vous convenir parfaitement, en rajouter peut être simple ou plus complexe donc plus coûteux (ou vous prendre du temps de recherche et de mise en place).

Bon à savoir, un template est commercialisé par un éditeur d'extensions. Si votre template ne contient pas de base une fonctionnalité (par exemple une galerie photos), vous pouvez évoquer cette question avec le support qui vous conseillera une extension (du même éditeur ou d'un autre éditeur), compatible avec votre template.

A tout moment vous pouvez changer de template, cela ne remet pas en cause votre installation ni vos données.

Concernant le CMS Joomla, je peux vous fournir un template professionnel gratuitement (ci-dessous un exemple).
Voir notre article "Les meilleurs templates Joomla"

La console Chrome/Firefox

Durée : 0.5h

Cet outil incontournable présente plusieurs intérêts:

• Naviguer dans la structure d’une page

Schématiquement un site est composé de blocs, affichés les uns à côté des autres de gauche à droite, puis lorsqu’il n’y a plus de place en largeur, le bloc suivant se place en-dessous. 
C'est le template (la maquette) qui pilote cette organisation des blocs.

Il arrive qu'une page soit un peu compliquée avec de nombreux blocs, la console permet d'identifier rapidement l'identifiant du bloc que l'on souhaite modifier et qui sera très aisément retrouvé dans l'administration (ci-dessous exemple avec Identifiant "97").

• Afficher la vue mobile du site sans utiliser son téléphone : en cas d'anomalie ou d'affichage non souhaité en vue mobile, la console sur PC permet de comprendre ce qui se passe 

• Trouver les paramètres graphiques d’un contenu

Souvent on souhaite tester/vérifier si un texte serait plus visible en plus gros caractères, si la couleur de la police ne serait pas mieux en plus foncée, si une police différente ne serait pas plus esthétique etc…
La console Chrome/Firefox peut nous aider de façon très simple à simuler des changements graphiques.

On peut donc visualiser la codification css qui détermine tous les aspects graphiques du site, pour pouvoir ensuite la modifier durablement sur le site (cf chapitre suivant sur les ajustements graphiques avec les css).

L'animation ci-dessous illustre dans la première image l'état initial du titre de couleur noire #302237, et dans la seconde image un essai de couleur rouge "red" pour le même titre (site https://www.lamaisondezelie.net/).

Slide

Slide

Ajustements graphiques avec les css

Durée : entre 1h et plusieurs heures

Quoi de plus frustrant de souhaiter une amélioration graphique, même minime, et ne pas pouvoir la réaliser. De nombreux cas sont parfaitement accessibles à un débutant (cf liste ci-dessous).

Vous allez pouvoir mettre en place des améliorations graphiques grâce aux css. Ce sont des paramètres qui permettent de codifier tous les aspects graphiques d’un site. Ils sont régis par une écriture rigoureuse mais non complexe (ce n’est pas de la programmation).

Comme indiqué au chapitre précédent, la console Chrome/Firefox sera d'un grand secours pour comprendre les css présents sur le site et comment les modifier.

Ils sont stockés dans les fichiers de votre template et du CMS.
Pour personnaliser les css sous Joomla, il faut les intégrer dans un fichier de type « custom.css » ou dans un espace dédié souvent intitulé "Personnalisation css", cela dépend de l'éditeur du template.
Pour personnaliser les css sous Wordpress, il suffit d'aller en Apparence / Personnaliser / CSS additionnel.
A chaque enregistrement de vos ajouts de css, ceux-ci seront compilés avec tous les css existants. Il suffit d’actualiser votre page, pour vérifier qu’ils sont pris en compte.

Les modifications graphiques (et les css) les plus simples (débutant):

• Couleur des textes : paragraphes, titres, éléments de menu, icônes…
• Couleur de fond : uni, dégradé,
• Taille de police de caractères,
• Hauteur de ligne,
• Famille de police,
• Gras, italique, souligné, majuscule …
• Bordure : épaisseur, couleur, arrondi…
• Ombré : texte, block,
• Marge externe (margin) et interne (padding),
• Alignement gauche-centré-droite,
• Mettre un point ou "marker" pour une liste comme celle-ci.

Ci-contre une application d'un certain nombre de css spécifiques sur un module en page https://www.dextra-transport.com/case-studies/ammonium-modular-transport.
Et ci-dessous quelques css qui dessinent le block "Project Datasheet":

div.sidebar-right.moduletable {
  padding:10px;
  border:1px solid #0066b3;
  border-radius:20px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

Les améliorations (et les css) un peu plus élaborés:

• Image de fond
• Largeur et hauteur
• Tout effet autour d’un lien (survol, lien actif d’une liste, …), et donc comment réaliser un bouton
• Effets de transition
• Utilité d’une classe css
• Mettre un style (couleur par exemple) au dernier élément d'une liste, ou au Xième (cf. image ci-dessous - site https://www.kinesiologie-penellon.com/ - pour attirer l'attention sur une page importante, telle que le blog).

Quelques notions de HTML très simples sont vues ensemble pour comprendre comment s’appliquent les css.

Pour aller plus loin, vous pouvez consulter notre article qui présente quelques exemples de notre formation en matière de css.
Il est bien précisé que se former aux css est très utile pour améliorer graphiquement un site et que ce n'est pas réservé aux développeurs. Il faut juste apprendre quelques conventions et être un peu rigoureux pour appliquer la syntaxe.
De plus, on ne peut pas casser un site en modifiant son css, il n'y a pas de risque.

Le référencement

Durée : de 0.5h à 2h

L’objectif n’est pas de devenir expert en référencement (SEO en anglais). 
Cette formation vous permet de définir une démarche, de comprendre ce qui est essentiel et ce qui est secondaire, mais aussi d’éviter des erreurs qui sont parfois difficiles/longues à corriger.

Axes de réflexion pour votre démarche de référencement

• Quel public est ciblé ?
• Identifier les mots-clés qui correspondent à votre activité, analyse de la concurrence, mots-clés principaux vs longue traine.
• Bien choisir le nom de domaine
• L’ancienneté du site
• Contexte multi-langues :
  . différence entre .com, .fr etc …
  . structure des urls permettant de différencier les langues
• Comprendre le principe du contenu dupliqué

Les principaux contenus qui ont un impact direct sur le référencement

• titre de page
• meta-description
• titre h1

Les contenus secondaires ayant un impact sur le référencement

• titres h2, h3 ...
• textes (comment écrire en ayant son mot-clé clairement à l'esprit, nombre de mots par page)
• images
• videos

Une construction de site adaptée au référencement : conseils incontournables

• L’impact d’une organisation structurée des titres + outil de test de votre structure (cf. image ci-dessous)
• L’impact d’une navigation bien pensée et des liens internes
• Les urls : structure, syntaxe, longueur...
• Erreurs à éviter pour les urls (modification en production)
• Le plan de site
• L’importance du poids des pages
• L’importance des actualités
• Faire vivre un réseau social

La notion de qualité globale pour le site

Les moteurs de recherche analysent les sites selon leurs propres critères de qualité. cette notation, impossible à connaitre en détail, impacte directement le positionnement du site.

Cependant plusieurs critères sont reconnus dans la communauté du SEO, nous les évoquerons ensemble.

N'hésitez pas à consulter quelques exemples de notre accompagnement en matière de référencement naturel.

Google Webmaster Tools

Durée : entre 0.5h et 1.5h

Cet outil est gratuit et est amplement suffisant pour analyser le trafic du site, en tout cas au démarrage.

Principaux sujets abordés et exemples:

• Créer sa propriété et méthodes de validation
• Comprendre le principe de l’indexation des pages
• Comprendre les anomalies signalées par GWT : celles qui sont importantes, celles qui sont secondaires voire négligeables
• Liens externes (principe no-index / no-follow)
• Import du plan de site, lien avec le fichier « robots.txt »
• Les requêtes les plus populaires : nombre d’impressions, nombre de clicks
• Tester sur une période de nouveaux mots-clés
• Les pages les plus populaires
• La comparaison par rapport à une période précédente ou identique (année N-1)
• A partir d’un certain niveau de trafic, vous bénéficiez d’un environnement synthétique « Google Search Insight ».

Les aspects légaux

Durée : de 0.5h à 1h

Principaux sujets abordés et exemples:

• Comment rédiger les mentions légales
• Comment rédiger la Politique de Gestion des Données Personnelles
• La question des cookies
• Les contraintes du RGPD : formulaires, utilisateurs internes, fichier client ou destinataires de newsletter…

Intégrer des visuels utiles

Durée : entre 1h et 2.5h

• Comment insérer une Google Map (ci-dessous)
• Comment insérer une vidéo postée sur Youtube
• Comment obtenir l’affichage d’une case à cocher anti-spam « Je ne suis pas un robot »
• Comment insérer un widget (iframe) en provenance d’un autre site : des avis, un planning, une publicité…
• Comment intégrer un accordéon, des onglets...
• Comment créer et afficher une pop up

Optimiser les performances (rapidité) de votre site

Durée : entre 1h et 2h

• La gestion optimisée des images + lazyload
• Pourquoi et comment compresser les images et les PDF
• Identifier les programmes chargés et l'intérêt de faire le ménage de ceux qui ne sont pas utilisés
• Eviter des chargements externes (fonts, iframe)
• La compression Gzip (données et fichiers)
• Outils de compression des css et Javascript
• Tester la vitesse de chargement du site et comprendre les anomalies/pistes d’amélioration (outils de test de performance)
• L'optimisation pour mobile (srcet et affichage desktop / mobile)
• Pourquoi et comment rechercher des liens brisés (qui mènent vers une page qui n’existe plus) sur votre site
• [avancé] La gestion des redirections.

La sécurité

Durée : entre 0.5h et 1.5h

La qualité de l'hébergeur est fondamentale en matière de sécurité (cf Choix de l'environnement). D'autres aspects complémentaires en matière de sécurité sont à connaitre et maîtriser:

• La gestion de la connexion à l'administration du site et à l'hébergement.
• Le certificat Let's Encrypt pour le protocole https.
• Solution pour réaliser des sauvegardes et restaurations vous-même (en plus des sauvegardes de votre hébergeur)
• Formulaires : où placer un formulaire, comment activer l'anti-spams "Je ne suis pas un robot", choix de l'adresse mail de l'expéditeur...
• Gestion utilisateurs et mots de passe (paramétrage du niveau du mot de passe), filtre et protection anti-spams (selon CMS).
• Le cryptage des email affichés explicitement dans le contenu.
• Selon vos besoins, conseils de choix de solution de paiement en ligne.