Conception de sites wbe (1)

ELISABETH DE PABLO 1

COMMUNICATION NUMÉRIQUE 1 :

CONCEPTION DE SITES WEB CIM4A13C

Septembre 2014

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)

WEB PUBLISHING

>> requiert plusieurs types de compétences (multidisciplinaire)

>> nécessite l’utilisation de différentes techniques et technologies

WEB PUBLISHING

Pour cela :

>> un esprit créatif>> un logiciel>> une connexion internet>> un serveur

GESTION D’UN PROJET WEB

L’ensemble du processus est regroupé autour d’un chef de projet

(web manager)

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

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)

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

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

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.

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

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

WEB MANAGER

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

WEB MANAGER

Noter – mettre en exergue - les éléments pertinents pour le

développement de son projet

WEB MANAGER

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

WEB MANAGER

Effectuer une enquête

= Etude d’opportunité permettant de montrer l’intérêt et les attentes des

utilisateurs

WEB MANAGER

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

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

WEB MANAGER

CAHIER des CHARGES

>> Synthèse de l’ensemble des informations recueillies (brainstorming, benchmarking)

>> Etablissement du cadre (contexte, cible,…)

WEB MANAGER

CAHIER des CHARGES

Etablissement fonctionnelle :

>>squelette ou plan du site détaillé, ergonomie, chartes éditoriales et graphique, maintenance, …

WEB MANAGER

CAHIER des CHARGES

>> Etablissement du budget

>>Ressources humaines

>> Questions juridiques

>> Planning

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/

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

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.

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

WEB MASTERING

Etablissement de l’arborescence / du squelette = Structurer l’information

>> Quelles mises en forme ?

>> Quels types de rubricages ?

>> Quel système de navigation ? …

WEB MASTERING

Page d’accueil vs pages internes

>> Quels niveaux de profondeur ?

>> Mises en forme ?

Établissement des types de contenus

>> texte/image ?

>> dynamique ?

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.

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

WEB MASTERING

HEADER - exemples

WEB MASTERING

ELEMENTS FONCTIONNELSTechniques éditoriales

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

WEB MASTERING

exemple

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, …)

WEB MASTERING

Footer - exemples

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

WEB MASTERING

ELEMENTS INVARIANTSCompréhension rapide

Informations indispensables voire obligatoires

A propos / Plan du site / Charte / Mentions légales / Contacts / Recherche / FAQ / Accessibilité / Newsletter

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

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)

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

WEB MASTERING & CONTENT MANAGEMENT

GESTION du CONTENU

Compréhension rapide

Etablissement de la charte éditoriale en relation avec l’arborescence/la structure du site

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

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

GESTION du CONTENU

http://www.180-360.net/technique-barbara-minto

http://www.dithyrambe.fr/pdf/Techniques%20redactionnelles%20en%208%20points%20cles.pdf

GESTION du CONTENU

http://trinity-advise.com/eye-tracking-ergonomie-web-explications-oculometrie-e-marketing

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

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, …

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/

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

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)

CHARTE GRAPHIQUE - COULEURS

Influent sur les comportements, dégagent une ambiance…

COULEUR = IDENTITE

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

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

IDENTITE du SITE

http://www.blogduwebdesign.com/

http://www.pinterest.com/awwwardscom/web-design-inspiration-ui-ux/

http://www.pinterest.com/misz000/web-design/

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

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

DIGITAL CURATION

CURATION – VEILLE D’INFORMATION

Choisir ses modes de veille ?

>> Mettre en place une stratégie de veille

>> Analyser et utiliser la veille

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 ?

Conception de sites wbe (1)

Education

CONCEPTION ET INDUSTRIALISATION EN ...eduscol.education.fr/sti/sites/eduscol.education.fr.sti/...Session 2007 BREVET DE TECHNICIEN SUPERIEUR CONCEPTION ET INDUSTRIALISATION EN MICROTECHNIQUES

Leather Accessory Source WBE'13 Catalog

Conception de sites web

S BUILD 190703 Video and Audio Contract Digital Resources...2019/10/01 · D/M/WBE Certification OPTIONAL WBE CERTIFICATE EXPIRES 5-8-2020.pdf D/M/WBE Certification documentation

MBE/WBE Vendor List Construction Only

All running smoothly Tire changers and wheel balancers from Bosch€¦ · f WBE 4430 / WBE 4435 – All-rounders with loads of comfort f WBE 4230 / WBE 4235 – Digital wheel balancer

Retour table des matières - WBE

Betriebsanleitung WBE 4140 - OTC Tools

La conception de la topologie de sites - Micro Application · L’ expression "topologie des sites" désigne la représentation logique du réseau physique. La conception d’une

WBE Sep2015 Feb2016 Kilburn

WBE Canada - Breakfast with Brands

Conception de Sites Web dynamiques Cours 3 Patrick Reuter

WBE 4xxx - OTC Tools

CONCEPTION ET INDUSTRIALISATION EN ...eduscol.education.fr/sti/sites/eduscol.education.fr.sti/...SESSION 2008 BREVET DE TECHNICIEN SUPERIEUR CONCEPTION ET INDUSTRIALISATION EN MICROTECHNIQUES

Guide pour la conception des sites de dépotage

Conception, réalisation et développement de sites web à l ... · Rapport de stage Conception, Realisation et Developpement de Sites Web a 1'Ecole Normale Superieure de Lyon Catherine

Conception, réalisation et développement de sites web à l'École

Conception des sites Web - marocetude.com

wbe©vPbx Bk‡Znvi 2018manifesto2018.albd.org/files/manifesto-2018.pdf · wbe©vPbx Bk‡Znvi 2018 GKv`k RvZxq msm` wbe©vPb-2018 evsjv‡`k AvIqvgx jx‡Mi wbe©vPbx Bk‡Znvi mg„w×i

M/WBE No-Change Affidavit