Chris Gaillard, profile picture
Téléchargé parChris Gaillard
441 vues

Communication digitale

Chris Gaillard, un travailleur indépendant basé à Grenoble, conçoit et réalise des sites internet avec plus de 20 ans d'expérience, se spécialisant dans des CMS comme WordPress et SPIP. Le document aborde également les statistiques sur l'utilisation d'internet en 2018, l'évolution des technologies web, l'importance de l'accessibilité, et la nécessité d'un design responsive pour les sites modernes. De plus, il présente Google Analytics comme un outil essentiel pour analyser le comportement des visiteurs sur les sites web.

Intégrer la présentation

Téléchargé 16 fois
1 / 120
2 / 120
3 / 120
4 / 120
5 / 120
6 / 120
7 / 120
8 / 120
9 / 120
10 / 120
11 / 120
12 / 120
13 / 120
14 / 120
15 / 120
16 / 120
17 / 120
18 / 120
19 / 120
20 / 120
21 / 120
22 / 120
23 / 120
24 / 120
25 / 120
26 / 120
27 / 120
28 / 120
29 / 120
30 / 120
31 / 120
32 / 120
33 / 120
34 / 120
35 / 120
36 / 120
37 / 120
38 / 120
39 / 120
40 / 120
41 / 120
42 / 120
43 / 120
44 / 120
45 / 120
46 / 120
47 / 120
48 / 120
49 / 120
50 / 120
51 / 120
52 / 120
53 / 120
54 / 120
55 / 120
56 / 120
57 / 120
58 / 120
59 / 120
60 / 120
61 / 120
62 / 120
63 / 120
64 / 120
65 / 120
66 / 120
67 / 120
68 / 120
69 / 120
70 / 120
71 / 120
72 / 120
73 / 120
74 / 120
75 / 120
76 / 120
77 / 120
78 / 120
79 / 120
80 / 120
81 / 120
82 / 120
83 / 120
84 / 120
85 / 120
86 / 120
87 / 120
88 / 120
89 / 120
90 / 120
91 / 120
92 / 120
93 / 120
94 / 120
95 / 120
96 / 120
97 / 120
98 / 120
99 / 120
100 / 120
101 / 120
102 / 120
103 / 120
104 / 120
105 / 120
106 / 120
107 / 120
108 / 120
109 / 120
110 / 120
111 / 120
112 / 120
113 / 120
114 / 120
115 / 120
116 / 120
117 / 120
118 / 120
119 / 120
120 / 120
Communication digitale www.chrisgaillard.com
Présentation Travailleur indépendant installé dans la région grenobloise depuis 1996. Je conçois et réalise des sites Internet (20 ans et plus de 200 sites web à mon actif ), du cahier des charges au design, en passant par le développement. Je me spécialise sur les CMS Wordpress et Spip. Je donne des cours à IUT Info-Com de Grenoble, Stendhal Master 2 Diffusion de la Culture, CNRS… Quelques références dans le domaine culturel local
Chiffres 2018 54% de la population mondiale est sur Internet 44% sur les réseaux sociaux 88% des français ont accès à Internet 91% des internautes français ont un usage quotidien 58% sont sur les réseaux sociaux 71% ont un smartphone 59% du traffic depuis un ordinateur, 34% depuis un smartphone Temps moyen passé par Internaute français - 4h48 sur Internet - 1h22 sur les réseaux sociaux 91% considèrent la protection des données comme important Source : https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018
Chiffres 2018 Sites les plus visités 1 - Google 2 - Facebook 3 - Youtube 4 - Wikipédia 5- Amazon Plateformes sociales les plus actives 1 - Youtube 2 - Facebook 3 - Facebook Messenger 4 - Instagram 5- Twitter En France 38 millions d’utilisateurs actifs (+6% par rapport à 2017) 82% des utilisateurs sur mobile 13-17 ans : 6 % 18-24 ans : 20 % 25-34 ans : 26 % 35-44 ans : 20 % 45-54 ans : 14 % 55-64 ans : 8 % + de 65 : 6 %
Chaque minute sur Internet 7 millions de snaps envoyés sur Snapchat 216 millions de photos aimées sur Facebook 2,4 millions de photos aimées sur Instagram 350 000 tweets sur Twitter 400 heures de vidéos téléchargées sur YouTube
Evolution des technologies …. et leur incidence sur la conception des sites web. Années 90 Sites statiques en html css avec des logiciels comme Dreamweaver. Années 2000 Usage massif du Flash Années 2010 Généralisation des sites propulsés par des CMS comme Wordpress
Evolution des outils de consultations …. et leur incidence sur la conception des sites web. Les ordinateurs changent de taille d’écrans
Evolution des outils de consultations …. et leur incidence sur la conception des sites web. Vitesse de connexions Bas débit : Modem 56 ko avec connexion par le téléphone, site léger optimisé, chaque image devait être optimisée. (Années 90). 
 Connexion via un mobile en 2G 3G : Retour à une connexion lente sur un petit écran Haut débit : ADSL plus rapide, les sites internet peuvent être plus plus lourds : grandes photos, vidéo, animations flash etc… Très haut débit : La fibre dans les zones denses Les concepteurs de sites Internet doivent penser à offrir une bonne experience utilisateur à ceux qui naviguent avec un téléphone en bas débit et à ceux qui naviguent sur un grand écran en très haut débit.
Evolution des technologies …. et leur incidence sur la conception des sites web. Aujourd’hui les sites sont « Responsives » Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur sur téléphones mobiles, tablettes, moniteurs d'ordinateur de bureau. Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements des pages. Depuis mai 2015, google pénalise les sites non-responsive.
Les CMS Un CMS (Content Management System) permet de réaliser un site internet dynamique et responsive via une interface simple d'utilisation. Il est ainsi facile de créer des pages, sans forcément connaître les langages en développement web. Il existe des centaines de CMS, pour différents types d'utilisation comme : Rédiger des articles et les publier dans un blog. Présenter l'activité d'une entreprise à travers un site institutionnel. Vendre ses produits en ligne sur un site e-commerce, grâce à l'installation de modules de paiement. Créer un site communautaire pour favoriser le partage d'informations entre plusieurs internautes.
WordPress fr.wordpress.com fr.wordpress.org
2003 (v0.7) Lancement de WordPress, c’est l’évolution de b2 un logiciel de Michel Valdrighi qui existe toujours. 2004 Matthew Mullenweg qui âgé seulement de 20 ans et développe WordPress fonde la société d’édition de logiciel Automattic en 2005. 2005 WordPress 1.2 Charles Mingus. Possibilité de gérer et de développer des plugins. WordPress 2 Duke Ellington. Elle apporte l’introduction d’un éditeur de texte, Il devient également possible d’uploader des images, de créer de nouveaux rôles utilisateur. 2010 (v3.0) La communauté de développeurs WP prend de l’ampleur 218 développeurs pour la version 3,
 « Explosion » de WordPress WordPress est téléchargé 50 millions de fois depuis sa sortie en 2003 2019 (v5) Wordpress est le CMS le plus répandu dans le monde, (un site sur 3. ) Arrivé de Gutenberg, un constructeur de pages intégré à WordPress menacé par des outils comme WIX, et souhaitant participer à l’essors des constructeurs de pages proposés par les éditeurs de thèmes. WordPress
Ce sont des thèmes (ou de plugins) qui remplacent le champ de saisi des pages et des articles, par un outil de construction de pages. Un page builder permet de composer une page responsive en empilant des modules composés de sections qui se découpent en colonnes. Colonnes que l’on remplit de textes, de photos, de vidéos, de cartes, de slider, etc… Chacun de ses éléments est associé à un panneau de configuration permettant des réglages d’affichage graphique, d’effets d’animation, etc… Les constructeurs de pages
Les constructeurs de pages
Gutenberg Wordpress 5
Gutenberg Gutenberg principale nouveauté de Wordpress 5, est un éditeur de contenu qui remplace TinyMCE, un petit Page Builder, ou constructeur de page comme Divi, Visual Composer, Avada… plus simple mais extensible avec des blocs communs. Gutenberg a pour objectif de se transformer en un véritable constructeur de site. Faire de WordPress une alternative OpenSource (avec des modules payants) à des concurrents comme Wix ou SquareSpace.
Gutenberg Un système de blocs Comme un constructeur de pages, Gutenberg propose à la place de l’éditeur de texte classique, un ensemble de blocs. Des plugins vont permettra d’ajouter d’autres blocs, comme des maps Google, des sliders animés, des blocs de textes avec plus d’options.
Gutenberg Tous les thèmes ne sont pas compatibles ou optimisés pour Gutenberg. Il est possible d’être dans WordPress 5 et d’activer l’éditeur classique tinyMCE, avec le plugin Classic Editor.
Google Analytics Google Analytics est un service gratuit d'analyse d'audience d'un site Web ou d'applications utilisé par plus de 10 millions de sites, soit plus de 80 % du marché mondial. Il faut enregistrer son site sur le site Google Analytics et coller un code sur l’ensemble des pages du site. Ces opérations vont vous permettre de connaitre les comportement de vos visiteurs. Cookie : Il s’agit d’un petit fichier texte stocké sur l’ordinateur (ou autre terminal) de l’internaute. Ce fichier regroupe des données telles que l’heure de visite, le nombre de visites, la source d’arrivée (pour les cookies Google Analytics) mais plus globalement vos préférences et habitudes de navigation sur la toile. Google Analytics utilise un système de cookies qui permet de connaître les interactions du visiteur avec le site, il copie un fichier sur l’ordinateur du visiteur. Une adresse IP (avec IP pour Internet Protocol) est le numéro qui identifie chaque ordinateur connecté à Internet, ou plus généralement et précisément, l'interface avec le réseau de tout matériel informatique (routeur, imprimante) connecté à un réseau informatique utilisant l'Internet Protocol. 
 Google Analytics enregistre l’adresse IP du visiteur. L’IP permet d’avoir des informations sur la provenance des visites (géolocalisation) et d’identifier un pays, une région, une ville.
Google Analytics Audience en temps réel ou analyse d’audience sur une période donnée Nombre de visiteurs en live sur le site Sources du traffic Zones géographiques Pages vues Graphique par jour, semaine ou mois sur une période que l’on peut définir. Le taux de rebond Support de consultation
Capter et retenir ses visiteurs Réduire le taux de rebonds Avoir du contenu utile, attractif, faire un effort sur la mise-en-forme des textes, avec des titres, inter- tires des mots en gras…. rapide à charger, avec du son, des vidéos… Pour les pages d’erreurs, inclure des propositions de contenu directement dans la page d’erreur 404. Sur les pages spectacles, proposer d’autres spectacles en bas de page ou dans la marge, comme par exemple « Vous aimerez aussi » ou «  dans le même style ».
Accessibilité web
Accessibilité web Qu’est-ce que le handicap ? Selon la loi française : « Toute limitation d’activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d’une altération substantielle, durable ou définitive d’une ou plusieurs fonctions physiques, sensorielles, mentales, cognitives ou psychiques, d’un polyhandicap ou d’un trouble de santé invalidant. »
Accessibilité web Qu’est-ce que l’accessibilité ? L’accessibilité est un terme initialement relatif au monde du handicap mais étendu à l'ensemble des citoyens et utilisé pour désigner l'accès aux domaines suivants : - physique, la liberté de déplacement dans l'espace ; - éducatif, le droit à une scolarisation ; - civique, le droit de vote ; - culturel, pouvoir développer sa culture ; - numérique, adaptation des systèmes numériques dont les sites web, aux différents types de handicap, développement d'outils spécifiques tels loupe ou clavier visuel ; - travail, pouvoir travailler en milieu ordinaire ; - santé, avoir accès aux services de santé promotionnels, préventifs et curatifs.
Accessibilité web Qu’est-ce que l’accessibilité ? Pour les personnes en situation de handicap, l'objectif de l'accessibilité est de permettre une vie ordinaire. Pour les personnes n'étant pas en situation de handicap, l'accessibilité reste une préoccupation dans diverses situations : femmes enceintes, incapacités temporaires consécutives à un accident du travail ou domestique, difficultés sensorielles liées à l'âge, sur-poids : des situations où l'individu n'est pas à proprement parler en situation de handicap mais concerné : une jeune maman avec une poussette, un voyageur avec une grosse valise à roulette…..
Accessibilité web Loi de 1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …
Accessibilité web Loi de 1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …
Accessibilité web Loi de 1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …
Accessibilité web Qu’est-ce que l’accessibilité web ? Selon la WAI (Web Accessibility Initiative) : « L’accessibilité du web signifie que les personnes en situation de handicap peuvent utiliser le web – plus précisément qu’elles peuvent percevoir, comprendre, naviguer et interagir avec le web, et qu’elles peuvent contribuer sur le web. L’accessibilité du web bénéficie aussi à d’autres, notamment aux personnes âgées dont les capacités changent avec l’âge. L’accessibilité du web prend en compte tous les handicaps qui affectent l’accès au web, ce qui inclut les handicaps visuels, auditifs, physiques, de parole, cognitifs et neurologiques. »
Accessibilité web Le nombre de personnes concernées Entre 10 et 20% selon les résultats de l’enquête vie quotidienne et santé (INSEE, 2007). Une personne sur dix considère être « handicapée» , et une sur cinq être « limitée dans ses activités ». 15 % de la population mondiale selon le rapport mondial sur le handicap de l’OMS (2010).
Accessibilité web L’accessibilité du web, concrètement… Pour les personnes… • aveugles : navigation au clavier, utilisation d’un lecteur d’écran (synthèse vocale, plage braille), balisage sémantique, alternatives textuelles, liens et intitulés explicites, audiodescription… • malvoyantes : couleurs, contraste, taille des caractères… • sourdes : transcription textuelle, sous-titres synchronisés, interprétation en langue des signes… • malentendantes : dialogues suffisamment audibles… Et aussi : perte des capacités motrices, prévention des crises, difficultés de lecture, de concentration, de compréhension…
Accessibilité web Un site est accessible quand il fonctionne : • avec tous les navigateurs, récent et ancien. • avec n’importe quelle interface, navigation par souris, pad, écran tactile, clavier… • avec toute plateforme d’accès, c’est-à-dire tous les systèmes d’exploitation, mac, windows linux, mac OS, Androïd. • sans plugin tel que flash, quicktime etc… • avec tout périphérique d’affichage, moniteur de toute taille, écran de téléphone • un contenu compatible avec les systèmes d’aide technique destinée aux personnes handicapées (loupe d’écran, synthèse vocale, plage braille etc…). Ex: un texte en mode image, ne sera pas lisible avec ces outils.
Accessibilité web Le contraste des couleurs
Accessibilité web L’agrandissement du texte
Accessibilité web L’agrandissement du texte
Accessibilité web Actuellement On constate, sur Internet un retard important pour l'équipement des services publics et plus grave encore une très faible accessibilité des outils Internet mis à disposition des citoyens. Une révision de la loi de 1975 prévoit pour sa part que l'accessibilité de l'information publique sera rendue obligatoire. Au niveau économique, l'accessibilité devient un véritable enjeu marketing et commercial et constitue un atout pour les sociétés sensibles à leur image.
Accessibilité web Outils 
 Les personnes malvoyantes utilisent des logiciels spécifiques appelé loupe d'écran, logiciel de grossissement d'écran qui leur permettent de personnaliser le contenu du site, changer la taille de la police, ou même la police, modifier le contraste texte de la page etc.. Zoomtext reste aujourd'hui le plus célèbre de ses logiciels spécifiques.
Accessibilité web Outils 
 Les personnes non voyantes ont deux possibilités pour consulter des pages Web, un terminal braille un appareil qui traduit le texte présent dans une page en braille; ou l'utilisation d'un logiciel de synthèse vocale, ils peuvent utiliser les deux à la fois.
Accessibilité web Outils 
 Pour les personnes sourdes ou malentendantes il n'y a pas réellement aide technique, l'auteur d'un site devra prévoir une alternative texte aux contenus sonores présents sur un site. Il existe cependant des produits de reconnaissance vocale qui ont été adaptés pour convertir le langage parlé en langage des signes. Ce qui permet aux sourds et malentendants d'accéder à des informations auditives.
Accessibilité web Outils 
 Les personnes souffrant de handicaps moteur rencontrent plusieurs types de difficultés. L'utilisation du clavier, de la souris des ascenseurs de défilement sur une page sont autant de gènes liés à des problèmes de contrôle musculaire, de coordination, de paralysie, ou lié au manque d’un des bras par exemple. Des outils spécifiques existent là aussi pour pallier ces problèmes.
Accessibilité web Un site accessible 
 Les images sont omniprésentes sur le site Internet et apportent des informations au contenu de la page. Une personne ne pouvant pas visualiser ses images à cause des déficiences visuelles ou par choix de naviguer en mode texte, n'aura pas accès aux contenus informatifs de ces dernières. Il faut donc une alternative textuelle associée à cette image, c'est la balise html Alt. < a href=«chaton.jpg » alt=«un bébé chat » >
Accessibilité web Un site accessible 
 Pour les sons l'alternative des contenus sonores va reprendre l'intégralité du texte parlés ou chantés ainsi que les bruits importants présents dans la bande son qui ont pour but de donner une information supplémentaire. L'idéal est de proposer un lien pour la lecture écrite.
Accessibilité web Un site accessible 
 Pour les vidéos, Il convient d'ajouter des sous-titres à la vidéo pour que l'alternative textuelle soit synchronisé avec la mention. Les sites de partage de vidéos comme YouTube propose aux fournisseurs de contenu un outil de sous-titrage extrêmement facile à utiliser.
Accessibilité web Un site accessible 
 Trop de sites utilisent des contrastes trop faible entre le texte et le fond de la page ce qui entraîne une importante fatigue visuelle pour l'utilisateur du même coup rejet de la page. Il faut donc être prudent avec les images de fond pour l'utilisation parfois lourdement frappé la lisibilité du site. La taille des textes et le choix des typos doivent servir le confort de lecture. Le respect des règles de ponctuation, afin de ne pas changer le sens d’une phrase quand elle est lue par un synthétiseur vocale : Example : « C’est l’heure de manger, les enfants… » « C’est l’heure de manger les enfants… »
Accessibilité web Un site accessible 
 Les animations Les textes défilant ou clignotant doivent au moins pouvoir être mis en pause. Il est fortement recommandé de ne pas les utiliser.
Référencement
Référencement Parts de marché Dans le monde En France
Sur Internet, le travail de référencement consiste à améliorer le positionnement et la visibilité de sites dans des pages de résultats de moteurs de recherche ou d’annuaires. Le référencement web s'articule autour de deux stratégies distinctes et complémentaires : le référencement naturel (ou organique) et le référencement payant (ou liens sponsorisés). Référencement
Le référencement "naturel", "traditionnel" ou "organique" consiste à optimiser les pages de son site afin d'apparaître dans les meilleures positions des résultats de recherche. Il n'existe pas, dans ce cas, de transaction financière entre l'éditeur du site et le moteur de recherche. Le référencement "payant" ou "paid inclusion" ou "trusted feed" consiste à payer le moteur de recherche pour une offre commerciale (paiement au forfait ou au clic) proposant la garantie d'indexation (mais pas la garantie de positionnement). Il s'agit d'une offre le plus souvent prise en compte pour référencer de façon globale tous les produits d'un catalogue par exemple... La plupart de ces pratiques sont complémentaires, et c'est certainement ce qui fait - en bonne partie - l'efficacité d'une campagne de "Search Engine Marketing" bien faite... Référencement
Pour quoi faire ? - Etre présent - Etre bien placé - Augmenter le nombre de visites - Développer sa notoriété - Trouver de nouveaux contacts, clients, spectateurs, visiteurs…. Référencement
SEO Search Engine Optimization ou Optimisation pour les moteurs de recherche Porte essentiellement sur le texte écrit qui est présent sur le site. Les mots clés sont extrêmement importants et doivent être choisis avec pertinence. Entre 5 et 10 mots classés par ordre d’importance. Pour optimiser le contenu, il faut penser à : - Identifier ce que recherchent les internautes (= quels sont les mots-clés utilisés) - Adapter mon vocabulaire à celui de mon public. Référencement
Position des mots clés Visible à l’écran Les moteurs de recherches tiennent compte des éléments suivants : 1- Titre de la fenêtre, en html la balise <title></title> Il faut des titres différents, d’une page à l’autre. 2 -L’url doit contenir des termes explicites. Sur ce site les urls sont peu explicites http://www.le-grand-angle.fr/spip.php?page=article&id_article=46 3 - Les titres et sous-titres Les titres dans des balises <h1> <h2> <h3>… Il doit forcément y avoir une balise <h1> mais pas plus. Les paragraphes doivent forcément être dans des balises <p>. 4- Le premier paragraphe 5- Les mots en gras Référencement
Position des mots clés Invisible à l’écran Les moteurs de recherches tiennent compte des éléments suivants : Les textes alternatifs des images Les images doivent avoir un texte alternatif, la balise alt. <img alt=“Cie de Théâtre Duchmol“ src=« lacie-duchmol.jpg » /> Dans Wordpress Référencement Dans DIVI, sur le module images
En affichant le code source de la page, on voit dans l’entête divers balises Cette balise contiendra une description succincte du site web, son contenu sera récupéré par Google dans l’affichage de ses résultats. Les textes présents dans cette description n’ont aucun poids pour le référencement. Référencement <meta name="description" content="Musilac est un festival pop-rock organisé à Aix-les-Bains les 13, 14, 15 et 16 Juillet 2017 sur l'esplanade du bord du lac du Bourget." />>
Contenus Le site doit contenir un contenu original et non un simple copier- coller d’un autre site. Google pénalise les sites qui n’ont pas de contenus originaux. Les pages devront au moins contenir un contenu textuel conséquents, 300 mots mais si il y en a 1000 c’est mieux. Le premier paragraphe devra contenir les mots clés principaux. C’est toujours bien d’ajouter des liens extérieurs. Référencement
Un titre de page devrait avoir au moins 35 caractères Les mots en gras, dans les titres, et les textes alternatifs aux images ont plus de poids. Le site doit changer régulièrement, une zone avec des actualités mises à jour régulièrement favorisera le bon référencement de celui-ci. Inclure un transcript (texte et description) des vidéos et audio présents sur le site. Faites des liens internes vers les pages les plus importantes de votre site. Essayer d’avoir des liens externes qui pointent chez vous. Référencement
Les algorithmes de Google et leur mise à jour Il faut toujours se tenir informer des évolutions des moteurs de recherche si on veut avoir un référencement de qualité, notamment des mises à jour de Google qui sont nombreuses ! Certaines ont même littéralement ébranlé le web et la manière de faire du SEO pendant la dernière décennie. Exemple d’algorithme connu : Google panda Il se bat principalement contre les sites au contenu dupliqué ou bourré de fautes d’orthographe. D’autres critères doivent bien évidemment rentrer en compte mais nous ne les connaitrons jamais tous. Google garde ses secrets. Référencement
L’indexation Dès que vous avez publié votre site, il est en ligne. Si vous tapez son URL dans la barre d’adresse, il est accessible. En revanche, vous ne pouvez pas encore le trouver via des requêtes Google parce qu’il n’est pas indexé. L’indexation, c’est encore le travail des robots. Si vous avez un fichier robots.txt et un sitemap, votre site devrait être indexé plus rapidement. Encore une fois, cette période est variable d’un site à l’autre. Référencement
L’optimisation du contenu Le contenu reste un élément central du référencement. Google étudie le comportement des internautes sur votre site. Il épie ses faits et gestes. S’ils quittent votre site ou article trop rapidement, Google vous référencera moins bien. Google n’aime pas les pages fourre-tout. Il faut créer une page par mot- clef travaillé pour plus d’efficacité. Référencement
Sur Wordpress un plugin YOAST SEO Référencement - Analyse des contenus, recommandations - Personnalisation de l’affichage dans les résultats de recherche - Balises Open Graph… Il faut définir un mot-clé par page et des mots clés important pour l’ensemble du site. Définir un mot clé par page que nous allons inclure dans - L’url des pages - Les titres des pages (balise H1) - Les titres de la fenêtre (balise title) - Les textes alternatifs des images - La description des pages - Dans le premier paragraphe de la page Pensez à inclure également les mots clés important pour notre site.
Redirection d’url Référencement Dans le cadre de la refonte d’un site avec des utils différents, les urls de toutes les pages peuvent changer. Afin de ne pas perdre son référencement, il faut indiquer aux moteurs de recherche le lien entre les anciennes adresse et les nouvelles. Exemple : Sur mon site http://www.tructruc.com, l’url de la page http://tructruc.com/spip.php?rubrique5 est maintenant http://www.tructruc.com/qui-sommes-nous Sur WordPress le plugin Redirection va nous permettre d’effectuer ces redirections. Dans notre exemple, il faudra indiquer comme page source /spip.php?rubrique5 comme page cible /qui-sommes-nous
Perfomance web Référencement Que signifie optimiser les images ? Les grosses images ralentissent vos pages Web. L’optimisation des images est le processus qui consiste à diminuer la taille du fichier, ce qui accélère le temps de chargement de la page. Choisir le bon format de fichier PNG – produit des images de meilleure qualité, mais aussi des fichiers de plus grande taille. Il a été créé comme un format d’image lossless (sans perte). A utiliser pour les images avec de la transparence. JPEG – Vous pouvez ajuster le niveau de qualité pour un bon équilibre entre la qualité et la taille du fichier. A utiliser pour les photos avec une compression moyenne. GIF – n’utilise que 256 couleurs. C’est le meilleur choix pour les images animées. En pratique, dans Photoshop On utilise toujours la fonction « enregistrer pour le web » . Pour des photos on utilise le format jpg compression moyenne entre 40 et 50. On peut aussi utiliser l’application ImageOptim gratuite pour nettoyer les meta-données des images (nom de l’appareil photo, géolocalisation, historique de modification etc..) et gagner encore du poids, parfois beaucoup. https://imageoptim.com/fr
http -> https Le SSL qu’est-ce que c’est ? C’est un protocole de cryptage qui sécurise les données qui transitent entre le visiteur d’un site et le serveur ou celui-ci est hébergé. En clair si vous remplissez un formulaire de contact, les données que vous saisissez seront encodées et donc inexploitables pour le hacker qui arriverait a s’en saisir. L’adresse de vos pages commence alors par https au lieu de http. Et un icône avec un cadenas vert et la mention "Sécurisé" apparait dans la barre de saisie du navigateur. Sécurité
Les attaques virales sont très courantes, et des failles de sécurité sont régulièrement découvertes dans Wordpress et autres CMS, et autres éléments constitutifs d’un site web. - Mettre à jour régulièrement son CMS, les thèmes, et les plugins. - Ne pas avoir d’administrateur qui s’appelle admin - Mettre des mots de passe avec plus de 10 caractères, des minuscules, des majuscules, des caractères accentués, des symboles. - Vérifier que votre hébergeur propose des backups, ne pas choisir le moins cher. - Attention aux thèmes gratuits et plugins, renseignez-vous, supprimer ceux que vous n’utilisez pas. - Toujours un compte administrateur par personne. Ne pas se passer les mots de passe. Sécurité
Le mot de passe azerty est cassé en moins d’une seconde avec un simple logiciel gratuit sur un PC, le mot de passe Azety8!po$*uioPqg sera cassé en plusieurs milliers d’années. Pour apporter une sécurité supplémentaire certains plugins dont All In One WP Security ajoute des mesures qui permettent de compliquer le piratage de votre site, comme changer l’adresse de connexion à l’admin, (wp-admin), ou lutter contre les attaques de type force brute. Sécurité
Ergonomie web
Ergonomie web Pourquoi s’intéresser à l’ergonomie ? Pour faire un site bien construit, plaisant à naviguer, où l’on trouve facilement ce que l’on cherche, qui se charge rapidement. Savoir pourquoi un site est efficace, comment remédier aux problèmes de compréhension de notre site par nos visiteurs. Savoir apporter un regard critique et argumenté sur une maquette, un site web existant. Il existe des règles à appliquer afin de tendre vers cet objectif. 4 règles Le concept de Gestalt La loi de Fitts La loi de Hick Le concept d’Affordance
Le concept de Gestalt ou psychologie de la forme C’est une théorie selon laquelle les processus de la perception et de la représentation mentale traitent spontanément les phénomènes comme des ensembles structurés (les formes) et non comme une simple addition ou juxtaposition d’éléments. Le tout est différent de la somme des parties. Une page web est un ensemble d’éléments, de formes imbriquées les unes dans les autres qui forment un tout. Ergonomie web
Ergonomie web Le concept de Gestalt ou psychologie de la forme
Ergonomie web Le concept de Gestalt ou psychologie de la forme La loi de proximité Le cerveau humain regroupe les éléments, 2 éléments proches se verront associés, on leur trouvera plus facilement des points communs que 2 éléments éloignés. Un paquet d’étoiles sans ordre. Ici c’est deux lignes composés d’étoiles, les étoiles passent au second plan devant la notion de ligne.
Ergonomie web Le concept de Gestalt ou psychologie de la forme La loi de proximité Cette déduction de notre cerveau se fait naturellement, c’est une logique de proximité, d’éloignement et d’ordre des éléments. C’est fondamentale pour la conception de pages web. Il faut rapprocher les éléments qui ont une relation forte et éloigner les autres. Exemple : Éléments de navigation éloignés les uns des autres..
Ergonomie web
Ergonomie web Le concept de Gestalt ou psychologie de la forme La loi de proximité Dans cet exemple les légendes des photos sont à égale distance des photos placées au-dessus et en-dessous. On ne comprend pas à quelle photo la légende est associée.
Ergonomie web Le concept de Gestalt ou psychologie de la forme La loi de proximité En rajoutant une marge sous le texte, la légende et la photo sont associés.
Ergonomie web Le concept de Gestalt ou psychologie de la forme La loi de similarité Les formes qui se ressemblent sont regroupés par notre cerveau (taille, forme couleur). Par la taille : petits carrés et grands carrés, on a donc tendances à leur chercher des similitudes.
Ergonomie web Le concept de Gestalt ou psychologie de la forme Gestalt Proximité des objets Similitudes de formes, de couleurs, de tailles = Association Éloignement des objets Différences de formes, de tailles et de couleurs = Dissociation
Ergonomie web La loi de Fitts Dans le domaine de l'Interaction Homme-Machine (IHM), la loi de Fitts permet de prédire le temps requis à un humain pour pointer une zone. Appliqué au web, cette loi permet de savoir en combien de temps la souris va atteindre un élément sur une page web. Cela permet d'optimiser les interfaces web. La loi stipule que le temps nécessaire pour atteindre un élément est proportionnel à la distance de l'élément et la taille de l'élément. Billetterie
Ergonomie web La loi de Fitts Plus la souris est éloignée d'un élément et plus le temps pour atteindre cet élément sera long. Plus l'élément de destination est gros et moins la souris nécessitera de temps pour l’atteindre. De ce fait, pour atteindre rapidement une zone de l'écran, il faut que celle-ci soit grande et proche de la souris. Le Fittsizing est le principe de compensation de la distance pour aller à un point par l’augmentation de sa taille; il permet un gain de temps non négligeable pour l’internaute. Des études montrent qu’un site de e-commerce qui augmente la taille des boutons « Ajouter au panier » trop petit, augmentera aussi ses ventes.
Ergonomie web La loi de Hick La loi de Hick décrit le temps qu'il faut à un utilisateur pour prendre une décision en fonction du nombre de choix à sa disposition. De mémoire un homme peut retenir entre 5 et 9 objets, en moyenne 7. Au delà, notre mémoire de travail, mémoire transitoire et instantanée nous joue des tours. Au delà de 7 grandes zones le messages risques d’être brouillé et mal compris. Dans les barres de navigations, on évitera de mettre plus de 7 items au grand maximum 9.
Ergonomie web La loi de Hick Exemple : un menu avec beaucoup trop d’éléments, difficile de se repérer.
Ergonomie web Le concept d’affordance L'affordance est la capacité d’un système ou d'un produit à suggérer sa propre utilisation. Une porte nous indique qu’on doit la pousser ou la tirer par la présence des gonds, d’une poignée.
Important sur le web de faire des liens qui ressemblent à des liens ou qui soit simplement différents du reste. Et si possible que cette différence soit omniprésente sur l’ensemble des pages. Par l’usage de la couleur du texte cliquable: d’un surlignage L’usage d’un pictogramme symbolisant la notion de lien Pour les images Je dois différencier les images cliquables des images non-cliquable par une distinction qui peu prendre la forme d’un contour de couleur, d’un pictogramme … Ergonomie web Le concept d’affordance
La règle des trois clics, certains sites bien fait s’affranchissent de cette règle et sont parfaitement ergonomique et inversement. Incompatible avec un bon design, un bon designer web doit connaitre ces règles et savoir composer avec. Le scroll, les visiteurs d’un site savent scroller et le font quasiment automatiquement. Le scroll horizontal est déconseillé car peu utilisé, et parfois difficile à utiliser, pas de molette de souris horizontale. Lecture en F ou en Z, c’est faux, c’est la composition de la page qui va diriger l’œil du visiteur, la page est perçue dans sa globalité, dans sa composition. Ergonomie web Idées préconçues
Ergonomie web Les textes Pour rendre un texte agréable à lire sur un écran il est préférable de : • Scinder l'article en plusieurs paragraphes • Rédiger des intertitres • Faire des sauts de lignes dans les paragraphes • Ne pas justifier le texte • Prévoir un interlignage suffisant • Utiliser des listes à puces (si c'est possible) • L'illustrer avec quelques images • Indenter les textes par rapport aux titres
Ergonomie web Importance de la mise-en-page 33 laboratoires grenoblois, regroupés au sein d’un réseau, ont pour objectifs de : Comprendre les propriétés de la matière à l’échelle du milliardième de mètre, fabriquer des objets minuscules de quelques nanomètres, simuler leurs propriétés, découvrir de nouveaux phénomènes et développer leurs applications… Une méthode pour préparer le futur : développer un large socle de connaissances fondamentales et faire émerger de futures applications. Domaine d’application privilégiés comme la nanoélectronique qui prendra le relais de la microélectronique avec plus de miniaturisation, plus de puissance de calcul et plus de mémoire de stockage. Ces recherches contribueront à valoriser les compétences en recherche technologique et en industries de haut niveau du site grenoblois ; Le vivant : les Nanosciences permettront de créer de nouveaux outils de diagnostic et de nouvelles approches de soin ; mais aussi l’énergie et l’environnement.
Ergonomie web Importance de la mise-en-page
Ergonomie web Importance de la mise-en-page Utiliseravecmodérationlesdifférentespolicesdecaractère et autres enrichissements typographiques. Au delà de 3 polices de caractère, la lecture peut s'en trouver perturbée. La lecture d’un texte peu contrasté est fatigante et n’invite pas à sa lecture.
Les médias sociaux - les wikis : espaces de publication collaboratifs où chaque membre peut rédiger et modifier du contenu. (Wikipédia.) - les blogs : espaces de publication où l’utilisateur publie des billets successifs, qui sont ouverts aux commentaires des lecteurs. - Les microblogs : ils permettent de publier des messages très courts (140 caractères au maximum pour Twitter qui en est l’exemple le plus renommé.) - Les réseaux sociaux : ils visent à reproduire en ligne le réseau d’interactions sociales entre des individus ou entités sociales. Facebook, le plus connu en France. - Les plateformes de partage de contenu : chaque utilisateur peut créer un compte et publier un certain type de contenus – vidéos sur Youtube, photographies sur Instagram ou Flickr, Soundcloud pour l’audio pour les plus connus. - Les forums : espaces de discussion libre où l’on ajoute des messages dans le fil d’une conversation.
Les médias sociaux La présence sur les médias sociaux. Il est aujourd’hui incontournable pour une organisa5on d’être présents sur les médias sociaux, pour une ques5on de visibilité. Ne pas être présent sur les réseaux laisse le champ libre à des personnes étrangères à l’organisa5on pour créer des pages non-officiels, proposant une diffusion non maîtrisée et non souhaitée. Les médias sociaux peuvent être un élément d’une stratégie marke5ng, en complément d’un site Internet, de campagnes d’affichages, d’encarts presse, de créa5on de dépliant, flyers, plaqueIes, brochures, etc… Community manager Animateur de communauté ou CM, l'abrégé de community manager, est un mé5er qui consiste à animer et à fédérer des communautés sur Internet pour le compte d'une société, d'une marque, d’une célébrité ou d’une ins5tu5on. Le CM publie des contenus sur les réseaux sociaux et interagis avec les abonnés aux réac5ons. L'appella5on community manager est intégrée au Larousse 2016.
Les médias sociaux
Les médias sociaux Utilisateurs quotidiens
 1,47 milliard de membres dans le monde 
 22 millions d’utilisateurs en France CHIFFRES CLÉS 2,27 milliards de membres dans le monde 
 33 millions d’utilisateurs en France
Les médias sociaux LE PROFIL PERSO LA PAGE PRO Nature est destiné à un usage individuel et non commercial ou promotionnel. permet aux entreprises, aux organisations et aux marques de bâtir une communauté Web dans laquelle il ou elle pourra interagir avec les utilisateurs. Qui représente un particulier et doit être associé à votre nom. Vous devez être un représentant officiel de la personne ou de l’entité. Publique Vous décidez le paramètre publique ou privé de chacune de vos publications. 100% Publique. Tout le monde peut voir le contenu de votre Page. Y compris ceux qui n’ont pas de compte Facebook. Relations Les relations du Profil personnel sont des ami(e)s. La Page n’a pas d’ami. Les relations des Pages Facebook sont des J’AIME. Avec qui Toutes les demandes d’amitiés doivent être acceptées ou ignorées. Personne ne peut devenir votre ami sans votre consentement. Toute personne qui a un compte Facebook peut cliquer J’aime sur votre Page. Toutefois, vous pouvez bloquer des personnes sur votre Page. Applications On peut lier certaines applications (Twitter ou Instagram) à notre Profil Personnel mais on ne peut pas créer des applications pour notre Profil. Possibilité d’ajouter et de créer des applications pour sa Page. Limites Un Compte personnel peut avoir un maximum de 5,000 amis; s’abonner à 5,000 personnes et avoir un nombre illimité d’abonnés. Il n’y a aucune limite sur le nombre de J’aime sur votre Page. Plusieurs Pages ont des millions de j’aime.
Les médias sociaux Urls utiles Transformer un profil en page
 https://www.facebook.com/pages/create/migrate/ Fusionner plusieurs pages : 
 https://www.facebook.com/help/249601088403018 Vérifier l’affichage des éléments récupérés par Facebook, lors du partage d’une url de votre site, le bon titre, la bonne description et la bonne image, et surtout re-générer le cache mémoire de Facebook après modifications de ma page.
 https://developers.facebook.com/tools/debug La taille des images à produire pour Facebook et les autres réseaux sociaux
 https://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/
Interactions site/réseaux Réseaux sociaux Balise Open Graph Maitriser les éléments affichés sur les réseaux sociaux quand une url de notre site est publiée. Yoast SEO nous permet de contrôler ces éléments et de les différencier entre Facebook et twitter. Une url permet de vider le cache Facebook quand on fait des modifications sur une page : https://developers.facebook.com/tools/debug sur twitter elle est ici https://cards-dev.twitter.com/validator
Les médias sociaux L’EDGE RANK Sans « j’aime » ou commentaires, vos fans ne verront pas vos pages. L’Edge Rank, c’est la formule qui régit la probabilité que vos publications soient « vues » dans le flux d’actualité de vos fans. Les chances qu’un de vos fans revienne souvent sur votre page sont infimes. Il est nécessaire de faire en sorte que vos publications soient visibles. Il est important d’inviter vos fans à interagir avec vos publications car c’est ainsi que l’Edge Rank de votre page pourra se développer. Plus vous avez d’affinités avec un utilisateur… plus cet utilisateur a déjà interagit avec vos contenus OU vous avec lui...plus votre contenu a de poids en termes d’interactions et plus celui-ci a de chances d’être affiché dans le flux d’actualité de vos fans. Donc, si vous ne créez pas d’interactions avec vos utilisateurs, voici ce qui va se produire : • Un utilisateur devient fan de votre page... • Il voit vos publications dans son flux d’actualité... • Cela ne l’intéresse pas, ou il n’interagit pas... • Il ne voit plus vos publications dans son flux d’actualité. • Il oublie votre page et ne verra plus jamais vos publications... bien qu’il soit toujours « fan ».
Les médias sociaux Le moment idéal pour publier Cela dépend vraiment de votre communauté, mais les meilleurs résultats étaient obtenus entre 11h et 14h et entre 17h et 20h. De même pour les jours de la semaine. Le top 1 est le dimanche ! C’est la journée où vos fans ont plus de temps à passer sur les réseaux sociaux. En général les publica5ons de fin de semaine reçoivent plus d’engagement. Les publica8ons qui fonc8onnent Donc, soyez simple et clair, court, privilégiez les contenus graphiques (images, photos ou infographies) et encore une fois, n’hésitez pas à « provoquer » les interac5ons.
Les médias sociaux Les différents formats de publications sur Facebook Vidéos La vidéo et plus particulièrement la vidéo live est le format qui génère le plus d’engagement.
 C’est un moyen de captiver votre audience facilement, une publication avec une vidéo aura un meilleur Edge Rank. Une vidéo native Facebook aura un meilleur engagement qu’un lien vers Youtube.
Les médias sociaux
Les médias sociaux Twitter 317 millions d’utilisateurs actifs UNE PLATEFORME DE MICRO-BLOGGING où l’on partage du contenu comme sur un blog mais dans un maximum de 140 caractères, toujours public. On peut aussi repartager les publications des autres. UN RÉSEAU SOCIAL où l’on se fait un réseau d’abonnés et où on prend part à des discussions privée ou publiques UN LIEU DE RENCONTRE où on rencontre des gens et où on bâtit des relations sans niveau de hiérarchie et d’interagir avec des personnalités célèbres ou politiques particulièrement accessibles. Possibilité de sponsoriser un tweet. Tweeter est trés consulté depuis des applications dashboard comme Tweetdeck
Les médias sociaux Instagram Orienté photo, image, vidéo on donne des effets vintage aux photos. Possibilité de faire des stories, publications animées temporaires. Racheté par Facebook pour un milliard de dollars en 2012 Application dédiée pour le mobile, tout le monde peut tout voir, sauf si notre profil est privé on utilise des hashtags. Les photos sont postées depuis un smartphone. Impossible de poster depuis un PC. A partir d’un PC, il vous sera possible de vous connecter à votre compte Instagram pour visualiser les photos. Multicompte sur l’application mobile Impossible de mettre un lien dans un post Pour un usage pro, l’idéal est de proposer des photos de vos événements en cours, de proposer un hashtag dans sa description, et d’en profiter pour faire passer des visuels avec du texte, pour faire la promotions d’événements. Possibilité de promouvoir une publication.
Les médias sociaux https://ifttt.com/ IF This Then That (Si Ceci Alors Cela). IFTTT est un service web gratuit avec des options payantes, permettant de créer des chaînes d'instruction appelées applets. Une applet est déclenchée par des changements qui interviennent au sein de services web tels que WordPress, Gmail, Facebook, Instagram ou Pinterest. Par exemple une applet peut faire une publication sur Facebook, Twitter lors de la création d’un article sur un site Wordpress, envoyer un e-mail si l'utilisateur tweete avec un hashtag donné, ou encore sauvegarder les photos publiées sur Facebook dans un service de stockage comme Dropbox, ou bien s'envoyer un mail s'il pleut demain.
Interactions site/réseaux Réseaux sociaux Liens vers nos réseaux sociaux L’interaction minimum est le simple lien vers nos pages de réseaux sociaux. Simple à mettre en place, il informe les visiteurs de notre site web, de notre présence sur les réseaux.
Interactions site/réseaux Réseaux sociaux Boutons de partage social Liens présents sur les pages de notre site qui invitent les visiteurs à partager l’adresse de notre page sur leurs réseaux sociaux. Les études réalisées sur l’efficacité de cet outils nous indique que personne ne clique sur ces boutons (ou presque). Les personnes qui souhaitent partager votre page utilisent : - le copier-coller de l’url de la page - l’option de partage présente sur les mobiles - plugin de navigateur qui offre cette option pour les pro du partage. Ces boutons ont une autre utilité : la preuve sociale. La preuve sociale c’est choisir entre 2 restaurants, celui qui est toujours bondé et celui qui est toujours vide. Le compteur de partage prend en compte le nombre de partage fait par tout les moyens et indiquera la popularité de la page. Ces boutons rappellerons à vos visiteurs qu’ils peuvent partager cette page sur les réseaux . Où mettre nos compteurs ? Le plus haut possible ou à gauche, pour la preuve sociale ; Et à la fin de l’article, pour inciter au partage. Pour info, ces boutons sont aussi des mouchards pour les réseaux sociaux.
Interactions site/réseaux Réseaux sociaux Plugins sociaux Facebook Sur cette adresse https://developers.facebook.com/docs/plugins Facebook nous propose de créer des widgets pour notre site web : Boutons de partage, boite de commentaires, et Plugins page qui permet de créer une boite paramétrable qui s’intégrera sur notre site et affichera les amis du visiteur qui aiment la page Facebook associée au site, les publications, etc…. Sur twitter Idem sur https://publish.twitter.com/#
RGPD Règlement général sur la protection des données Le règlement no 2016/679, dit règlement général sur la protection des données (RGPD, ou encore GDPR, de l'anglais General Data Protection Regulation), est un règlement de l'Union européenne qui constitue le texte de référence en matière de protection des données à caractère personnel. Il renforce et unifie la protection des données pour les individus au sein de l'Union européenne. Ce règlement a été définitivement adopté par le Parlement européen le 14 avril 2016. Ses dispositions sont directement applicables dans l'ensemble des 28 États membres de l'Union européenne à compter du 25 mai 2018. Les principaux objectifs du RGPD sont d'accroître à la fois la protection des personnes concernées par un traitement de leurs données à caractère personnel et la responsabilisation des acteurs de ce traitement.
Glossaire Donnée personnelle Une donnée permettant d’identifier directement ou indirectement une personne physique Directe -> Nom Prénom, mail (quand il y a le nom), photo Indirecte -> n° de sécurité sociale, n°CB, adresse IP, plaque immatriculation véhicule… Donnée sensible La santé, orientation sexuelle, opinions politiques, religieuses, pays d’origine, etc Traitement Ce qui est visé par la réglementation, toute opération sur la donnée : stockage, organisation, collecte, revente, envoi de newsletter, statistiques de consultations. Qui est soumis aux obligations du RGDP ? Organismes privée ou publique à des fins professionnelles. Les sanctions Sanction administrative : jusqu’à 4 % du chiffre d’affaires annuel mondial de l’entreprise RGPD Règlement général sur la protection des données
Qui est responsable ? Responsable du traitement : il détermine les finalités, les objectifs du traitement. C’est le responsable de la com, le directeur de l’établissement… Sous-traitant : Celui qui traite la donnée pour le compte du responsable. Hébergeur, webmaster, agence de com, fournisseur de solutions emailing…. et leurs sous-traitants. Ils engagent leur responsabilité conjointement. RGPD Règlement général sur la protection des données
La Cnil La Commission nationale de l'informatique et des libertés de France est une autorité administrative. La CNIL est chargée de veiller à ce que l’informatique soit au service du citoyen et qu’elle ne porte atteinte ni à l’identité humaine, ni aux droits de l’homme, ni à la vie privée, ni aux libertés individuelles ou publiques. Elle donne des conseils aux internautes sur l’usage des réseaux sociaux, la maîtrise de ses données, comment réagir en cas de problèmes ….
 https://www.cnil.fr/fr/10-conseils-pour-rester-net-sur-le-web
 https://www.cnil.fr/fr/configurer Il n’y a plus de déclarations à la Cnil quand on traite des données personnelles. La Cnil peut faire des contrôles auprès des personnes ou organismes traitant des données personnelles. Les personnes controlées devront être en capacité de démontrer qu’ils ont respecté les obligations. En cas de violations de données privées une déclaration doit être faite à la Cnil, une violation cela peut-être le vol de son ordinateur ou être victime d’un piratage. Il faudra démontrer les mesures mises en place pour limiter la violation des données personnelles. Il faudra aussi informer la personne concernée par le vol de ces données. RGPD Règlement général sur la protection des données
Que dit la loi ? La loi indique les traitements interdits, par principe le reste est autorisé. Le traitement des données sensibles est interdit, sauf personnes autorisées comme le personnel médical, dans certains cas les données sensibles peuvent être traités avec le consentement des personnes. Pour la prospection commerciale, envoyer de la pub par mail ne peut être fait qu’avec le consentement des prospects. Sauf dans le cas d’échanges commerciaux contractuels passés pour des produits ou services analogues. Les grands principes : • Collecter des données de façon loyale, licite. • Les objectifs de la collecte de cette donnée doivent être définis clairement à la personne concernée. • Ne collecter que les données nécessaires à cette finalité (pas besoin d’avoir des infos sensibles pour envoyer une newsletter). • Un traitement de données personnelles implique une durée limitée et doit être annoncée. Un fichier de prospect peut être conservé 3 ans. Au bout de 3 ans on doit redemander le consentement des personnes. • Les données récoltées avec des cookies, adresses IP ne peuvent pas être conservés plus de 13 mois. • Les données personnelles doivent être sécurisées, mettre en place les outils nécessaires pour préserver la confidentialité (perte, piratage, revente). RGPD Règlement général sur la protection des données
Les personnes concernées Le responsable de la données ou le sous-traitant doivent être en capacité de répondre aux droits des personnes concernées. Droit à l’information, pouvoir fournir à la personne concernée les données collectées. Droit à l‘accès, à la rectification, droit d’opposition ou effacement des données.(notamment à la prospection commerciale, comme se désinscrire d’une newsletter). Droit de faire transférer ses données à un autre prestataire. (Exporter une mailing-list, pour changer de service) RGPD Règlement général sur la protection des données
Les obligations Privacy by design, le respect de la vie privée dès la conception. Le concept de “Privacy by Design” a pour objectif de garantir que la protection de la vie privée soit intégrée dans les nouvelles applications technologiques et commerciales dès leur conception. Privacy by default, principe de ne traiter que les données nécessaires à ce qu’on veut faire au regard de la finalité des traitements. C’est un principe de minimisation. Le registre de traitement, (obligatoire pour les organismes au delà de 250 salariés). Tableur dans lequel il est précisé : • les catégories de données : prospects, clients, salariés… • les traitements • nommer le délégué à la protection des DP. En droit européen, le Délégué à la protection des données (abrégé DPD, ou DPO, pour Data Protection Officer) est la personne chargée de la protection des données au sein d'une organisation. RGPD Règlement général sur la protection des données
Bandeau des cookies Les internautes doivent être informés et donner leur consentement préalablement à l'insertion de traceurs. Ils doivent disposer d'une possibilité de choisir de ne pas être tracés lorsqu'ils visitent un site ou utilisent une application. Les éditeurs ont donc l'obligation de solliciter au préalable le consentement des utilisateurs. Ce consentement est valable 13 mois maximum. Exemple : l’utilisation de Google analytics sur son site, objets facebook… Une grande partie des entreprises ne respectent pas à 100% la loi sur cette question. Schématiquement, on exige 3 éléments : Expliquer aux internautes la finalité du dépôt : à quoi sert le cookie ? Mesures d'audience, publicités ciblées... ? Permettre aux internautes de s'opposer au dépôt : il est impossible pour les utilisateurs de "subir" et de ne pas pouvoir refuser le traitement de données. Obtenir l' "accord" des internautes : le consentement est présumé si l'utilisateur poursuit sa navigation. Les sites web ne réalisent en général pleinement que la première situation. En clair, le "bandeau cookie" informe seulement qu'un ou plusieurs cookies sont déposés, souvent de manière évasive. Et que l'on effectue ou pas une action, le cookie s'inscrit sur le terminal, sans consentement préalable donc. RGPD Règlement général sur la protection des données
Dans wordpress Plugin de consentement cookies, à personnaliser. RGPD Règlement général sur la protection des données La page Politique de confidentialité créée automatiquement qui est à compléter en fonction des options du site (Google analytics, newsletter, formulaire, commentaires, e-commerce….). Dans Réglages/confidentialité. Outils exporter les données, qui compile toutes les données conservées associées à un utilisateur et permet de les télécharger et de les supprimer. Cookies consent GDPR Cookie Consent GDPR Cookie Compliance
Newsletter et publipostage
➜ Le nom de l’expéditeur 
 C’est le nom de l’organisme ou de la personne qui envoie le mail (les prénoms féminins ont plus d’impact), pas de descriptions, pas d’adresses e-mail en clair. ➜ L’objet de la newsletter
 L’objet doit être le titre ou la description courte du contenu de la newsletter. Entre 30 à et 50 caractères sont conseillés. Le marketing conseille des verbes d’action : Devenez, Prenez, Découvrez, Gagnez, Essayez. Evitez les objets du style « Newsletter de Machin », « Newsletter de Noël » ou « Newsletter n°12 », parlez plutôt de votre contenu. Attention à l’adresse utilisée pour l’expédition du mail qui sera probablement très vite spammée. Utilisez une adresse @le-nom-de-votre-site.com L’en-tête du mail
« Une newsletter sera lue en moins de 40s » Faites un contenu simple mais soigné, court, épuré en cohérence graphique avec le reste de vos outils de communication, qui se charge vite, évitez un trop grand nombre d’images. Un contenu personnalisé « Bonjour Giselle… » et rédigé aura plus d’impact. Adressez-vous à vos abonnés, ne faites pas des simples copier-collé du site web. Un accès facile à la désinscription renforce la confiance du lecteur. Proposez des jeux, des promotions, des infos en avant-première, des contenus exclusifs, utilisez des messages propres à votre newsletter. Vous pouvez mettre un lien vers l’inscription pour donner la possibilité d’inscrire quelqu’un, changer son adresse… Pensez à vos réseaux sociaux. Des titres courts, le corps du texte ne doit pas être inférieur à 13px. Les zones cliquables doivent faire au moins 44px par 44px. Préférez les boutons d’appel à l’action pour diriger vos lecteurs ou vous le souhaitez, plutôt que des liens dans du texte. Utilisez moins de 4 liens dans vos newsletters. Limitez les logos des partenaires et ne les rendez pas cliquables, vous augmenteriez vos chances d’être rangé dans le spam. Pour les images pensez au texte alternatif (la balise alt), les problèmes d’affichage des images sont plus fréquents que sur le web, un texte alternatif peut être utile. Pas d’animations, pas de vidéos, pas de formulaires. L’en-tête et le contenu
Pensez à faire un planning des expéditions. Comme pour les réseaux sociaux, envoyez plutôt vos newsletters en fin de semaine ou à l’heure des repas. Comment éviter à sa newsletter d’être considéré comme du spam ?
 • Ne pas envoyer à des personnes qui ne se sont pas inscrites ou n’ont pas donné leur accord. 
 • Envoyez une à deux newsletters par mois maximum.
 • L’objet : pas en majuscule, pas de ! % / répétés plusieurs fois, pas de € ou $, pas de termes sur la gratuité, les régimes minceur ou le viagra…
 • Le corps : La newsletter ne doit pas être composée d’une grande image unique. Respectez un bon équilibre photo/texte, une taille de police ni trop petite ni trop grande. Un texte bien contrasté et lisible. Eviter le terme « Cliquez ici ». L’envoi
Il existe des outils que l’on peut installer sur son serveur comme PhpList ou WANewsletter, mais les hébergements web classiques ne sont pas fait pour gérer des envois de newsletter en volume. Ce sont les services en ligne payants qui seront les plus simples et les plus efficaces. Tous proposent une formule gratuite pour un nombre limité de destinataires. La formule gratuite la plus intéressante actuellement est proposée par Mailchimp (en anglais uniquement), la formule permet d’envoyer un maximum de 12 000 mails par mois à un maximum de 2000 abonnés. La formule payante la moins chère est proposée par Mailjet (en français). Pour 5,49€ h.t par mois, vous envoyez 30 000 e-mails par mois. Il existe de nombreux autres prestataires, les prix changent souvent et de nouveaux acteurs arrivent régulièrement. Attention, certains services illimités gratuits récupèrent vos adresses e-mails pour les revendre ou insèrent de la pub dans vos newsletters, ou offrent un service difficile à utiliser sans statistiques, ni éditeur de newsletter. Les outils

Contenu connexe

PDF
Formation wordpress
parMédiathèque Gaston Baissette à Mauguio
 
PDF
Cms
parChris Gaillard
 
PDF
Les étapes de création d'un site web
parChris Gaillard
 
PPT
Conception Web Avec Dreamweaver
pardavidbx
 
PDF
Webdesign
parChris Gaillard
 
PDF
Développer son site internet et optimiser son référencement
parYoann Kassi-Vivier
 
PDF
Webdesign sites web et mobiles-methodes-realisation-outils
parOlivier Dommange
 
ODP
Drupal en bibliothèque (2008)
parNicolas Morin
 
Formation wordpress
parMédiathèque Gaston Baissette à Mauguio
 
Cms
parChris Gaillard
 
Les étapes de création d'un site web
parChris Gaillard
 
Conception Web Avec Dreamweaver
pardavidbx
 
Webdesign
parChris Gaillard
 
Développer son site internet et optimiser son référencement
parYoann Kassi-Vivier
 
Webdesign sites web et mobiles-methodes-realisation-outils
parOlivier Dommange
 
Drupal en bibliothèque (2008)
parNicolas Morin
 

Tendances

PDF
Wordpress notes de cours
parmichel.titeux
 
PPT
content management system
parIbtissam Kably
 
PPTX
Test de produit, word press
parKhaldi Abdelhamid HAbib
 
PDF
Les systèmes de gestion de contenus des sites Internet ou CMS
parArdesi Midi-Pyrénées
 
PDF
Creer un site internet sous WordPress
parErwan Tanguy
 
PPTX
Support de formation pour Wordpress
parVoyelle Voyelle
 
PDF
La page web en html css
parOlivier Dommange
 
PPT
Midi Internet
parS6
 
PPT
Cours1
parLeandre Cof's Yeboue
 
PDF
Web { Design Project } Management
parDavid Roessli
 
PPTX
2018 Cours projet web collaboratif Partie1
parEric Giraudin
 
ODP
Wordpress pour les entreprises
parmonsieurpixel
 
PDF
Choix strategique d'un CMS
parOlivier Dommange
 
PPTX
2016 Cours projet Web Collaboratif - Partie 2
parEric Giraudin
 
PPTX
2016 Cours projet Web Collaboratif - Partie 3
parEric Giraudin
 
PDF
Utiliser WordPress
parDaniel GUEYSSET
 
PDF
Constructeur de page avec Wordpress
parChris Gaillard
 
PDF
Formation WordPress à Blida
parGd6d
 
PDF
Prezi&cie
parlamarionita
 
PDF
Webdesign le graphisme et ses principes
parOlivier Dommange
 
Wordpress notes de cours
parmichel.titeux
 
content management system
parIbtissam Kably
 
Test de produit, word press
parKhaldi Abdelhamid HAbib
 
Les systèmes de gestion de contenus des sites Internet ou CMS
parArdesi Midi-Pyrénées
 
Creer un site internet sous WordPress
parErwan Tanguy
 
Support de formation pour Wordpress
parVoyelle Voyelle
 
La page web en html css
parOlivier Dommange
 
Midi Internet
parS6
 
Cours1
parLeandre Cof's Yeboue
 
Web { Design Project } Management
parDavid Roessli
 
2018 Cours projet web collaboratif Partie1
parEric Giraudin
 
Wordpress pour les entreprises
parmonsieurpixel
 
Choix strategique d'un CMS
parOlivier Dommange
 
2016 Cours projet Web Collaboratif - Partie 2
parEric Giraudin
 
2016 Cours projet Web Collaboratif - Partie 3
parEric Giraudin
 
Utiliser WordPress
parDaniel GUEYSSET
 
Constructeur de page avec Wordpress
parChris Gaillard
 
Formation WordPress à Blida
parGd6d
 
Prezi&cie
parlamarionita
 
Webdesign le graphisme et ses principes
parOlivier Dommange
 

Similaire à Communication digitale

PPT
Insite formation medialille 2016 - v1
parVéronique Lefebvre
 
PDF
Cours de Web Design part.1
parMC Casal
 
PPTX
CMS et Wordpress
parClément Dussarps
 
PDF
Création ou refonte de site Internet
parOffice de tourisme Aunis Marais Poitevin
 
ODP
présentation wordpress
parmonsieurpixel
 
PPT
5èmes Rencontres Tourisme & Internet du Tarn
parLudovic Dublanchet
 
PPT
Internet Participatif, Flux Rss Et Syndication
parTarn Tourisme
 
PDF
Webdesign, UX et UCD #1
parRelax In The Air
 
PPT
Evolution du web2.0
parUNIVERSITE DE METZ
 
PPT
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
pari-breed et associés
 
KEY
WebSchool Orléans - B.A BA de la Création Web
parTRIBELEADR
 
PPTX
Séminaire Communication web - partie 1
parNoémie Toledano
 
PDF
Atelier 3 : Création ou refonte de site
parOffice de tourisme Aunis Marais Poitevin
 
PPTX
Web content management wcm
parGhizlane El Karchouli
 
PPT
inis1: les outils du web 2.0
parSacha Declomesnil
 
PDF
Exister sur le Web : pourquoi, comment, les risques, les atouts
parEmilie Marquois
 
PDF
Support formation vidéo : Réussir votre site web avec WordPress
parSmartnSkilled
 
PDF
Quelques idées sur le web
parFrederic Soussin
 
PDF
RV TIC - Le Web, quest-ce que cest?
parSherbrooke Innopole
 
PPSX
Blogs de bibliothèque
parDujol Lionel
 
Insite formation medialille 2016 - v1
parVéronique Lefebvre
 
Cours de Web Design part.1
parMC Casal
 
CMS et Wordpress
parClément Dussarps
 
Création ou refonte de site Internet
parOffice de tourisme Aunis Marais Poitevin
 
présentation wordpress
parmonsieurpixel
 
5èmes Rencontres Tourisme & Internet du Tarn
parLudovic Dublanchet
 
Internet Participatif, Flux Rss Et Syndication
parTarn Tourisme
 
Webdesign, UX et UCD #1
parRelax In The Air
 
Evolution du web2.0
parUNIVERSITE DE METZ
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
pari-breed et associés
 
WebSchool Orléans - B.A BA de la Création Web
parTRIBELEADR
 
Séminaire Communication web - partie 1
parNoémie Toledano
 
Atelier 3 : Création ou refonte de site
parOffice de tourisme Aunis Marais Poitevin
 
Web content management wcm
parGhizlane El Karchouli
 
inis1: les outils du web 2.0
parSacha Declomesnil
 
Exister sur le Web : pourquoi, comment, les risques, les atouts
parEmilie Marquois
 
Support formation vidéo : Réussir votre site web avec WordPress
parSmartnSkilled
 
Quelques idées sur le web
parFrederic Soussin
 
RV TIC - Le Web, quest-ce que cest?
parSherbrooke Innopole
 
Blogs de bibliothèque
parDujol Lionel
 

Plus de Chris Gaillard

PDF
Accessibilité web
parChris Gaillard
 
PDF
WordPress
parChris Gaillard
 
PDF
Cours Images
parChris Gaillard
 
PDF
Réseaux -sociaux 2023
parChris Gaillard
 
PDF
Ergonomie
parChris Gaillard
 
PDF
RGPD
parChris Gaillard
 
PDF
Newsletter et publipostage
parChris Gaillard
 
PDF
Règles typo
parChris Gaillard
 
PDF
Présentation et historique
parChris Gaillard
 
PDF
Introduction à Wordpress
parChris Gaillard
 
PDF
SEO Référencement
parChris Gaillard
 
PDF
Gutenberg - WordPress 5
parChris Gaillard
 
PDF
Migrer un site Wordpress
parChris Gaillard
 
Accessibilité web
parChris Gaillard
 
WordPress
parChris Gaillard
 
Cours Images
parChris Gaillard
 
Réseaux -sociaux 2023
parChris Gaillard
 
Ergonomie
parChris Gaillard
 
RGPD
parChris Gaillard
 
Newsletter et publipostage
parChris Gaillard
 
Règles typo
parChris Gaillard
 
Présentation et historique
parChris Gaillard
 
Introduction à Wordpress
parChris Gaillard
 
SEO Référencement
parChris Gaillard
 
Gutenberg - WordPress 5
parChris Gaillard
 
Migrer un site Wordpress
parChris Gaillard
 

Communication digitale

  • 1.
  • 2.
    Présentation Travailleur indépendant installédans la région grenobloise depuis 1996. Je conçois et réalise des sites Internet (20 ans et plus de 200 sites web à mon actif ), du cahier des charges au design, en passant par le développement. Je me spécialise sur les CMS Wordpress et Spip. Je donne des cours à IUT Info-Com de Grenoble, Stendhal Master 2 Diffusion de la Culture, CNRS… Quelques références dans le domaine culturel local
  • 3.
    Chiffres 2018 54% dela population mondiale est sur Internet 44% sur les réseaux sociaux 88% des français ont accès à Internet 91% des internautes français ont un usage quotidien 58% sont sur les réseaux sociaux 71% ont un smartphone 59% du traffic depuis un ordinateur, 34% depuis un smartphone Temps moyen passé par Internaute français - 4h48 sur Internet - 1h22 sur les réseaux sociaux 91% considèrent la protection des données comme important Source : https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018
  • 4.
    Chiffres 2018 Sites lesplus visités 1 - Google 2 - Facebook 3 - Youtube 4 - Wikipédia 5- Amazon Plateformes sociales les plus actives 1 - Youtube 2 - Facebook 3 - Facebook Messenger 4 - Instagram 5- Twitter En France 38 millions d’utilisateurs actifs (+6% par rapport à 2017) 82% des utilisateurs sur mobile 13-17 ans : 6 % 18-24 ans : 20 % 25-34 ans : 26 % 35-44 ans : 20 % 45-54 ans : 14 % 55-64 ans : 8 % + de 65 : 6 %
  • 5.
    Chaque minute surInternet 7 millions de snaps envoyés sur Snapchat 216 millions de photos aimées sur Facebook 2,4 millions de photos aimées sur Instagram 350 000 tweets sur Twitter 400 heures de vidéos téléchargées sur YouTube
  • 6.
    Evolution des technologies ….et leur incidence sur la conception des sites web. Années 90 Sites statiques en html css avec des logiciels comme Dreamweaver. Années 2000 Usage massif du Flash Années 2010 Généralisation des sites propulsés par des CMS comme Wordpress
  • 7.
    Evolution des outilsde consultations …. et leur incidence sur la conception des sites web. Les ordinateurs changent de taille d’écrans
  • 8.
    Evolution des outilsde consultations …. et leur incidence sur la conception des sites web. Vitesse de connexions Bas débit : Modem 56 ko avec connexion par le téléphone, site léger optimisé, chaque image devait être optimisée. (Années 90). 
 Connexion via un mobile en 2G 3G : Retour à une connexion lente sur un petit écran Haut débit : ADSL plus rapide, les sites internet peuvent être plus plus lourds : grandes photos, vidéo, animations flash etc… Très haut débit : La fibre dans les zones denses Les concepteurs de sites Internet doivent penser à offrir une bonne experience utilisateur à ceux qui naviguent avec un téléphone en bas débit et à ceux qui naviguent sur un grand écran en très haut débit.
  • 9.
    Evolution des technologies ….et leur incidence sur la conception des sites web. Aujourd’hui les sites sont « Responsives » Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur sur téléphones mobiles, tablettes, moniteurs d'ordinateur de bureau. Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements des pages. Depuis mai 2015, google pénalise les sites non-responsive.
  • 10.
    Les CMS Un CMS(Content Management System) permet de réaliser un site internet dynamique et responsive via une interface simple d'utilisation. Il est ainsi facile de créer des pages, sans forcément connaître les langages en développement web. Il existe des centaines de CMS, pour différents types d'utilisation comme : Rédiger des articles et les publier dans un blog. Présenter l'activité d'une entreprise à travers un site institutionnel. Vendre ses produits en ligne sur un site e-commerce, grâce à l'installation de modules de paiement. Créer un site communautaire pour favoriser le partage d'informations entre plusieurs internautes.
  • 11.
  • 12.
    2003 (v0.7) Lancement deWordPress, c’est l’évolution de b2 un logiciel de Michel Valdrighi qui existe toujours. 2004 Matthew Mullenweg qui âgé seulement de 20 ans et développe WordPress fonde la société d’édition de logiciel Automattic en 2005. 2005 WordPress 1.2 Charles Mingus. Possibilité de gérer et de développer des plugins. WordPress 2 Duke Ellington. Elle apporte l’introduction d’un éditeur de texte, Il devient également possible d’uploader des images, de créer de nouveaux rôles utilisateur. 2010 (v3.0) La communauté de développeurs WP prend de l’ampleur 218 développeurs pour la version 3,
 « Explosion » de WordPress WordPress est téléchargé 50 millions de fois depuis sa sortie en 2003 2019 (v5) Wordpress est le CMS le plus répandu dans le monde, (un site sur 3. ) Arrivé de Gutenberg, un constructeur de pages intégré à WordPress menacé par des outils comme WIX, et souhaitant participer à l’essors des constructeurs de pages proposés par les éditeurs de thèmes. WordPress
  • 13.
    Ce sont desthèmes (ou de plugins) qui remplacent le champ de saisi des pages et des articles, par un outil de construction de pages. Un page builder permet de composer une page responsive en empilant des modules composés de sections qui se découpent en colonnes. Colonnes que l’on remplit de textes, de photos, de vidéos, de cartes, de slider, etc… Chacun de ses éléments est associé à un panneau de configuration permettant des réglages d’affichage graphique, d’effets d’animation, etc… Les constructeurs de pages
  • 14.
  • 15.
  • 16.
    Gutenberg Gutenberg principale nouveautéde Wordpress 5, est un éditeur de contenu qui remplace TinyMCE, un petit Page Builder, ou constructeur de page comme Divi, Visual Composer, Avada… plus simple mais extensible avec des blocs communs. Gutenberg a pour objectif de se transformer en un véritable constructeur de site. Faire de WordPress une alternative OpenSource (avec des modules payants) à des concurrents comme Wix ou SquareSpace.
  • 17.
    Gutenberg Un système deblocs Comme un constructeur de pages, Gutenberg propose à la place de l’éditeur de texte classique, un ensemble de blocs. Des plugins vont permettra d’ajouter d’autres blocs, comme des maps Google, des sliders animés, des blocs de textes avec plus d’options.
  • 18.
    Gutenberg Tous les thèmesne sont pas compatibles ou optimisés pour Gutenberg. Il est possible d’être dans WordPress 5 et d’activer l’éditeur classique tinyMCE, avec le plugin Classic Editor.
  • 19.
    Google Analytics Google Analyticsest un service gratuit d'analyse d'audience d'un site Web ou d'applications utilisé par plus de 10 millions de sites, soit plus de 80 % du marché mondial. Il faut enregistrer son site sur le site Google Analytics et coller un code sur l’ensemble des pages du site. Ces opérations vont vous permettre de connaitre les comportement de vos visiteurs. Cookie : Il s’agit d’un petit fichier texte stocké sur l’ordinateur (ou autre terminal) de l’internaute. Ce fichier regroupe des données telles que l’heure de visite, le nombre de visites, la source d’arrivée (pour les cookies Google Analytics) mais plus globalement vos préférences et habitudes de navigation sur la toile. Google Analytics utilise un système de cookies qui permet de connaître les interactions du visiteur avec le site, il copie un fichier sur l’ordinateur du visiteur. Une adresse IP (avec IP pour Internet Protocol) est le numéro qui identifie chaque ordinateur connecté à Internet, ou plus généralement et précisément, l'interface avec le réseau de tout matériel informatique (routeur, imprimante) connecté à un réseau informatique utilisant l'Internet Protocol. 
 Google Analytics enregistre l’adresse IP du visiteur. L’IP permet d’avoir des informations sur la provenance des visites (géolocalisation) et d’identifier un pays, une région, une ville.
  • 20.
    Google Analytics Audience entemps réel ou analyse d’audience sur une période donnée Nombre de visiteurs en live sur le site Sources du traffic Zones géographiques Pages vues Graphique par jour, semaine ou mois sur une période que l’on peut définir. Le taux de rebond Support de consultation
  • 21.
    Capter et retenirses visiteurs Réduire le taux de rebonds Avoir du contenu utile, attractif, faire un effort sur la mise-en-forme des textes, avec des titres, inter- tires des mots en gras…. rapide à charger, avec du son, des vidéos… Pour les pages d’erreurs, inclure des propositions de contenu directement dans la page d’erreur 404. Sur les pages spectacles, proposer d’autres spectacles en bas de page ou dans la marge, comme par exemple « Vous aimerez aussi » ou «  dans le même style ».
  • 22.
  • 23.
    Accessibilité web Qu’est-ce quele handicap ? Selon la loi française : « Toute limitation d’activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d’une altération substantielle, durable ou définitive d’une ou plusieurs fonctions physiques, sensorielles, mentales, cognitives ou psychiques, d’un polyhandicap ou d’un trouble de santé invalidant. »
  • 24.
    Accessibilité web Qu’est-ce quel’accessibilité ? L’accessibilité est un terme initialement relatif au monde du handicap mais étendu à l'ensemble des citoyens et utilisé pour désigner l'accès aux domaines suivants : - physique, la liberté de déplacement dans l'espace ; - éducatif, le droit à une scolarisation ; - civique, le droit de vote ; - culturel, pouvoir développer sa culture ; - numérique, adaptation des systèmes numériques dont les sites web, aux différents types de handicap, développement d'outils spécifiques tels loupe ou clavier visuel ; - travail, pouvoir travailler en milieu ordinaire ; - santé, avoir accès aux services de santé promotionnels, préventifs et curatifs.
  • 25.
    Accessibilité web Qu’est-ce quel’accessibilité ? Pour les personnes en situation de handicap, l'objectif de l'accessibilité est de permettre une vie ordinaire. Pour les personnes n'étant pas en situation de handicap, l'accessibilité reste une préoccupation dans diverses situations : femmes enceintes, incapacités temporaires consécutives à un accident du travail ou domestique, difficultés sensorielles liées à l'âge, sur-poids : des situations où l'individu n'est pas à proprement parler en situation de handicap mais concerné : une jeune maman avec une poussette, un voyageur avec une grosse valise à roulette…..
  • 26.
    Accessibilité web Loi de1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …
  • 27.
    Accessibilité web Loi de1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …
  • 28.
    Accessibilité web Loi de1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …
  • 29.
    Accessibilité web Qu’est-ce quel’accessibilité web ? Selon la WAI (Web Accessibility Initiative) : « L’accessibilité du web signifie que les personnes en situation de handicap peuvent utiliser le web – plus précisément qu’elles peuvent percevoir, comprendre, naviguer et interagir avec le web, et qu’elles peuvent contribuer sur le web. L’accessibilité du web bénéficie aussi à d’autres, notamment aux personnes âgées dont les capacités changent avec l’âge. L’accessibilité du web prend en compte tous les handicaps qui affectent l’accès au web, ce qui inclut les handicaps visuels, auditifs, physiques, de parole, cognitifs et neurologiques. »
  • 30.
    Accessibilité web Le nombrede personnes concernées Entre 10 et 20% selon les résultats de l’enquête vie quotidienne et santé (INSEE, 2007). Une personne sur dix considère être « handicapée» , et une sur cinq être « limitée dans ses activités ». 15 % de la population mondiale selon le rapport mondial sur le handicap de l’OMS (2010).
  • 31.
    Accessibilité web L’accessibilité duweb, concrètement… Pour les personnes… • aveugles : navigation au clavier, utilisation d’un lecteur d’écran (synthèse vocale, plage braille), balisage sémantique, alternatives textuelles, liens et intitulés explicites, audiodescription… • malvoyantes : couleurs, contraste, taille des caractères… • sourdes : transcription textuelle, sous-titres synchronisés, interprétation en langue des signes… • malentendantes : dialogues suffisamment audibles… Et aussi : perte des capacités motrices, prévention des crises, difficultés de lecture, de concentration, de compréhension…
  • 32.
    Accessibilité web Un siteest accessible quand il fonctionne : • avec tous les navigateurs, récent et ancien. • avec n’importe quelle interface, navigation par souris, pad, écran tactile, clavier… • avec toute plateforme d’accès, c’est-à-dire tous les systèmes d’exploitation, mac, windows linux, mac OS, Androïd. • sans plugin tel que flash, quicktime etc… • avec tout périphérique d’affichage, moniteur de toute taille, écran de téléphone • un contenu compatible avec les systèmes d’aide technique destinée aux personnes handicapées (loupe d’écran, synthèse vocale, plage braille etc…). Ex: un texte en mode image, ne sera pas lisible avec ces outils.
  • 33.
  • 34.
  • 35.
  • 36.
    Accessibilité web Actuellement On constate,sur Internet un retard important pour l'équipement des services publics et plus grave encore une très faible accessibilité des outils Internet mis à disposition des citoyens. Une révision de la loi de 1975 prévoit pour sa part que l'accessibilité de l'information publique sera rendue obligatoire. Au niveau économique, l'accessibilité devient un véritable enjeu marketing et commercial et constitue un atout pour les sociétés sensibles à leur image.
  • 37.
    Accessibilité web Outils 
 Les personnesmalvoyantes utilisent des logiciels spécifiques appelé loupe d'écran, logiciel de grossissement d'écran qui leur permettent de personnaliser le contenu du site, changer la taille de la police, ou même la police, modifier le contraste texte de la page etc.. Zoomtext reste aujourd'hui le plus célèbre de ses logiciels spécifiques.
  • 38.
    Accessibilité web Outils 
 Les personnesnon voyantes ont deux possibilités pour consulter des pages Web, un terminal braille un appareil qui traduit le texte présent dans une page en braille; ou l'utilisation d'un logiciel de synthèse vocale, ils peuvent utiliser les deux à la fois.
  • 39.
    Accessibilité web Outils 
 Pour lespersonnes sourdes ou malentendantes il n'y a pas réellement aide technique, l'auteur d'un site devra prévoir une alternative texte aux contenus sonores présents sur un site. Il existe cependant des produits de reconnaissance vocale qui ont été adaptés pour convertir le langage parlé en langage des signes. Ce qui permet aux sourds et malentendants d'accéder à des informations auditives.
  • 40.
    Accessibilité web Outils 
 Les personnessouffrant de handicaps moteur rencontrent plusieurs types de difficultés. L'utilisation du clavier, de la souris des ascenseurs de défilement sur une page sont autant de gènes liés à des problèmes de contrôle musculaire, de coordination, de paralysie, ou lié au manque d’un des bras par exemple. Des outils spécifiques existent là aussi pour pallier ces problèmes.
  • 41.
    Accessibilité web Un siteaccessible 
 Les images sont omniprésentes sur le site Internet et apportent des informations au contenu de la page. Une personne ne pouvant pas visualiser ses images à cause des déficiences visuelles ou par choix de naviguer en mode texte, n'aura pas accès aux contenus informatifs de ces dernières. Il faut donc une alternative textuelle associée à cette image, c'est la balise html Alt. < a href=«chaton.jpg » alt=«un bébé chat » >
  • 42.
    Accessibilité web Un siteaccessible 
 Pour les sons l'alternative des contenus sonores va reprendre l'intégralité du texte parlés ou chantés ainsi que les bruits importants présents dans la bande son qui ont pour but de donner une information supplémentaire. L'idéal est de proposer un lien pour la lecture écrite.
  • 43.
    Accessibilité web Un siteaccessible 
 Pour les vidéos, Il convient d'ajouter des sous-titres à la vidéo pour que l'alternative textuelle soit synchronisé avec la mention. Les sites de partage de vidéos comme YouTube propose aux fournisseurs de contenu un outil de sous-titrage extrêmement facile à utiliser.
  • 44.
    Accessibilité web Un siteaccessible 
 Trop de sites utilisent des contrastes trop faible entre le texte et le fond de la page ce qui entraîne une importante fatigue visuelle pour l'utilisateur du même coup rejet de la page. Il faut donc être prudent avec les images de fond pour l'utilisation parfois lourdement frappé la lisibilité du site. La taille des textes et le choix des typos doivent servir le confort de lecture. Le respect des règles de ponctuation, afin de ne pas changer le sens d’une phrase quand elle est lue par un synthétiseur vocale : Example : « C’est l’heure de manger, les enfants… » « C’est l’heure de manger les enfants… »
  • 45.
    Accessibilité web Un siteaccessible 
 Les animations Les textes défilant ou clignotant doivent au moins pouvoir être mis en pause. Il est fortement recommandé de ne pas les utiliser.
  • 46.
  • 47.
  • 48.
    Sur Internet, letravail de référencement consiste à améliorer le positionnement et la visibilité de sites dans des pages de résultats de moteurs de recherche ou d’annuaires. Le référencement web s'articule autour de deux stratégies distinctes et complémentaires : le référencement naturel (ou organique) et le référencement payant (ou liens sponsorisés). Référencement
  • 50.
    Le référencement "naturel","traditionnel" ou "organique" consiste à optimiser les pages de son site afin d'apparaître dans les meilleures positions des résultats de recherche. Il n'existe pas, dans ce cas, de transaction financière entre l'éditeur du site et le moteur de recherche. Le référencement "payant" ou "paid inclusion" ou "trusted feed" consiste à payer le moteur de recherche pour une offre commerciale (paiement au forfait ou au clic) proposant la garantie d'indexation (mais pas la garantie de positionnement). Il s'agit d'une offre le plus souvent prise en compte pour référencer de façon globale tous les produits d'un catalogue par exemple... La plupart de ces pratiques sont complémentaires, et c'est certainement ce qui fait - en bonne partie - l'efficacité d'une campagne de "Search Engine Marketing" bien faite... Référencement
  • 51.
    Pour quoi faire? - Etre présent - Etre bien placé - Augmenter le nombre de visites - Développer sa notoriété - Trouver de nouveaux contacts, clients, spectateurs, visiteurs…. Référencement
  • 52.
    SEO Search Engine Optimizationou Optimisation pour les moteurs de recherche Porte essentiellement sur le texte écrit qui est présent sur le site. Les mots clés sont extrêmement importants et doivent être choisis avec pertinence. Entre 5 et 10 mots classés par ordre d’importance. Pour optimiser le contenu, il faut penser à : - Identifier ce que recherchent les internautes (= quels sont les mots-clés utilisés) - Adapter mon vocabulaire à celui de mon public. Référencement
  • 53.
    Position des motsclés Visible à l’écran Les moteurs de recherches tiennent compte des éléments suivants : 1- Titre de la fenêtre, en html la balise <title></title> Il faut des titres différents, d’une page à l’autre. 2 -L’url doit contenir des termes explicites. Sur ce site les urls sont peu explicites http://www.le-grand-angle.fr/spip.php?page=article&id_article=46 3 - Les titres et sous-titres Les titres dans des balises <h1> <h2> <h3>… Il doit forcément y avoir une balise <h1> mais pas plus. Les paragraphes doivent forcément être dans des balises <p>. 4- Le premier paragraphe 5- Les mots en gras Référencement
  • 54.
    Position des motsclés Invisible à l’écran Les moteurs de recherches tiennent compte des éléments suivants : Les textes alternatifs des images Les images doivent avoir un texte alternatif, la balise alt. <img alt=“Cie de Théâtre Duchmol“ src=« lacie-duchmol.jpg » /> Dans Wordpress Référencement Dans DIVI, sur le module images
  • 55.
    En affichant lecode source de la page, on voit dans l’entête divers balises Cette balise contiendra une description succincte du site web, son contenu sera récupéré par Google dans l’affichage de ses résultats. Les textes présents dans cette description n’ont aucun poids pour le référencement. Référencement <meta name="description" content="Musilac est un festival pop-rock organisé à Aix-les-Bains les 13, 14, 15 et 16 Juillet 2017 sur l'esplanade du bord du lac du Bourget." />>
  • 56.
    Contenus Le site doitcontenir un contenu original et non un simple copier- coller d’un autre site. Google pénalise les sites qui n’ont pas de contenus originaux. Les pages devront au moins contenir un contenu textuel conséquents, 300 mots mais si il y en a 1000 c’est mieux. Le premier paragraphe devra contenir les mots clés principaux. C’est toujours bien d’ajouter des liens extérieurs. Référencement
  • 57.
    Un titre depage devrait avoir au moins 35 caractères Les mots en gras, dans les titres, et les textes alternatifs aux images ont plus de poids. Le site doit changer régulièrement, une zone avec des actualités mises à jour régulièrement favorisera le bon référencement de celui-ci. Inclure un transcript (texte et description) des vidéos et audio présents sur le site. Faites des liens internes vers les pages les plus importantes de votre site. Essayer d’avoir des liens externes qui pointent chez vous. Référencement
  • 58.
    Les algorithmes deGoogle et leur mise à jour Il faut toujours se tenir informer des évolutions des moteurs de recherche si on veut avoir un référencement de qualité, notamment des mises à jour de Google qui sont nombreuses ! Certaines ont même littéralement ébranlé le web et la manière de faire du SEO pendant la dernière décennie. Exemple d’algorithme connu : Google panda Il se bat principalement contre les sites au contenu dupliqué ou bourré de fautes d’orthographe. D’autres critères doivent bien évidemment rentrer en compte mais nous ne les connaitrons jamais tous. Google garde ses secrets. Référencement
  • 59.
    L’indexation Dès que vousavez publié votre site, il est en ligne. Si vous tapez son URL dans la barre d’adresse, il est accessible. En revanche, vous ne pouvez pas encore le trouver via des requêtes Google parce qu’il n’est pas indexé. L’indexation, c’est encore le travail des robots. Si vous avez un fichier robots.txt et un sitemap, votre site devrait être indexé plus rapidement. Encore une fois, cette période est variable d’un site à l’autre. Référencement
  • 60.
    L’optimisation du contenu Lecontenu reste un élément central du référencement. Google étudie le comportement des internautes sur votre site. Il épie ses faits et gestes. S’ils quittent votre site ou article trop rapidement, Google vous référencera moins bien. Google n’aime pas les pages fourre-tout. Il faut créer une page par mot- clef travaillé pour plus d’efficacité. Référencement
  • 61.
    Sur Wordpress unplugin YOAST SEO Référencement - Analyse des contenus, recommandations - Personnalisation de l’affichage dans les résultats de recherche - Balises Open Graph… Il faut définir un mot-clé par page et des mots clés important pour l’ensemble du site. Définir un mot clé par page que nous allons inclure dans - L’url des pages - Les titres des pages (balise H1) - Les titres de la fenêtre (balise title) - Les textes alternatifs des images - La description des pages - Dans le premier paragraphe de la page Pensez à inclure également les mots clés important pour notre site.
  • 62.
    Redirection d’url Référencement Dans lecadre de la refonte d’un site avec des utils différents, les urls de toutes les pages peuvent changer. Afin de ne pas perdre son référencement, il faut indiquer aux moteurs de recherche le lien entre les anciennes adresse et les nouvelles. Exemple : Sur mon site http://www.tructruc.com, l’url de la page http://tructruc.com/spip.php?rubrique5 est maintenant http://www.tructruc.com/qui-sommes-nous Sur WordPress le plugin Redirection va nous permettre d’effectuer ces redirections. Dans notre exemple, il faudra indiquer comme page source /spip.php?rubrique5 comme page cible /qui-sommes-nous
  • 63.
    Perfomance web Référencement Que signifieoptimiser les images ? Les grosses images ralentissent vos pages Web. L’optimisation des images est le processus qui consiste à diminuer la taille du fichier, ce qui accélère le temps de chargement de la page. Choisir le bon format de fichier PNG – produit des images de meilleure qualité, mais aussi des fichiers de plus grande taille. Il a été créé comme un format d’image lossless (sans perte). A utiliser pour les images avec de la transparence. JPEG – Vous pouvez ajuster le niveau de qualité pour un bon équilibre entre la qualité et la taille du fichier. A utiliser pour les photos avec une compression moyenne. GIF – n’utilise que 256 couleurs. C’est le meilleur choix pour les images animées. En pratique, dans Photoshop On utilise toujours la fonction « enregistrer pour le web » . Pour des photos on utilise le format jpg compression moyenne entre 40 et 50. On peut aussi utiliser l’application ImageOptim gratuite pour nettoyer les meta-données des images (nom de l’appareil photo, géolocalisation, historique de modification etc..) et gagner encore du poids, parfois beaucoup. https://imageoptim.com/fr
  • 64.
    http -> https LeSSL qu’est-ce que c’est ? C’est un protocole de cryptage qui sécurise les données qui transitent entre le visiteur d’un site et le serveur ou celui-ci est hébergé. En clair si vous remplissez un formulaire de contact, les données que vous saisissez seront encodées et donc inexploitables pour le hacker qui arriverait a s’en saisir. L’adresse de vos pages commence alors par https au lieu de http. Et un icône avec un cadenas vert et la mention "Sécurisé" apparait dans la barre de saisie du navigateur. Sécurité
  • 65.
    Les attaques viralessont très courantes, et des failles de sécurité sont régulièrement découvertes dans Wordpress et autres CMS, et autres éléments constitutifs d’un site web. - Mettre à jour régulièrement son CMS, les thèmes, et les plugins. - Ne pas avoir d’administrateur qui s’appelle admin - Mettre des mots de passe avec plus de 10 caractères, des minuscules, des majuscules, des caractères accentués, des symboles. - Vérifier que votre hébergeur propose des backups, ne pas choisir le moins cher. - Attention aux thèmes gratuits et plugins, renseignez-vous, supprimer ceux que vous n’utilisez pas. - Toujours un compte administrateur par personne. Ne pas se passer les mots de passe. Sécurité
  • 66.
    Le mot depasse azerty est cassé en moins d’une seconde avec un simple logiciel gratuit sur un PC, le mot de passe Azety8!po$*uioPqg sera cassé en plusieurs milliers d’années. Pour apporter une sécurité supplémentaire certains plugins dont All In One WP Security ajoute des mesures qui permettent de compliquer le piratage de votre site, comme changer l’adresse de connexion à l’admin, (wp-admin), ou lutter contre les attaques de type force brute. Sécurité
  • 67.
  • 68.
    Ergonomie web Pourquoi s’intéresserà l’ergonomie ? Pour faire un site bien construit, plaisant à naviguer, où l’on trouve facilement ce que l’on cherche, qui se charge rapidement. Savoir pourquoi un site est efficace, comment remédier aux problèmes de compréhension de notre site par nos visiteurs. Savoir apporter un regard critique et argumenté sur une maquette, un site web existant. Il existe des règles à appliquer afin de tendre vers cet objectif. 4 règles Le concept de Gestalt La loi de Fitts La loi de Hick Le concept d’Affordance
  • 69.
    Le concept deGestalt ou psychologie de la forme C’est une théorie selon laquelle les processus de la perception et de la représentation mentale traitent spontanément les phénomènes comme des ensembles structurés (les formes) et non comme une simple addition ou juxtaposition d’éléments. Le tout est différent de la somme des parties. Une page web est un ensemble d’éléments, de formes imbriquées les unes dans les autres qui forment un tout. Ergonomie web
  • 70.
    Ergonomie web Le conceptde Gestalt ou psychologie de la forme
  • 71.
    Ergonomie web Le conceptde Gestalt ou psychologie de la forme La loi de proximité Le cerveau humain regroupe les éléments, 2 éléments proches se verront associés, on leur trouvera plus facilement des points communs que 2 éléments éloignés. Un paquet d’étoiles sans ordre. Ici c’est deux lignes composés d’étoiles, les étoiles passent au second plan devant la notion de ligne.
  • 72.
    Ergonomie web Le conceptde Gestalt ou psychologie de la forme La loi de proximité Cette déduction de notre cerveau se fait naturellement, c’est une logique de proximité, d’éloignement et d’ordre des éléments. C’est fondamentale pour la conception de pages web. Il faut rapprocher les éléments qui ont une relation forte et éloigner les autres. Exemple : Éléments de navigation éloignés les uns des autres..
  • 73.
  • 74.
    Ergonomie web Le conceptde Gestalt ou psychologie de la forme La loi de proximité Dans cet exemple les légendes des photos sont à égale distance des photos placées au-dessus et en-dessous. On ne comprend pas à quelle photo la légende est associée.
  • 75.
    Ergonomie web Le conceptde Gestalt ou psychologie de la forme La loi de proximité En rajoutant une marge sous le texte, la légende et la photo sont associés.
  • 76.
    Ergonomie web Le conceptde Gestalt ou psychologie de la forme La loi de similarité Les formes qui se ressemblent sont regroupés par notre cerveau (taille, forme couleur). Par la taille : petits carrés et grands carrés, on a donc tendances à leur chercher des similitudes.
  • 77.
    Ergonomie web Le conceptde Gestalt ou psychologie de la forme Gestalt Proximité des objets Similitudes de formes, de couleurs, de tailles = Association Éloignement des objets Différences de formes, de tailles et de couleurs = Dissociation
  • 78.
    Ergonomie web La loide Fitts Dans le domaine de l'Interaction Homme-Machine (IHM), la loi de Fitts permet de prédire le temps requis à un humain pour pointer une zone. Appliqué au web, cette loi permet de savoir en combien de temps la souris va atteindre un élément sur une page web. Cela permet d'optimiser les interfaces web. La loi stipule que le temps nécessaire pour atteindre un élément est proportionnel à la distance de l'élément et la taille de l'élément. Billetterie
  • 79.
    Ergonomie web La loide Fitts Plus la souris est éloignée d'un élément et plus le temps pour atteindre cet élément sera long. Plus l'élément de destination est gros et moins la souris nécessitera de temps pour l’atteindre. De ce fait, pour atteindre rapidement une zone de l'écran, il faut que celle-ci soit grande et proche de la souris. Le Fittsizing est le principe de compensation de la distance pour aller à un point par l’augmentation de sa taille; il permet un gain de temps non négligeable pour l’internaute. Des études montrent qu’un site de e-commerce qui augmente la taille des boutons « Ajouter au panier » trop petit, augmentera aussi ses ventes.
  • 80.
    Ergonomie web La loide Hick La loi de Hick décrit le temps qu'il faut à un utilisateur pour prendre une décision en fonction du nombre de choix à sa disposition. De mémoire un homme peut retenir entre 5 et 9 objets, en moyenne 7. Au delà, notre mémoire de travail, mémoire transitoire et instantanée nous joue des tours. Au delà de 7 grandes zones le messages risques d’être brouillé et mal compris. Dans les barres de navigations, on évitera de mettre plus de 7 items au grand maximum 9.
  • 81.
    Ergonomie web La loide Hick Exemple : un menu avec beaucoup trop d’éléments, difficile de se repérer.
  • 82.
    Ergonomie web Le concept d’affordance L'affordanceest la capacité d’un système ou d'un produit à suggérer sa propre utilisation. Une porte nous indique qu’on doit la pousser ou la tirer par la présence des gonds, d’une poignée.
  • 83.
    Important sur leweb de faire des liens qui ressemblent à des liens ou qui soit simplement différents du reste. Et si possible que cette différence soit omniprésente sur l’ensemble des pages. Par l’usage de la couleur du texte cliquable: d’un surlignage L’usage d’un pictogramme symbolisant la notion de lien Pour les images Je dois différencier les images cliquables des images non-cliquable par une distinction qui peu prendre la forme d’un contour de couleur, d’un pictogramme … Ergonomie web Le concept d’affordance
  • 84.
    La règle destrois clics, certains sites bien fait s’affranchissent de cette règle et sont parfaitement ergonomique et inversement. Incompatible avec un bon design, un bon designer web doit connaitre ces règles et savoir composer avec. Le scroll, les visiteurs d’un site savent scroller et le font quasiment automatiquement. Le scroll horizontal est déconseillé car peu utilisé, et parfois difficile à utiliser, pas de molette de souris horizontale. Lecture en F ou en Z, c’est faux, c’est la composition de la page qui va diriger l’œil du visiteur, la page est perçue dans sa globalité, dans sa composition. Ergonomie web Idées préconçues
  • 85.
    Ergonomie web Les textes Pourrendre un texte agréable à lire sur un écran il est préférable de : • Scinder l'article en plusieurs paragraphes • Rédiger des intertitres • Faire des sauts de lignes dans les paragraphes • Ne pas justifier le texte • Prévoir un interlignage suffisant • Utiliser des listes à puces (si c'est possible) • L'illustrer avec quelques images • Indenter les textes par rapport aux titres
  • 86.
    Ergonomie web Importance dela mise-en-page 33 laboratoires grenoblois, regroupés au sein d’un réseau, ont pour objectifs de : Comprendre les propriétés de la matière à l’échelle du milliardième de mètre, fabriquer des objets minuscules de quelques nanomètres, simuler leurs propriétés, découvrir de nouveaux phénomènes et développer leurs applications… Une méthode pour préparer le futur : développer un large socle de connaissances fondamentales et faire émerger de futures applications. Domaine d’application privilégiés comme la nanoélectronique qui prendra le relais de la microélectronique avec plus de miniaturisation, plus de puissance de calcul et plus de mémoire de stockage. Ces recherches contribueront à valoriser les compétences en recherche technologique et en industries de haut niveau du site grenoblois ; Le vivant : les Nanosciences permettront de créer de nouveaux outils de diagnostic et de nouvelles approches de soin ; mais aussi l’énergie et l’environnement.
  • 87.
  • 88.
    Ergonomie web Importance dela mise-en-page Utiliseravecmodérationlesdifférentespolicesdecaractère et autres enrichissements typographiques. Au delà de 3 polices de caractère, la lecture peut s'en trouver perturbée. La lecture d’un texte peu contrasté est fatigante et n’invite pas à sa lecture.
  • 90.
    Les médias sociaux -les wikis : espaces de publication collaboratifs où chaque membre peut rédiger et modifier du contenu. (Wikipédia.) - les blogs : espaces de publication où l’utilisateur publie des billets successifs, qui sont ouverts aux commentaires des lecteurs. - Les microblogs : ils permettent de publier des messages très courts (140 caractères au maximum pour Twitter qui en est l’exemple le plus renommé.) - Les réseaux sociaux : ils visent à reproduire en ligne le réseau d’interactions sociales entre des individus ou entités sociales. Facebook, le plus connu en France. - Les plateformes de partage de contenu : chaque utilisateur peut créer un compte et publier un certain type de contenus – vidéos sur Youtube, photographies sur Instagram ou Flickr, Soundcloud pour l’audio pour les plus connus. - Les forums : espaces de discussion libre où l’on ajoute des messages dans le fil d’une conversation.
  • 91.
    Les médias sociaux La présence sur les médias sociaux. Il est aujourd’hui incontournable pour une organisa5on d’être présents sur les médias sociaux, pour une ques5on de visibilité. Ne pas être présent sur les réseaux laisse le champ libre à des personnes étrangères à l’organisa5on pour créer des pages non-officiels, proposant une diffusion non maîtrisée et non souhaitée. Les médias sociaux peuvent être un élément d’une stratégie marke5ng, en complément d’un site Internet, de campagnes d’affichages, d’encarts presse, de créa5on de dépliant, flyers, plaqueIes, brochures, etc… Community manager Animateur de communauté ou CM, l'abrégé de community manager, est un mé5er qui consiste à animer et à fédérer des communautés sur Internet pour le compte d'une société, d'une marque, d’une célébrité ou d’une ins5tu5on. Le CM publie des contenus sur les réseaux sociaux et interagis avec les abonnés aux réac5ons. L'appella5on community manager est intégrée au Larousse 2016.
  • 92.
  • 93.
    Les médias sociaux Utilisateursquotidiens
 1,47 milliard de membres dans le monde 
 22 millions d’utilisateurs en France CHIFFRES CLÉS 2,27 milliards de membres dans le monde 
 33 millions d’utilisateurs en France
  • 94.
    Les médias sociaux LEPROFIL PERSO LA PAGE PRO Nature est destiné à un usage individuel et non commercial ou promotionnel. permet aux entreprises, aux organisations et aux marques de bâtir une communauté Web dans laquelle il ou elle pourra interagir avec les utilisateurs. Qui représente un particulier et doit être associé à votre nom. Vous devez être un représentant officiel de la personne ou de l’entité. Publique Vous décidez le paramètre publique ou privé de chacune de vos publications. 100% Publique. Tout le monde peut voir le contenu de votre Page. Y compris ceux qui n’ont pas de compte Facebook. Relations Les relations du Profil personnel sont des ami(e)s. La Page n’a pas d’ami. Les relations des Pages Facebook sont des J’AIME. Avec qui Toutes les demandes d’amitiés doivent être acceptées ou ignorées. Personne ne peut devenir votre ami sans votre consentement. Toute personne qui a un compte Facebook peut cliquer J’aime sur votre Page. Toutefois, vous pouvez bloquer des personnes sur votre Page. Applications On peut lier certaines applications (Twitter ou Instagram) à notre Profil Personnel mais on ne peut pas créer des applications pour notre Profil. Possibilité d’ajouter et de créer des applications pour sa Page. Limites Un Compte personnel peut avoir un maximum de 5,000 amis; s’abonner à 5,000 personnes et avoir un nombre illimité d’abonnés. Il n’y a aucune limite sur le nombre de J’aime sur votre Page. Plusieurs Pages ont des millions de j’aime.
  • 95.
    Les médias sociaux Urlsutiles Transformer un profil en page
 https://www.facebook.com/pages/create/migrate/ Fusionner plusieurs pages : 
 https://www.facebook.com/help/249601088403018 Vérifier l’affichage des éléments récupérés par Facebook, lors du partage d’une url de votre site, le bon titre, la bonne description et la bonne image, et surtout re-générer le cache mémoire de Facebook après modifications de ma page.
 https://developers.facebook.com/tools/debug La taille des images à produire pour Facebook et les autres réseaux sociaux
 https://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/
  • 96.
    Interactions site/réseaux Réseaux sociaux BaliseOpen Graph Maitriser les éléments affichés sur les réseaux sociaux quand une url de notre site est publiée. Yoast SEO nous permet de contrôler ces éléments et de les différencier entre Facebook et twitter. Une url permet de vider le cache Facebook quand on fait des modifications sur une page : https://developers.facebook.com/tools/debug sur twitter elle est ici https://cards-dev.twitter.com/validator
  • 97.
    Les médias sociaux L’EDGERANK Sans « j’aime » ou commentaires, vos fans ne verront pas vos pages. L’Edge Rank, c’est la formule qui régit la probabilité que vos publications soient « vues » dans le flux d’actualité de vos fans. Les chances qu’un de vos fans revienne souvent sur votre page sont infimes. Il est nécessaire de faire en sorte que vos publications soient visibles. Il est important d’inviter vos fans à interagir avec vos publications car c’est ainsi que l’Edge Rank de votre page pourra se développer. Plus vous avez d’affinités avec un utilisateur… plus cet utilisateur a déjà interagit avec vos contenus OU vous avec lui...plus votre contenu a de poids en termes d’interactions et plus celui-ci a de chances d’être affiché dans le flux d’actualité de vos fans. Donc, si vous ne créez pas d’interactions avec vos utilisateurs, voici ce qui va se produire : • Un utilisateur devient fan de votre page... • Il voit vos publications dans son flux d’actualité... • Cela ne l’intéresse pas, ou il n’interagit pas... • Il ne voit plus vos publications dans son flux d’actualité. • Il oublie votre page et ne verra plus jamais vos publications... bien qu’il soit toujours « fan ».
  • 98.
  • 99.
    Les médias sociaux Lesdifférents formats de publications sur Facebook Vidéos La vidéo et plus particulièrement la vidéo live est le format qui génère le plus d’engagement.
 C’est un moyen de captiver votre audience facilement, une publication avec une vidéo aura un meilleur Edge Rank. Une vidéo native Facebook aura un meilleur engagement qu’un lien vers Youtube.
  • 100.
  • 101.
    Les médias sociaux Twitter 317millions d’utilisateurs actifs UNE PLATEFORME DE MICRO-BLOGGING où l’on partage du contenu comme sur un blog mais dans un maximum de 140 caractères, toujours public. On peut aussi repartager les publications des autres. UN RÉSEAU SOCIAL où l’on se fait un réseau d’abonnés et où on prend part à des discussions privée ou publiques UN LIEU DE RENCONTRE où on rencontre des gens et où on bâtit des relations sans niveau de hiérarchie et d’interagir avec des personnalités célèbres ou politiques particulièrement accessibles. Possibilité de sponsoriser un tweet. Tweeter est trés consulté depuis des applications dashboard comme Tweetdeck
  • 102.
    Les médias sociaux Instagram Orientéphoto, image, vidéo on donne des effets vintage aux photos. Possibilité de faire des stories, publications animées temporaires. Racheté par Facebook pour un milliard de dollars en 2012 Application dédiée pour le mobile, tout le monde peut tout voir, sauf si notre profil est privé on utilise des hashtags. Les photos sont postées depuis un smartphone. Impossible de poster depuis un PC. A partir d’un PC, il vous sera possible de vous connecter à votre compte Instagram pour visualiser les photos. Multicompte sur l’application mobile Impossible de mettre un lien dans un post Pour un usage pro, l’idéal est de proposer des photos de vos événements en cours, de proposer un hashtag dans sa description, et d’en profiter pour faire passer des visuels avec du texte, pour faire la promotions d’événements. Possibilité de promouvoir une publication.
  • 103.
    Les médias sociaux https://ifttt.com/ IFThis Then That (Si Ceci Alors Cela). IFTTT est un service web gratuit avec des options payantes, permettant de créer des chaînes d'instruction appelées applets. Une applet est déclenchée par des changements qui interviennent au sein de services web tels que WordPress, Gmail, Facebook, Instagram ou Pinterest. Par exemple une applet peut faire une publication sur Facebook, Twitter lors de la création d’un article sur un site Wordpress, envoyer un e-mail si l'utilisateur tweete avec un hashtag donné, ou encore sauvegarder les photos publiées sur Facebook dans un service de stockage comme Dropbox, ou bien s'envoyer un mail s'il pleut demain.
  • 104.
    Interactions site/réseaux Réseaux sociaux Liensvers nos réseaux sociaux L’interaction minimum est le simple lien vers nos pages de réseaux sociaux. Simple à mettre en place, il informe les visiteurs de notre site web, de notre présence sur les réseaux.
  • 105.
    Interactions site/réseaux Réseaux sociaux Boutonsde partage social Liens présents sur les pages de notre site qui invitent les visiteurs à partager l’adresse de notre page sur leurs réseaux sociaux. Les études réalisées sur l’efficacité de cet outils nous indique que personne ne clique sur ces boutons (ou presque). Les personnes qui souhaitent partager votre page utilisent : - le copier-coller de l’url de la page - l’option de partage présente sur les mobiles - plugin de navigateur qui offre cette option pour les pro du partage. Ces boutons ont une autre utilité : la preuve sociale. La preuve sociale c’est choisir entre 2 restaurants, celui qui est toujours bondé et celui qui est toujours vide. Le compteur de partage prend en compte le nombre de partage fait par tout les moyens et indiquera la popularité de la page. Ces boutons rappellerons à vos visiteurs qu’ils peuvent partager cette page sur les réseaux . Où mettre nos compteurs ? Le plus haut possible ou à gauche, pour la preuve sociale ; Et à la fin de l’article, pour inciter au partage. Pour info, ces boutons sont aussi des mouchards pour les réseaux sociaux.
  • 106.
    Interactions site/réseaux Réseaux sociaux Pluginssociaux Facebook Sur cette adresse https://developers.facebook.com/docs/plugins Facebook nous propose de créer des widgets pour notre site web : Boutons de partage, boite de commentaires, et Plugins page qui permet de créer une boite paramétrable qui s’intégrera sur notre site et affichera les amis du visiteur qui aiment la page Facebook associée au site, les publications, etc…. Sur twitter Idem sur https://publish.twitter.com/#
  • 107.
    RGPD Règlement général surla protection des données Le règlement no 2016/679, dit règlement général sur la protection des données (RGPD, ou encore GDPR, de l'anglais General Data Protection Regulation), est un règlement de l'Union européenne qui constitue le texte de référence en matière de protection des données à caractère personnel. Il renforce et unifie la protection des données pour les individus au sein de l'Union européenne. Ce règlement a été définitivement adopté par le Parlement européen le 14 avril 2016. Ses dispositions sont directement applicables dans l'ensemble des 28 États membres de l'Union européenne à compter du 25 mai 2018. Les principaux objectifs du RGPD sont d'accroître à la fois la protection des personnes concernées par un traitement de leurs données à caractère personnel et la responsabilisation des acteurs de ce traitement.
  • 108.
    Glossaire Donnée personnelle Une donnéepermettant d’identifier directement ou indirectement une personne physique Directe -> Nom Prénom, mail (quand il y a le nom), photo Indirecte -> n° de sécurité sociale, n°CB, adresse IP, plaque immatriculation véhicule… Donnée sensible La santé, orientation sexuelle, opinions politiques, religieuses, pays d’origine, etc Traitement Ce qui est visé par la réglementation, toute opération sur la donnée : stockage, organisation, collecte, revente, envoi de newsletter, statistiques de consultations. Qui est soumis aux obligations du RGDP ? Organismes privée ou publique à des fins professionnelles. Les sanctions Sanction administrative : jusqu’à 4 % du chiffre d’affaires annuel mondial de l’entreprise RGPD Règlement général sur la protection des données
  • 109.
    Qui est responsable? Responsable du traitement : il détermine les finalités, les objectifs du traitement. C’est le responsable de la com, le directeur de l’établissement… Sous-traitant : Celui qui traite la donnée pour le compte du responsable. Hébergeur, webmaster, agence de com, fournisseur de solutions emailing…. et leurs sous-traitants. Ils engagent leur responsabilité conjointement. RGPD Règlement général sur la protection des données
  • 110.
    La Cnil La Commissionnationale de l'informatique et des libertés de France est une autorité administrative. La CNIL est chargée de veiller à ce que l’informatique soit au service du citoyen et qu’elle ne porte atteinte ni à l’identité humaine, ni aux droits de l’homme, ni à la vie privée, ni aux libertés individuelles ou publiques. Elle donne des conseils aux internautes sur l’usage des réseaux sociaux, la maîtrise de ses données, comment réagir en cas de problèmes ….
 https://www.cnil.fr/fr/10-conseils-pour-rester-net-sur-le-web
 https://www.cnil.fr/fr/configurer Il n’y a plus de déclarations à la Cnil quand on traite des données personnelles. La Cnil peut faire des contrôles auprès des personnes ou organismes traitant des données personnelles. Les personnes controlées devront être en capacité de démontrer qu’ils ont respecté les obligations. En cas de violations de données privées une déclaration doit être faite à la Cnil, une violation cela peut-être le vol de son ordinateur ou être victime d’un piratage. Il faudra démontrer les mesures mises en place pour limiter la violation des données personnelles. Il faudra aussi informer la personne concernée par le vol de ces données. RGPD Règlement général sur la protection des données
  • 111.
    Que dit laloi ? La loi indique les traitements interdits, par principe le reste est autorisé. Le traitement des données sensibles est interdit, sauf personnes autorisées comme le personnel médical, dans certains cas les données sensibles peuvent être traités avec le consentement des personnes. Pour la prospection commerciale, envoyer de la pub par mail ne peut être fait qu’avec le consentement des prospects. Sauf dans le cas d’échanges commerciaux contractuels passés pour des produits ou services analogues. Les grands principes : • Collecter des données de façon loyale, licite. • Les objectifs de la collecte de cette donnée doivent être définis clairement à la personne concernée. • Ne collecter que les données nécessaires à cette finalité (pas besoin d’avoir des infos sensibles pour envoyer une newsletter). • Un traitement de données personnelles implique une durée limitée et doit être annoncée. Un fichier de prospect peut être conservé 3 ans. Au bout de 3 ans on doit redemander le consentement des personnes. • Les données récoltées avec des cookies, adresses IP ne peuvent pas être conservés plus de 13 mois. • Les données personnelles doivent être sécurisées, mettre en place les outils nécessaires pour préserver la confidentialité (perte, piratage, revente). RGPD Règlement général sur la protection des données
  • 112.
    Les personnes concernées Leresponsable de la données ou le sous-traitant doivent être en capacité de répondre aux droits des personnes concernées. Droit à l’information, pouvoir fournir à la personne concernée les données collectées. Droit à l‘accès, à la rectification, droit d’opposition ou effacement des données.(notamment à la prospection commerciale, comme se désinscrire d’une newsletter). Droit de faire transférer ses données à un autre prestataire. (Exporter une mailing-list, pour changer de service) RGPD Règlement général sur la protection des données
  • 113.
    Les obligations Privacy bydesign, le respect de la vie privée dès la conception. Le concept de “Privacy by Design” a pour objectif de garantir que la protection de la vie privée soit intégrée dans les nouvelles applications technologiques et commerciales dès leur conception. Privacy by default, principe de ne traiter que les données nécessaires à ce qu’on veut faire au regard de la finalité des traitements. C’est un principe de minimisation. Le registre de traitement, (obligatoire pour les organismes au delà de 250 salariés). Tableur dans lequel il est précisé : • les catégories de données : prospects, clients, salariés… • les traitements • nommer le délégué à la protection des DP. En droit européen, le Délégué à la protection des données (abrégé DPD, ou DPO, pour Data Protection Officer) est la personne chargée de la protection des données au sein d'une organisation. RGPD Règlement général sur la protection des données
  • 114.
    Bandeau des cookies Lesinternautes doivent être informés et donner leur consentement préalablement à l'insertion de traceurs. Ils doivent disposer d'une possibilité de choisir de ne pas être tracés lorsqu'ils visitent un site ou utilisent une application. Les éditeurs ont donc l'obligation de solliciter au préalable le consentement des utilisateurs. Ce consentement est valable 13 mois maximum. Exemple : l’utilisation de Google analytics sur son site, objets facebook… Une grande partie des entreprises ne respectent pas à 100% la loi sur cette question. Schématiquement, on exige 3 éléments : Expliquer aux internautes la finalité du dépôt : à quoi sert le cookie ? Mesures d'audience, publicités ciblées... ? Permettre aux internautes de s'opposer au dépôt : il est impossible pour les utilisateurs de "subir" et de ne pas pouvoir refuser le traitement de données. Obtenir l' "accord" des internautes : le consentement est présumé si l'utilisateur poursuit sa navigation. Les sites web ne réalisent en général pleinement que la première situation. En clair, le "bandeau cookie" informe seulement qu'un ou plusieurs cookies sont déposés, souvent de manière évasive. Et que l'on effectue ou pas une action, le cookie s'inscrit sur le terminal, sans consentement préalable donc. RGPD Règlement général sur la protection des données
  • 115.
    Dans wordpress Plugin deconsentement cookies, à personnaliser. RGPD Règlement général sur la protection des données La page Politique de confidentialité créée automatiquement qui est à compléter en fonction des options du site (Google analytics, newsletter, formulaire, commentaires, e-commerce….). Dans Réglages/confidentialité. Outils exporter les données, qui compile toutes les données conservées associées à un utilisateur et permet de les télécharger et de les supprimer. Cookies consent GDPR Cookie Consent GDPR Cookie Compliance
  • 116.
  • 117.
    ➜ Le nomde l’expéditeur 
 C’est le nom de l’organisme ou de la personne qui envoie le mail (les prénoms féminins ont plus d’impact), pas de descriptions, pas d’adresses e-mail en clair. ➜ L’objet de la newsletter
 L’objet doit être le titre ou la description courte du contenu de la newsletter. Entre 30 à et 50 caractères sont conseillés. Le marketing conseille des verbes d’action : Devenez, Prenez, Découvrez, Gagnez, Essayez. Evitez les objets du style « Newsletter de Machin », « Newsletter de Noël » ou « Newsletter n°12 », parlez plutôt de votre contenu. Attention à l’adresse utilisée pour l’expédition du mail qui sera probablement très vite spammée. Utilisez une adresse @le-nom-de-votre-site.com L’en-tête du mail
  • 118.
    « Une newslettersera lue en moins de 40s » Faites un contenu simple mais soigné, court, épuré en cohérence graphique avec le reste de vos outils de communication, qui se charge vite, évitez un trop grand nombre d’images. Un contenu personnalisé « Bonjour Giselle… » et rédigé aura plus d’impact. Adressez-vous à vos abonnés, ne faites pas des simples copier-collé du site web. Un accès facile à la désinscription renforce la confiance du lecteur. Proposez des jeux, des promotions, des infos en avant-première, des contenus exclusifs, utilisez des messages propres à votre newsletter. Vous pouvez mettre un lien vers l’inscription pour donner la possibilité d’inscrire quelqu’un, changer son adresse… Pensez à vos réseaux sociaux. Des titres courts, le corps du texte ne doit pas être inférieur à 13px. Les zones cliquables doivent faire au moins 44px par 44px. Préférez les boutons d’appel à l’action pour diriger vos lecteurs ou vous le souhaitez, plutôt que des liens dans du texte. Utilisez moins de 4 liens dans vos newsletters. Limitez les logos des partenaires et ne les rendez pas cliquables, vous augmenteriez vos chances d’être rangé dans le spam. Pour les images pensez au texte alternatif (la balise alt), les problèmes d’affichage des images sont plus fréquents que sur le web, un texte alternatif peut être utile. Pas d’animations, pas de vidéos, pas de formulaires. L’en-tête et le contenu
  • 119.
    Pensez à faireun planning des expéditions. Comme pour les réseaux sociaux, envoyez plutôt vos newsletters en fin de semaine ou à l’heure des repas. Comment éviter à sa newsletter d’être considéré comme du spam ?
 • Ne pas envoyer à des personnes qui ne se sont pas inscrites ou n’ont pas donné leur accord. 
 • Envoyez une à deux newsletters par mois maximum.
 • L’objet : pas en majuscule, pas de ! % / répétés plusieurs fois, pas de € ou $, pas de termes sur la gratuité, les régimes minceur ou le viagra…
 • Le corps : La newsletter ne doit pas être composée d’une grande image unique. Respectez un bon équilibre photo/texte, une taille de police ni trop petite ni trop grande. Un texte bien contrasté et lisible. Eviter le terme « Cliquez ici ». L’envoi
  • 120.
    Il existe desoutils que l’on peut installer sur son serveur comme PhpList ou WANewsletter, mais les hébergements web classiques ne sont pas fait pour gérer des envois de newsletter en volume. Ce sont les services en ligne payants qui seront les plus simples et les plus efficaces. Tous proposent une formule gratuite pour un nombre limité de destinataires. La formule gratuite la plus intéressante actuellement est proposée par Mailchimp (en anglais uniquement), la formule permet d’envoyer un maximum de 12 000 mails par mois à un maximum de 2000 abonnés. La formule payante la moins chère est proposée par Mailjet (en français). Pour 5,49€ h.t par mois, vous envoyez 30 000 e-mails par mois. Il existe de nombreux autres prestataires, les prix changent souvent et de nouveaux acteurs arrivent régulièrement. Attention, certains services illimités gratuits récupèrent vos adresses e-mails pour les revendre ou insèrent de la pub dans vos newsletters, ou offrent un service difficile à utiliser sans statistiques, ni éditeur de newsletter. Les outils