Les bases techniques du digital
👉 Apprenez-en plus sur la collecte de données : comment celles-ci sont-elles utilisées à des fins marketing ? Quels sont les outils nécessaires pour y procéder ?
Informations pratiques (formations Cegos)
Vous pouvez télécharger le support de la formation au format PDF en cliquant dans ce cartouche.
La formation se déroule de 9h00 à 17h00, avec les pauses suivantes :
- Le matin : 10h30 – 10h45
- Au déjeuner : 12h15 – 13h45
- L’après-midi : 15h30 – 16h00
Veuillez remplir ce questionnaire.
Les informations recueillies permettront d’adapter le contenu de cette formation à vos attentes propres.
Cette formation n’est pas une session de débogage individuel.
Nous essayons, dans la mesure du possible, d’utiliser vos sites web et vos problématiques comme cas pratiques. Il est possible que l’on découvre certains paramétrages à optimiser. Gardez à l’esprit que ces journées ne sont pas dédiées à du débogage individuel, mais à une formation de tous les participants.
L’ordre et la durée passée sur chaque module ne sont pas figés.
Selon les attentes exprimées, il est possible de commencer la session par l’interface utilisateur ou par l’implémentation, et d’y passer plus de temps.
📌 Pour faire apparaître les slides encapsulées, ajoutez un paramètre à l’URL :
/formation-acquerir-les-bases-techniques-du-digital/?cegos
Ceci stocke l’information en session storage (Key = « intra », value = « Cegos »). Le stockage ne dure que le temps d’une session.
Glossaire
Partie 1 : Digital : état des lieux
Les technologies disruptives
Big data, IA, IOT, blockchain … toutes les technologies ont envahi notre quotidien. Elles ouvrent un nouveau champ des possibles.
Mise en perspective :
- IOT : Trouvez des exemples d’objets connectés que vous utilisez au quotidien. Puis, prenez connaissance de cette video : https://www.youtube.com/watch?v=JrRS8qRYXCQ. Cette autre vidéo illustre une contrainte à laquelle on ne pense pas forcément : https://youtu.be/Ub3L9yw7F88.
- Big data : si vous n’aviez aucune contrainte métier / budgétaires / légales; quelles seraient toutes les données dont vous aimeriez disposer pour mieux piloter votre business / connaître vos clients ? Ces informations sont-elles disponibles ? Sous quels formats ? Les bases seraient-elles connectables entre elles ? Avec quelles clés de réconciliation ? à quelle fréquence devraient-elles être synchronisées ?
- Utilisation des données, quelle portée à un niveau étatique ? https://youtu.be/XflMhukDH-s
- Impact environnemental du traitement des gros volumes de données. Derrière l’aspect high tech se profile une réalité plus sombre. Il est possible, heureusement, de choisir des serveurs dont l’impact écologique est moindre. Dans tous les cas, chacun est acteur du changement et peut changer ses habitudes, pour contribuer ainsi à réduire son empreinte; avec une mention spéciale aux vidéos en ligne.
Le rôle des algorithmes
Mise en perspective :
- Algorithmes des moteurs de recherches et réseaux sociaux : faites une recherche sur les algorithmes suivants : facebook Edge rank, Google panda, Google Pingouin. Quelles sont vos conclusions ?
Le World Wide Web
Mise en perspective :
- Importance des bases de données : rendez-vous sur https://www.data.gouv.fr/fr/. A votre avis, qui sont les utilisateurs de ces données ? Comment sont-elles utilisées ? Sous quelles formes sont-elles ensuite rendues disponibles ?
- Affichage d’une page web sur votre écran : pour mieux comprendre le rôle du navigateur dans l’affichage d’une page web sur votre écran, nous allons inspecter la console. Pour les besoins de l’exercice, je vous invite à utiliser le navigateur Chrome. Nous allons observer les modules ‘Network’, ‘Elements’, ‘Console’, ‘Sources’ et ‘Application’.
Vous pourrez si vous le souhaitez refaire cet exercice à tête reposée, en suivant à votre rythme cette vidéo : https://youtu.be/99vPBSMmpfk
Architectures et Protocoles
Mise en perspective :
- DNS : trouvez l’adresse IP d’un site via la commande ‘ping’ de l’invite de commande de votre ordinateur, et vérifiez la correspondance avec le DNS sur le site https://who.is/dns. Faire cet exercice pour les domaines suivants : cegos.fr, diac.fr, et pour un domaine de votre choix.
Vous pourrez si vous le souhaitez refaire cet exercice à tête reposée, en suivant à votre rythme cette vidéo. - Protocole de chiffrement : inspection du certificat.
Pour aller plus loin : https://www.certeurope.fr/blog/https-ssl-tls-certificat-de-chiffrement-le-guide-pour-y-voir-plus-clair/
Notez que les sites en https, en plus d’offrir une interface plus sécurisante pour l’internaute bénéficieront également d’un meilleur référencement (c’est un critère largement pris en compte par les algorithmes des moteurs de recherche). En d’autres termes, le https participe d’une bonne stratégie SEO.
Cloud Computing
A l’origine solution de stockage distant, le Cloud offre maintenant toute une palettes de services (bases de données, puissance de calcul, intelligence artificielle, machine learning, …).
Mise en perspective :
Il existe différents types de cloud. Du plus bas au plus haut niveau de services :
- IaaS (Infrastructure as a Service ou services d’infrastructure cloud) : le fournisseur de solution met à disposition de l’utilisateur un système de stockage, une capacité de traitement, des serveurs… La maintenance des serveurs est gérée par le fournisseur. L’utilisateur peut se concentrer sur les applications, les données et le système d’exploitation.
- PaaS (Platform as a Service) : le prestataire de solution cloud fournit non seulement l’accès aux infrastructures, mais gère également pour l’utilisateur le nombre et la taille des serveurs dont celui-ci a besoin en fonction de son activité.
- SaaS (Software as a Service) : en plus de la plateforme de services, le prestataire de solution cloud fournit des applications telles que des bases de données, des services de messagerie, de stockage, de relation client,… L’utilisateur est libéré de tous les aspects techniques et peut se concentrer sur son cœur de métier.
Partie 2 : les éléments techniques d’une page web
Les langages du web
Mise en perspective :
- CSS : gestion du ‘look and feel’
Rendez-vous sur un site. Depuis la console de votre navigateur, supprimez les appels de fichiers CSS. Observez l’aspect visuel du site une fois cette opération effectuée.
Vous pourrez si vous le souhaitez refaire cet exercice à tête reposée, en suivant à votre rythme cette vidéo. - Javascript : gestion des interactions (par opposition à un site ‘statique’, permet d’en adapter le contenu à ce que l’internaute entreprend).
Rendez-vous sur cegos.fr. Depuis la console de votre navigateur, accédez au module ‘console’, puis copiez-collez le code suivant. Observez les changements à l’oeuvre.
Vous pourrez si vous le souhaitez refaire cet exercice à tête reposée, en suivant à votre rythme cette vidéo.
alert('en cliquant sur ce bouton vous allez modifier la page');
$('main').remove();
alert('souhaitez-vous mettre une image zen?');
$('<div></div>').insertAfter('div.pop-up-background__container.none');
$('div.pop-up-background__container.none').next('div').addClass('demo');
$('.demo').prepend(('<img id="theDemoImg" src="https://images.pexels.com/photos/747964/pexels-photo-747964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />'));NB :
- Comme toutes les langues vivantes les langages informatiques évoluent continuellement au fur et à mesure que de nouvelles fonctionnalités sont possibles. Ces évolutions ne sont pas toutes prises en compte au même moment par les navigateurs. Voir ici un exemple pour une syntaxe javascript, et un autre pour un tag html. C’est pourquoi lors du développement d’un site, vous pouvez avoir un rendu différent selon les navigateurs. Il est donc important de connaître les principaux navigateurs utilisés par votre audience.
- Enfin, chaque langage peut comprendre plusieurs subdivisions. Javascript par exemple est un langage qui comprend plusieurs ‘librairies’, au même titre que le français comporte plusieurs registres de langage : soutenu, parlé, argot, etc… jQuery – dans lequel le script (bout de code) ci-dessus est composé – est une librairie de javascript.
Règles et contraintes techniques
Mise en perspective :
Auditez un site avec les outils de W3C :
- pour le marquage html : https://validator.w3.org/ et
- pour le CSS : http://www.css-validator.org/validator.html.fr
La construction d’une page web
Mise en perspective :
Depuis la console de votre navigateur, allez dans le module ‘éléments’ et regardez quels sont les composantes du site cegos.fr. Que se passe-t-il lorsque l’on supprime l’élément <head> ? L’élément <body> ? Que peut-on en déduire ?
Vous pourrez si vous le souhaitez refaire cet exercice à tête reposée, en suivant à votre rythme cette vidéo .
Notez l’importance très grande des balises html dans la stratégie de référencement naturel (SEO).
La stratégie mobile
Pour aller plus loin :
Les Progressive Web Apps permettent de :
- Ne développer qu’une seule version (vs une pour android et une pour Ios)
- S’affranchir des stores
- Bénéficier du référencement web
Je vous recommande la lecture de cet article : https://www.educative.io/blog/build-modern-apps-progressive-web-apps
Les systèmes de gestion de contenu
Mise en perspective :
- Détection du CMS utilisé par un site.
Avec quel CMS le site https://www.media-institute.com/ est-il construit à votre avis ? Pour le savoir, visitez le site, et une fois le site ouvert, allez dans la console de votre navigateur. Observez le module ‘source’. Si vous voyez ‘wp-content’, c’est que le cms est wordpress. Faites l’exercice avec d’autres sites.
Pour vous simplifier la tâche à l’avenir, vous pouvez utiliser ce site : https://whatcms.org/Content-Management-Systems. Le principe de fonctionnement est le même (on détecte dans les différents éléments du code un ‘indice’ qui nous permet de connaître le CMS utilisé), mais vous laissez faire la machine au lieu d’effectuer vous-même cet examen :).
Partie 3 : Les formats digitaux en pratique
Structurer son site
Notez l’importance très grande de la structuration et de l’interprétation des urls (fil d’ariane ou breadcrumb) dans le référencement naturel (SEO).
Mise en perspective :
- Navigation et fil d’ariane
Comparez cette page et cette page. Même si elles traitent de sujets très différents, avez-vous l’impression, en lisant l’url, que le contenu qui est présenté dans la page est bien ‘reflété’ dans l’url ? C’est une pratique très importante pour l’expérience utilisateur et pour le SEO.
Essayez de trouver un site pour lequel cette bonne pratique n’est pas appliquée.
Organiser ses fichiers
Une organisation efficiente des fichiers qui composent un site web est une des clefs de la réussite. Elle favorise la conception, la maintenance et l’évolution du site.
Pour une bonne organisation des fichiers, il est nécessaire de définir une convention de nommage des fichiers du site ainsi que l’arborescence des dossiers dès le début du projet.
Les formats d’images et vidéo
Les images et les vidéos diffusées sur le net sont généralement compressées pour être moins lourdes et donc plus rapides à charger, au détriment, dans certains cas de la qualité de l’image. De plus, en fonction du type d’image, il sera possible de réaliser des effets de transparence, de proposer une image animée, de faire varier la taille de l’image sans perte qualitative.
Certains formats vont donc être plus ou moins adaptés à vos images ou vidéos, il est important de bien les choisir en fonction de l’effet recherché.
Partie 4 : la révolution du marketing digital
Préambule : collecte de données et respect de la vie privée
A une période de collecte de données ‘sauvage’ succède maintenant une prise de conscience. Le GRPD et la cnil œuvrent pour une meilleure protection de la vie privée des internautes.
Très concrètement, cela signifie qu’il sera de plus en plus compliqué pour les annonceurs de collecter de très nombreuses données et de procéder à des recoupement avec d’autres sources à l’insu des visiteurs.
Voilà qui devrait – au moins temporairement – limiter le volume de données collectées qui pouvait effectivement donner le vertige.
Bases de Données structurées vs non structurées
Mise en perspective :
- Observation de la collecte de données de navigation sur un site web (formation.dibenn.com).
C’est typiquement cette information qui est utilisée par les services marketing pour ajuster en permanence l’offre, le message, etc… à la cible afin d’améliorer les performances. Source des données : Google Analytics.
Pour aller plus loin :
Comprendre comment le marketing est nourri par les mesures et comment elles sont collectées : https://mywebmarketingclass.com
du Big Data à la smart data
A l’ère du numérique, les données explosent. Elles sont de tout type (géographique, horaire, suivi d’un utilisateur sur un site, image, like, tweet,…) Leur volume rend leur traitement brut difficile voire impossible.
Comment sélectionner, parmi toutes ces données celles qui vont améliorer les performances de votre entreprise ? Comment profiter au mieux de ces données pour anticiper les tendances du marché et les réactions de vos clients, améliorer les processus de décision en temps réel ? Comment et quand personnaliser les campagnes publicitaires en vue d’une optimisation du retour sur investissement ? Voici une partie des questions auxquelles les techniques innovantes du smart data apportent des réponses.