Please enable JavaScript.
Coggle requires JavaScript to display documents.
Lunch and Learn web - scéance 1 - Coggle Diagram
Lunch and Learn web - scéance 1
Techno utilisée chez Graph, WP avec Elementor principalement
Pourquoi on prend WP ?
Avantages
Gratuit
Support communautaire / documentation
Multitude de plugins
Interface admin facile d'utilisation pour le client
43.2% des sites web en 2022 utilisent WP.
PHP, le language utilisé pour coder WP, est le langage le plus utilisé sur le web.
Inconvénients
Performances appauvries
Sécurité (extensions vulnérables)
Pas de contrôle sur le versioning des extensions
Qu’est-ce qui existe sur le marché à part WP ?
Drupal
Avantages
Open source (gratuit)
Équipe de dévellopeurs de la communauté
Très sécuritaire
Inconvénients
Excessivement complexe
Pas très orienté mobile
Designs gratuits manquants
Shopify / Wix
Avantages
Facile d'utilisation
Sécuritaire
Panoplie de designs disponibles (gratuits/payants)
Inconvénients
Plateforme restreignante
Manque de flexibilité (LIQUID)
Énormément de fonctions payantes
Code pûr / librairies
Avantages
Liberté de personnalisation
Support communautaire / documentation (StackOverflow, GitHUB)
Outils de design entièrement personnalisable (Bootstrap)
Inconvénients
TRÈS long
Mises à jour des librairies complexes, voire non-fonctionnelles
Complexe pour la manipulation par le client
Extensions régulièrements utilisées
Elementor
Configuration du site
Styles généraux (fontes, les couleurs du projet, tailles des polices, "mémoire du site")
Configuration des pages
Interface drag and drop qui permet d'ajouter des contenus divers à une page web
CF7 / CFDB7 / Google sheet connector / MC4WP
CF7: génère un formulaire HTML lors de l'appel de son "shortcode" dans la page
CFDB7 :Garde en mémoire dans la base de données chacune des soumissions des formulaire de contact (sauvegarde des leads)
Google sheet connector : Permet de mapper les champs d'un formulaire de contact dans un classeur google sheet
MC4WP : Permet l'ajout automatique (lorsqu'accepté par l'utilisateur) à la liste de distribution d'une infolettre.
Admin columns pro
Permet de visualiser dans l'interface admin WP les champs d'un type de publication custom
Advanced custom fields / JetListing
Permet de faire des types de publication qui ne sont pas supportées nativement par WP (WP ne supporte que les articles de blog)
Permet une personnalisation entière d'un type de publication et les champs s'y trouvant (EX: Unité du sélecteur de plans)
Coquille "vide" d'une publication
Publications ensuite crées en PHP pour remplir chacun des champs
WP Rocket
Mise en cache du site, augmente les performances du site
Créer une "copie" du site plus facilement atteignable que directement sur le serveur
Wordfence
Permet de configurer des alertes de sécurité lors d'une connexion au site
Bloque la lecture des username sur un site.
SliderRev
Permet de créer des slider animés
Souvent utilisés en haut de page
Progressivement mit de côté pour Elementor
Crocoblocks
Librairies composées de plusieurs extensions ajoutant des fonctionnalités multiples à un site web (JetEngine, JetPopup, etc..)
Utilisé seulement avec Elementor
Yoast SEO
Extension servant a éditer les attributs de référencement d'un site
Meta title / description
Images de partages
Peu indiquer les points de référencement à améliorer
WPML
Permet la traduction des sites
Permet de conserver le lien entre les pages traduites (ex : projet123.com/contact et projet123.com/en/contact)
Qu'est-ce qu'un child theme
Couche de modification supplémentaire indépendante du thème
"chapeau" du site
Permet de personaliser et mettre à jour un thème sans affecter le fonctionnement ou les modifications personnalisées de ce dernier
Permet d'ajouter des scripts, feuilles de styles et fonctions indépendantes au site en les chargeant dans le thème enfant.
Les langages de programmation/markup
PHP
Language de rendu conditionnel connecté à la base de donnée
Génère une page en HTML
Épine dorsale de Wordpress / vieux sélecteur de plans
79.2% des sites utilisent PHP en 2021
Language de programmation préféré pour le web
ADN et cerveau reptilien d'un site
HTML
"squelette" d'un site web, language déclaratif
Un des facteurs principaux du référencement (architecture de l'information : H1 > H2 > p
La base des sites web depuis le.. WEB
Le navigateur vois reconnais les balises utilisées et rends le contenu de l'interface dans l'écran.
CSS
"Maquillage et style" d'un site, language déclaratif
Permet de cibler des élements dans l'interface selon la balise ou ses metadonnées et d'y appliquer des styles différents
Contrôle l'apprence
Contrôle le positionnement
Contrôle l'affichage
En constante évolution pour s'orienter vers le design mobile (Flex et Grid)
Rends le site responsive
JS / Jquery
"muscles et cerveau mamalien" du site
Language d'actions conditionnelles NON-connecté à la base de données
Influencer le rendu des éléments de l'interface préalablement générées en PHP/HTML/CSS
Permet de personnaliser une interface en utilisant les meta-données des balises HTML
JS : Language supporté par la plupart des navigateurs récents, pas besoin de librairie mais plus complexe que Jquery pour le même niveau de polyvalence en s'appuyant sur le DOM.
JQuery : Librairie de code Javascript téléchargée par un site web permettant la configuration d'actions plus facile en ciblant un objet par ses meta-données et non par le DOM.
DOM : Document Object model, ou la facon de cibler des éléments dans une interface web. ex: initialisation de la variable en ciblant tous les "enfants" d'une balise UL.
Qu'est-ce qu'un thème
"habit" d'un site
Librairie de code PHP/HTML/CSS/JS permettant de modifier l'allure et les fonctionnalités d'un site
Thèmes gratuits
Thèmes payants
Thème home made
Moyen rapide de concevoir une page web
Formulaires dynamiques
Création
Champs du formulaire créés dans l'interface admin WP, dans le plugin CF7
Structure du formulaire : En HTML, même endroit que les champs
Style du formulaire : En CSS, soit dans les configuration du site Elementor ou dans une feuille de style dans le thème enfant
Appel
Une fois un formulaire créé, il suffit d'intégrer le shortcode du formulaire dans la page pour qu'il apparaisse.
Soumission
Une fois le formulaire rempli par l'utilisateur les données sont :
Envoyées via courriel (SMTP) aux destinataires de notre choix dans un template contenant les informations conditionnelles du client
Envoyées directement dans une colonne d'un classeur google sheet
Envoyées vers une application tierce (Zapier, Mailchimp etc..) ou à travers une programmation custom vers le CRM d'un client
Redirection Page Merci
Page non-accessible via les moteurs de recherche
Page non-accessible par l'architecture du site
1 page view = un SQL
Objectif configuré dans Google Analytics
Possible de configurer un message automatique envoyé au client lors de sa soumission du formulaire.
Limitations
Pièces jointes : Max 16Mo
CF7 réponds moyennement au champs conditionnel
Il existe toutefois des extensions supplémentaires pour les champs condtionnels
Administration autonome par les clients
Limite : contenu statique (pages) et types de publication custom pour lesquelles ils ont été formés par Graph (EX: Disponibilité d'une unité
Danger - ne pas toucher au code : Un point virgule mal placé dans un fichier de Javascript peut faire planter l'entièreté du site. Ceci inclus les balises de code dans une page d'un site.
Danger : Une mise à jour effectuée sans backup au préalable peut briser un site sans moyen de le réparer efficacement.
Programmation VS Intégration
Exemple : Site web
Des programmeurs ont programmé les plugins utilisés pour faire les sites
Un intégrateur configure et utilise ces plugins pour faire un site particulier.
Exemple :Sélecteur de plans
Kenjee a créé l'ancien template "vide" à populer ainsi que les fonctionnalités
Fred intégrait les contenus propres au projets et modifiait l'interface en fonction du projet.
Exemple : Serveur
Programmation : fonctionnement du serveur (Francois Hamel)
Intégration et configuration : Fred et JP (EX: Mise en ligne ou MAJ d'un site)
Grosso modo, le programmeur concoit l'outil et l'intégrateur l'utilise
Mise en place et configuration sur le site
Un intégrateur est généralement en mesure de programmer dans une certaine mesure, surtout avec les langages front end (Javascript etc..)
Applications de tracking
Google Analytics
Fonctionne conjointement avec Google Tag manager
Tags créés en fonction des événements à suivre sur le site
Lie le site par l'entremise d'un code collé dans le header du site qui est chargé au chargement de chaque page
Si les conditions déterminées au lancement d'un tag se produisent, un code est entré dans un layer de données invisibles aux yeux de l'utilisateur mais qui est percu par Analtyics
Ce tag doit ensuite être lié à une mesure dans Analytics pour être fonctionnel
Exemple : SQL - MERCI : Lorsqu'un utilisateur se rends sur la page merci, Analytics recoit de Tag manager un page view et avec l'URL de la page, l'associe à l'objectif configuré; le page view devient donc une conversion.
META Pixel
Snippet de code ajouté dans le header de chaque pages d'un site
Permet de bien cibler les publicité
Permet de connaitre la provenance des utilisateurs ayant accéder au site par l'entremise d'une publication Facebook
CallMetrics
Conserve le numéro de téléphone original
Crée des "faux" numéros routés vers le numéro original
Chaque numéro est lié avec une plateforme donc il est facile d'identifier sur quelle plateforme l'appellant a eu le numéro.
Application extermes
Calendly
Créer un calendrier partagé entre les conseiller
Établir les plages horaires de disponibilité
Configuration des questions / champs à remplir par l'utilisateur avant la rencontre
Intégration d'un iframe sur le site (dans un popup généralement)
Configuration des notifications.
Garde en temps réel les disponibilités des conseillers.
Live Chat
Permet généralement de lier un site à un compte Messenger
Les utilisateurs peuvent discuter avec un conseiller ou avoir une liste de questions fréquentes ainsi que les réponses.
Peu utilisé