Éditer PageHeader
Toggle navigation
Animacoop
Accueil
Etape 1
1 : Premiers pas dans la formation
2 : Démarrer un réseau coopératif
Etape 2
|- 1er regroupement
Etape 3
5 : Mettre en place une veille numérique efficace
6 : Quels outils pour quoi faire
7 : Les licences libres et la propriété intellectuelle
8 : Préparer et animer une réunion, prendre des décisions collectivement
|- 2eme regroupement
11 : Dynamiser ses événements par la participation et le numérique
12 : Ecrire collectivement
Etape 4
13 : Ã?crire et communiquer sur le web
14 : Facilitateurs et freins de projets coopératifs
|- 3eme regroupement
Le trombi !
Le forum pour nos questions
Nos notes et nos pépites
PoPs
Rechercher
×
Se Connecter
Aide
Gestion du site
Tableau de bord
Base de données
Activer JavaScript pour joindre des fichiers.
Joindre / Insérer un fichier
Annuler
Échoué
×
Télécharger le fichier
Texte du lien de téléchargement
Alignement de l'image
Gauche
Centre
Droite
Taille de l'image
Miniature (140x97)
Moyenne (300x209)
Large (780x544)
Taille originale
Texte de la vignette
Paramètres avancés
Lien associé
Effets graphiques
Bord blanc
Ombre portée
Agrandissement au survol
Texte de remplacement
""<section class="bg-primary" id="about"><div class="container-fluid"><div class="row"><div class="col-lg-12 titremodule">""Module 13 - Ã?crire et communiquer sur le web"" </div></div></div></section><div class="container">"" {{grid}} {{col size="3"}} ""<div class="lateralpagerubrique"> <span class="glyphicon glyphiconModule glyphicon-align-justify"></span>""Cours méthodologique ""</div>"" ""<div class="panel panel-default lateral">""[[ModulE13 << Retour à la page d'entrée du module]] ""</div>"" {{TOC}} {{end elem="col"}} {{col size="7"}} ======Ecrire pour le web - focus sur la forme====== Le support numérique révolutionne nos manières d'écrire ; story telling, réaction à chaud, écrit journalistique, tweet, buzz... autant de formes d'écritures spécifiques au développement des usages numériques. Mais sur le web, la forme du discours est tout aussi importante que le fond. Ainsi par exemple, le design de votre site est une clé déterminante dans le rapport de confiance et de professionnalisme que vous aurez avec vos interlocuteurs. Une mise en page mauvaise, une mauvaise impression, trop de textes... rebuteront vos internautes. Voici quelques règles pour vous accompagner dans la mise en forme de vos écrits sur le web. =====La charte graphique : première étape de conception===== ====De l'intérêt d'une charte graphique==== ""<div class="definition">"" **La charte graphique** est l'ensemble des règles fondamentales d'utilisation des signes graphiques. Elle définit l'identité visuelle d'une organisation, d'un projet, d'une entreprise. ""</div>"" L'intérêt premier d'une charte graphique est de conserver une cohérence entre les contenus. La réalisation d'une charte graphique apporte ainsi deux avantages certains : - L'identité graphique reste intacte à travers les différents supports (site Web, carte de visite, dossier de presse, ...) - Le récepteur identifie facilement l'émetteur et se repère dans ses différentes réalisations Transposée au web, la charte graphique permet de rendre votre site internet ergonomique, facile et agréable à consulter. ====Les règles d'une charte graphique==== Comme pour une charte graphique papier, il ne s'agit pas d'appliquer les codes dans leur intégralité mais de définir quelques règles à respecter. Elle s'applique notamment à définir : - le logotype, - les polices de caractères, - les jeux de couleurs, - l'utilisation des éléments graphiques, - les principes guidant le choix des images et des illustrations. ====La matrice graphique sur internet==== En complément des éléments ci-dessus, l'identité graphique sur internet doit prendre en considération : - la sémantique des couleurs, - le vécu collectif, les références historiques, - l'imaginaire populaire. Il y a donc plusieurs éléments à définir pour créer une matrice graphique : - Le gabarit, également appelé //template// ou //layout// (conseil : 960px de largeur). - La combinaison des couleurs : l'important est de vous assurer que votre choix colorimétrique est lisible. Les couleurs doivent être au service de la lisibilité et de la convivialité. Un [[https://www.w3schools.com/colors/colors_converter.asp convertisseur de couleurs]] peut aussi s'avérer utile pour générer les codes hexadécimaux de couleurs (adaptés aux pages Web). - Le bandeau, ou //header//, avec le logo et le nom de la structure, l'objet du site. - Les menus rapides : entre 3 et 5. Pour les rendre davantage visibles, ils peuvent être placés dans le bandeau, si le fond le permet, ou en haut à droite de votre page. - Les menus : les menus communs se placent généralement en haut. Il faut veiller à la clarté des mots et à l'espacement entre les rubriques. Il est conseillé de ne proposer qu'un sous-menu pour chaque rubrique. - La page contenu : il est important de faire des pages concises, d'où l'importance de définir comment se présentent le contenu, les polices, les titres, les images et les liens. - Le pied de page, ou //footer// avec les mentions légales, les technologies utilisées. En plus de cela, la charte graphique Web s'attache à définir la position des différents éléments et à valider les fondations de votre site : accessibilité, lisibilité et ergonomie. =====Accessibilité, lisibilité et ergonomie : les 3 fondamentaux d'un site web===== **L'accessibilité** englobe plusieurs notions : choix du nom de domaine, compatibilité des navigateurs, choix des applications, standards W3C... Au départ de votre projet se posent 3 questions qui vont construire les bases de votre site : - Ã? quoi sert le site (objectifs, cibles, ...) ? - Quels sont les contenus proposés ? - Comment faire en sorte qu'ils soient accessibles à tous ? **La lisibilité** découle souvent des choix faits lors de l'établissement de la charte graphique. Il convient donc d'être toujours très vigilant à cette notion. Posez-vous la question de la lisibilité en fonction de : - votre nom, votre logo et l'objet de votre site, - la taille du site, - la taille des caractères de police et la largeur des paragraphes, - le choix des couleurs : fond et textes... Enfin, **l'ergonomie** correspond à la facilité d'utilisation de votre site. Il convient de déterminer au préalable : - l'arborescence : logique, vulgarisée, - le menu : repérable, mot clairs et concis, - le mode de navigation : souple et harmonisé. L'internaute doit trouver en 3 clics l'information recherchée. La charte graphique internet correspond donc à l'ensemble des règles (accessibilité, lisibilité, ergonomie) auxquelles se rajoutent l'identité graphique. ""<div class="conseil">"" **Mise en page** : une page d'accueil trop agressive et chargée ne donne pas envie à l'internaute de naviguer plus loin. Cependant, les internautes sont plus patients lorsque le contenu est de qualité. Ainsi, si une bonne mise en page n'augmente pas les performances, elle contribue cependant largement à la satisfaction de l'internaute. L'utilisation d'espaces blancs entre les paragraphes et pour les marges gauche et droite augmente la compréhension de 20 %. **Liens hypertextes VS icônes** : il est important de prendre en compte la catégorie de vos utilisateurs dans le choix de mettre une icône, un lien ou les deux. Les liens sous format texte sont plus souvent cliqués car compris plus rapidement. Enfin, un lien colorisé est plus cliqué qu'un lien noir car il est plus facilement repérable. De façon générale, une page dense avec beaucoup de liens met plus de temps à être assimilée. Par ailleurs, un alignement répétitif n'augmente pas la compréhension. Un bon principe pour les icônes : les faire les plus grandes possibles, les mettre dans une zone permanente et les disposer horizontalement. ** Indications de navigation** : L'acceptation et l'impact d'une animation (vidéo, animation flash, audio etc...) sont augmentés lorsque l'usager est prévenu et invité à lancer son démarrage quand il le souhaite. Attention cependant à la multiplication des menus qui entraîne l'internaute à parcourir votre site plus que ça ne l'aide à trouver une information ! ""</div>"" **[Mise à jour du Centre de ressources Hauts Pays Alpins - janvier 2018]** ""<div class="panel panel-default lateral">""[[ModulE13 << Retour à la page d'entrée du module]] ""</div>"" {{end elem="col"}} {{col size="2"}} {{end elem="col"}} {{end elem="grid"}} ""</div>""
Sauver
Annuler
Thème
Protection anti-spam active