Upload
digital-infocom
View
415
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
ELISABETH DE PABLO 1
COMMUNICATION NUMÉRIQUE 1 :
CONCEPTION DE SITES WEB CIM4A13C
Septembre 2014
ELISABETH DE PABLO 2
WEB PUBLISHING
- créer, éditer, publier, diffuser du contenu
- animer sur le web un produit [de communication]
- publier en ligne, publication en ligne (online publishing)
ELISABETH DE PABLO 3
WEB PUBLISHING
>> requiert plusieurs types de compétences (multidisciplinaire)
>> nécessite l’utilisation de différentes techniques et technologies
ELISABETH DE PABLO 4
WEB PUBLISHING
Pour cela :
>> un esprit créatif>> un logiciel>> une connexion internet>> un serveur
ELISABETH DE PABLO 5
GESTION D’UN PROJET WEB
L’ensemble du processus est regroupé autour d’un chef de projet
web
(web manager)
ELISABETH DE PABLO 6
GESTION D’UN PROJET WEB
Travailler autour et sur un produit web pour une entreprise (sté, association, institution, etc.)
Prendre en charge toutes les dimensions de la conception, et du suivi du produit
ELISABETH DE PABLO 7
WEB MANAGER
Web Manager=
Gestion du projet web
Réalisation technique du site, suivi, mise à jour,
etc. (web mastering)
Gestion de la communauté ou
des réseaux sociaux (community
management)
Curation, veille d’information
autour et sur le projet (digital
curation)
Préparation et rédaction du contenu d’un site (content management)
Gestion de l’identité numérique du projet, produit, marque, …
(digital identity)
ELISABETH DE PABLO 8
WEB MANAGER
BRAINSTORMING de départ >> définir un plan d’action
Un produit web pourquoi ? Pour qui ?
>> Déterminer les objectifs principaux, secondaires
>>Déterminer de la cible
ELISABETH DE PABLO 9
WEB MANAGER
>> Gestion de l’identité (l’image)
Positionnement par rapport à l’existant ?
>> Moyens techniques à disposition
Mutualisation des compétences en interne ?
>> Moyens financiers à disposition
ELISABETH DE PABLO 10
WEB MANAGER
BRIEF Note de cadrage
Le brief est un document - plus ou moins long - dont l’objectif est de d’exposer clairement les objectifs et la stratégie ainsi que les contraintes – budget, technique - du communiquant,
Le brief est l’élément majeur nécessaire pour débuter toute opération de communication.
ELISABETH DE PABLO 11
WEB MANAGER
BRIEF Note de cadrage
http://www.choblab.com/gestion-projets/rediger-un-brief-creatif-de-qualite-1946.html
http://fr.slideshare.net/RougeInteractif/le-brief
http://www.manager-go.com/marketing/brief-communication.htm
ELISABETH DE PABLO 12
WEB MANAGER
AUDIT – BENCHMARKING
Pour définir les objectifs en profondeur, il faut connaître l’existant
>> Etude comparative
>> Processus d’analyse de la concurrence
ELISABETH DE PABLO 13
WEB MANAGER
AUDIT – BENCHMARKING
Observer, comparer et analyser la concurrence
>> Etablir d’un plan de veille
Etablir des critères d’analyse (en fonction des objectifs définis)
>> Proposer une grille récapitulative simple de l’analyse
ELISABETH DE PABLO 14
WEB MANAGER
AUDIT – BENCHMARKING
Noter – mettre en exergue - les éléments pertinents pour le
développement de son projet
ELISABETH DE PABLO 15
WEB MANAGER
AUDIT – BENCHMARKING
http://www.manager-go.com/marketing/concurrence.htm
http://www.my-business-plan.fr/etude-concurrentielle
http://www.journaldunet.com/ebusiness/le-net/reussir-son-business-plan/etude-concurrence-business-model-business-plan.shtml
ELISABETH DE PABLO 16
WEB MANAGER
AUDIT – BENCHMARKING
Effectuer une enquête
= Etude d’opportunité permettant de montrer l’intérêt et les attentes des
utilisateurs
ELISABETH DE PABLO 17
WEB MANAGER
AUDIT – BENCHMARKING
http://www.blog-gestion-de-projet.com/comment-faire-une-etude-d-opportunite-pour-votre-projet/
http://www.techniques-ingenieur.fr/fiche-pratique/genie-industriel-th6/organiser-et-animer-un-projet-dt58/preparer-votre-projet-etudes-d-opportunite-et-de-faisabilite-1147/
http://www.surveystore.info/NSarticle/enquete-par-questionnaire.asp
ELISABETH DE PABLO 18
WEB MANAGER
CAHIER des CHARGES
Document contractuel qui permet de définir avec le plus de précisions possibles ce que l’on attend du prestataire.
Le cahier des charges est le document le plus important dans la mise en route et le développement d’une action de communication
ELISABETH DE PABLO 19
WEB MANAGER
CAHIER des CHARGES
>> Synthèse de l’ensemble des informations recueillies (brainstorming, benchmarking)
>> Etablissement du cadre (contexte, cible,…)
ELISABETH DE PABLO 20
WEB MANAGER
CAHIER des CHARGES
Etablissement fonctionnelle :
>>squelette ou plan du site détaillé, ergonomie, chartes éditoriales et graphique, maintenance, …
ELISABETH DE PABLO 21
WEB MANAGER
CAHIER des CHARGES
>> Etablissement du budget
>>Ressources humaines
>> Questions juridiques
>> Planning
ELISABETH DE PABLO 22
WEB MANAGER
CAHIER des CHARGES
http://www.commentcamarche.net/contents/978-cahier-des-charges
http://fr.openclassrooms.com/informatique/cours/rediger-correctement-un-cahier-des-charges
http://gestiondeprojet.pm/cahier-des-charges/
ELISABETH DE PABLO 23
WEB MANAGER
LES PLUS, selon les besoins et les moyens, en fonction du cahier des charges
>> Faire appel à des ressources humaines, techniques, … extérieures
>> Faire appel à des ressources internes
>> Définir un appel d’offre
>> Mettre en place un comité de pilotage
ELISABETH DE PABLO 24
WEB MASTER
Personne qui conçoit un site, qui est en charge de celui-ci (maintenance)
Activité multidisciplinaire qui va de la concrétisation d’un projet à sa gestion au quotidien.
ELISABETH DE PABLO 25
WEB MASTERING
Ensemble des tâches nécessaires à la gestion d’un site.
Il s’agit d’être le plus clair possible tout de suite dans la définition de la structure
ELISABETH DE PABLO 26
WEB MASTERING
Etablissement de l’arborescence / du squelette = Structurer l’information
>> Quelles mises en forme ?
>> Quels types de rubricages ?
>> Quel système de navigation ? …
ELISABETH DE PABLO 27
WEB MASTERING
Page d’accueil vs pages internes
>> Quels niveaux de profondeur ?
>> Mises en forme ?
Établissement des types de contenus
>> texte/image ?
>> dynamique ?
ELISABETH DE PABLO 28
WEB MASTERING
Tous ces éléments sont indispensables pour se déplacer dans le site,
trouver les informations recherchées facilement et donc l’utiliser aisément.
ELISABETH DE PABLO 29
WEB MASTERING
ELEMENTS FONCTIONNELS Schématiser le système de navigation
Header
Le logo (identité visuelle pour la reconnaissance immédiate)Liens ou icônes, raccourcis vers des contenus informatifs/invariants (contact, aide, …)Barres de menu / Barres de sous-menu
ELISABETH DE PABLO 30
WEB MASTERING
HEADER - exemples
ELISABETH DE PABLO 31
WEB MASTERING
ELEMENTS FONCTIONNELSTechniques éditoriales
Corps
Etablissement d’une charte éditoriale Etablissement des niveaux de lecture Hiérarchisation de l’information : les titres, intertitres, paragraphes, visuels, liens, références, … L’écriture web / techniques de rédaction
ELISABETH DE PABLO 32
WEB MASTERING
Corps
exemple
ELISABETH DE PABLO 33
WEB MASTERING
ELEMENTS FONCTIONNELS Schématiser le système de navigation
Footer
Retrouvez des éléments de navigation Rappel informatifs/invariants (contact, plan du site, mentions légales, …)
ELISABETH DE PABLO 34
WEB MASTERING
Footer - exemples
ELISABETH DE PABLO 35
WEB MASTERING
REPRESENTATION GRAPHIQUE
http://www.lehtml.com/webdesign/structure.htm
http://ajblog.fr/webdesign/213-etude-de-cas-lamigraineorg-la-communaute-des-migraineux.html
ELISABETH DE PABLO 36
WEB MASTERING
ELEMENTS INVARIANTSCompréhension rapide
Informations indispensables voire obligatoires
A propos / Plan du site / Charte / Mentions légales / Contacts / Recherche / FAQ / Accessibilité / Newsletter
ELISABETH DE PABLO 37
WEB MASTERING
ELEMENTS INVARIANTSAccessibilité
« L’accès au Web par tous, indépendamment de toute invalidité »
http://www.w3qc.org/ressources/traductions/introduction-accessibilite-web
/
http://www.pompage.net/traduction/evaluer-accessibilite-site-1
ELISABETH DE PABLO 38
WEB MASTERING
ELEMENTS INVARIANTSMentions légales
Toujours vérifier les droits des contenus diffusés
>> Les droits d’auteurs
Protéger son site, son contenu (dépôt/creative commons)
ELISABETH DE PABLO 39
WEB MASTERING
ELEMENTS INVARIANTSMentions légales
http://www.journaldunet.com/ebusiness/le-net/mentions-legales-site.shtml
http://www.commentcamarche.net/faq/35481-site-web-pro-mentions-legales-et-formulaire-de-contact
ELISABETH DE PABLO 40
WEB MASTERING & CONTENT MANAGEMENT
GESTION du CONTENU
Compréhension rapide
Etablissement de la charte éditoriale en relation avec l’arborescence/la structure du site
ELISABETH DE PABLO 41
WEB MASTERING & CONTENT MANAGEMENT
CHARTE EDITORIALE
Consignes autour de la rédactionPrendre en compte le référencement (mots-clefs, titre,…)Consignes autour de l’organisation du site : en termes de noms de fichiers, procédures, …Etablir les droits internes et externes
ELISABETH DE PABLO 42
WEB MASTERING & CONTENT MANAGEMENT
GESTION du CONTENU
Au niveau de la rédaction, établir des règles (phrases courtes, précises, …) Etablir les différentes niveaux de lecturePrendre en compte le rapport texte/image, techniques rédactionnelles, les liens internes/externes
ELISABETH DE PABLO 43
WEB MASTERING & CONTENT MANAGEMENT
GESTION du CONTENU
http://www.180-360.net/technique-barbara-minto
http://www.dithyrambe.fr/pdf/Techniques%20redactionnelles%20en%208%20points%20cles.pdf
ELISABETH DE PABLO 44
WEB MASTERING & CONTENT MANAGEMENT
GESTION du CONTENU
http://trinity-advise.com/eye-tracking-ergonomie-web-explications-oculometrie-e-marketing
/
ELISABETH DE PABLO 45
WEB MASTERING & WEB DESIGNER
IDENTITE du SITEles aspects visuels
Compréhension rapide
Etablissement de la charte graphique en relation avec l’arborescence/la structure du site
ELISABETH DE PABLO 46
WEB MASTERING & WEB DESIGNER
CHARTE GRAPHIQUE
Choix typographiques (police et taille des caractères) = établir des règles CSS
Règles de couleurs (la connotation)
Choix des éléments multimédias = photos, dessins, symboles iconiques, …
ELISABETH DE PABLO 47
WEB MASTERING & WEB DESIGNER
CHARTE GRAPHIQUE
Etablir une maquette = grille de mise en page
http://www.r-u-experienced.net/2008/12/la-grille-de-mise-en-page.html
http://paris.blog.lemonde.fr/2008/12/27/grilles-de-mise-en-page-typographie-web-et-print/
ELISABETH DE PABLO 48
WEB MASTERING & WEB DESIGNER
CHARTE GRAPHIQUE - TYPOGRAPHIE
Bien souvent le CCS est déjà enregistré dans le modèle du site CMS (ce qu’il va se passer pour vous)
TYPOGRAPHIE = IDENTITE
ELISABETH DE PABLO 49
WEB MASTERING & WEB DESIGNER
CHARTE GRAPHIQUE - TYPOGRAPHIE
Permet de créer un style visuel, d’établir des protocoles (niveaux de lecture), créer un CSS (feuille de style personnalisée)
ELISABETH DE PABLO 50
WEB MASTERING & WEB DESIGNER
CHARTE GRAPHIQUE - COULEURS
Influent sur les comportements, dégagent une ambiance…
COULEUR = IDENTITE
ELISABETH DE PABLO 51
WEB MASTERING & WEB DESIGNER
CHARTE GRAPHIQUE - COULEURS
Normalement dans le CSS de votre modèle CMS.
Il va donc falloir en jouer au niveau des éléments des contenus
ELISABETH DE PABLO 52
WEB MASTERING & WEB DESIGNER
CHARTE GRAPHIQUE - MULTIMEDIA
Vidéo, cartes interactives (google map), diaporama, podcasts, toutes intégrations d’éléments extérieurs.
Déterminer l’impact, le type de réalisation, l’apparition, … l’utilisation des éléments multimédias
ELISABETH DE PABLO 53
WEB MASTERING & WEB DESIGNER
IDENTITE du SITE
http://www.blogduwebdesign.com/
http://www.pinterest.com/awwwardscom/web-design-inspiration-ui-ux/
http://www.pinterest.com/misz000/web-design/
ELISABETH DE PABLO 54
COMMUNITY MANAGEMENT
GESTION DES RESEAUX SOCIAUXun aspect incontournable
Quels réseaux sociaux pour quels usages ? Comment les choisir ? Quels sont les plus ? Que leur demander ?
>> Mettre en place une stratégie >> Créer, suivre et animer les réseaux choisis
ELISABETH DE PABLO 55
DIGITAL CURATION
CURATION – VEILLE D’INFORMATION
Qu’est-ce qu’une veille d’information et comment la pratiquer ?
>> Différence entre veille d’information et curation d’information
>> Liens entre réseaux sociaux et gestion de l’identité numérique
ELISABETH DE PABLO 56
DIGITAL CURATION
CURATION – VEILLE D’INFORMATION
Choisir ses modes de veille ?
>> Mettre en place une stratégie de veille
>> Analyser et utiliser la veille
ELISABETH DE PABLO 57
DIGITAL IDENTITY
E-REPUTATIONGestion de l’identité numérique
Qu’est-ce qu’une identité numérique ?
En quoi est-ce important ?
Comment suivre et gérer sa réputation sur internet ?