l'écriture web - conseils et bonnes pratiques
DESCRIPTION
L'écriture web - conseils et bonnes pratiques.TRANSCRIPT
![Page 1: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/1.jpg)
ll’é’écriture webcriture web
![Page 2: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/2.jpg)
FondamentauxFondamentaux
linlinééaire vs Nonaire vs Non--linlinééaireaire
Cahier des charges minimalCahier des charges minimal
![Page 3: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/3.jpg)
Un bon site web ?
Bonne technique Bon contenu
![Page 4: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/4.jpg)
Un bon contenu ?
« Mettre son site web dans les mains d’un responsable de com, C’est mettre son bistrot dans les mains d’un alcoolo » Gerry McGoverm
![Page 5: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/5.jpg)
Quelques règles …
Amenez vos utilisateurs sur votre site web, donnez leur ce qu’ils attendent, puis laissez les filer. Ils reviendront.
L’utilisateur doit trouver rapidement ce qu’il cherche sur votre site et se servir lui-même. (sentiment de contrôle
sur ce que vous vendez)
Soyez sûr que le volume de visiteurs uniques reflète un bon site.
Ajouter des contenus pour que l’utilisateur fasse ce qu’il vient y faire -> objectif du site -> raisonner résultat que l’information nous fournit
![Page 6: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/6.jpg)
Penser aux liens dans une page
Evoluer
![Page 7: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/7.jpg)
En fait …
Rédiger des accroches
Structurer et habiller le texte
Ecrire pour les moteurs de recherche
![Page 8: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/8.jpg)
Les concepts idéalistes
• Internet va remplacer le livre- Aucune nouvelle forme d’écriture ne vient remplacer une autre : elle la complète
exemple : …
• L’objectif « zéro papier » de l’entreprise- Le document : un objet - appropriation / annotation - navigation
• Communiquer exclusivement via internet- 50% de la communication passe par l’expression de la voix, du visage et par la gestuelle
>> visio
• Acquérir des connaissances par la TV ou en surfant sur internet - Considérer les processus de mémorisation. > participation active
• S’auto-former avec des programmes internet- Difficile pour beaucoup. Prendre en compte le rôle du maître, de l’accompagnateur
Les nouvelles techniques apportent leur lot d’illusions et d’idées préconçues…En conséquence : de nombreux balbutiements et échecs
![Page 9: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/9.jpg)
Pour éviter …
Personne n’est responsable de mettre à jour les contenus
Tout le monde est responsable de mettre à jour les contenus
Pas de contrôle qualité
Inertie éditoriale
Production de contenu irrégulière
Débauche d’énergie éditoriale
Pas de politique d’archivage ou de nettoyage
Les contenus de qualité moyenne s’accumulent, mais manque du "killer content"
Les contenus ne débouchent pas sur des appels à l’action
Les visiteurs ne sont pas qualifiés
Pas d’analyse de trafic
Peu de feedback utilisateur
Et vous ???
![Page 10: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/10.jpg)
L’Ecriture
l'écriture CUNEIFORME, eut lieu vers 3200- 3100 avant notre ère en Mésopotamie (Urukiens )
CUNEIFORME = plus ancien système d’écriture (phonogramme et idéogramme)
l'écriture monétaire, vit le jour à Sardes et dans les cités ioniennes côtières, sur le territoire de l'actuelle Turquie occidentale, vers 550 avant notre ère
l'écriture des réseaux (écriture hypertextuelle) , dont Internet est le plus connu, a commencé entre 1968, première commutation de paquets, et 1972, création du protocole d'Internet.
Aujourd’hui -> écriture en réseau
![Page 11: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/11.jpg)
Ecriture réticulaire = BLOG
Web 2.0 porte ouverte à l’hypertexte …Le texte est rédigé et commenté par le lecteurle texte définitif est une succession de contribution apportée au texte initial.L’hypertexte et le collaboratif apportent une sorte de porte de sortie au texte linéaire, en augmentant le texte initial.
Risque de disloquassions ?
![Page 12: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/12.jpg)
L’écriture web
L’écriture web est influencée par :La technologie
De nouveaux outils … le journaliste n’est plus « le maître de ses sources », pourquoi ?
Supporter la critique …
![Page 13: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/13.jpg)
Comment écrire pour le web ? Comment créer un site web bien lu ?Y’a t’il une logique qui se cache derrière une page ?
Comment la structurer ?
Comment partager l’information ?
Par où commencer ?
• Des manières d’aborder cette écritureUne approche différentes de celles d’un livre ou d’un film
• Des règles, des méthodes nombreuses faisant appels à différents registres :communication / graphisme / interactivité / techniques
• Une écriture complexe >>> paramètres, compétences largesDes erreurs à ne pas commettre.
• Des projets d’équipe >>> richesse et difficultés
![Page 14: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/14.jpg)
On ne lit pas une page web comme une page papier
Quelles sont vos sensations … ?
Page Linéaire > non-linéaire, hypertextualitéLecture rapide > 25 % moins viteSurface plane 2D > volume (nb pages sur internet ?) 3DPublic mono-lecteur > multipoints d’accès (emphytéotique), décloisonnement de l’information Source fermée > accès direct ou moteur de recherche, on ne sait pas d’où vient le lecteur où il iraSupport « Livre » > navigateur, accessibilitéTemporel > flux RSS, déconnectéMeilleure définition des caractères et de la langue > plus de précision forme et fondL’œil lit les lignes > l’œil « scan »
Écritureweb
![Page 15: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/15.jpg)
Ecriture de rupturePourquoi le contenu est –il important ?
Les visiteurs ne retournent pas 2 fois sur un sitequi les a déçus
le contenu est échangé entre le site et l’internautele contenu est vecteur d’imagele contenu doit être adapté à chaque ciblele contenu doit être optimisé pour le weble contenu est lu par les moteurs de recherche
![Page 16: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/16.jpg)
L’hyper textualité
Origine de l’hypertexte ?
Projet MEMEX : premier texte sur le poste de travail
« As we may think » (1945) un appareil électronique relié à une bibliothèque
capable d'afficher des livres et de projeter des films
http://www.archipress.org/episteme/vannevar.htm
1967 – Théodore Nelson – projet xanadu – invente le terme en 1965projet wanadu fut suppenté par le HTTP
1989 – Tim Berners-Lee invente le 1er serveur httpd et le 1er client WWW
![Page 17: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/17.jpg)
Méthodes de création d’un site
De très nombreuses manières d’aborder un projet
écriture = démarche créative
C’est l’intention d’un concepteur / d’un auteur
Se servir d’un modèle Exemples : - modèle dreamweaver /
- modèle selon le type (e-commerce)
Se référer aux sites concurrents
Faire le site à son idée
Concevoir le site avec les idées del’équipe de réalisation.
?
?
?
?
Concevoir le site selon le désirata du client.?
![Page 18: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/18.jpg)
Faire l'inventaire de l'existant
Pour ne pas naviguer dans les étoiles.
N’ont pas connaissance de leur domaines
N’ont pas connaissance de leurs statistiques de navigation
![Page 19: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/19.jpg)
TP
analyser parmi les sites suivant :
ergo-nancy.com, ademe.fr, developpementdurable.com, amazon.fr, etam.fr, lautrecanalnancy.fr, france2.fr
![Page 20: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/20.jpg)
TP
Analyser le site www.perfégal.fr
Quel est le cœur de métier de l’entreprise Perfegal ? Comment communique-t-elle ? Quelles sont ses cibles ? L’entreprise a-t- elle des concurrents ? Comment communiquent-ils ?
Effectuez une critique du site web actuel (graphisme, contenu, clarté du message, référencement de Perfegal dans Google… )
![Page 21: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/21.jpg)
Quelle stratégie web pour mieux positionner Perfegal dans son environnement et faire évoluer son référencement ?
Objectifs du futur site Perfegal ? Quel type de site ? A quels besoins informationnels doit répondre le site web ?
Optimisez le référencement naturel de Perfegal. Effectuez une recherche de mots et expressions clés selon la méthode vue en cours et choisissez les expressions les plus pertinentes.
Site web : quelles préconisations ? URL, rubriquage, fonctionnalités, accès à l’offre proposée par Perfegal, services, fonctionnement dans le temps …
![Page 22: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/22.jpg)
http://www.diladou.com/
http://www.manability.com
http://www.crau-hotel.com
![Page 23: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/23.jpg)
Démarche de création d’un site
Démarche ergonomique de conceptionAdapter le site :
1/ 1/ àà son utilisateurson utilisateurbesoins, conditions physiques et psychologiques,comportements, milieu social
2/ au contexte dans lequel il va l2/ au contexte dans lequel il va l’’utiliserutilisermatériel, lieu, temps, dispositions
![Page 24: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/24.jpg)
Démarche ergonomique de conception
1/ 1/ «« Cibler le site Cibler le site »»Pour qui ?Dans quelles conditions ? Pour quoi faire ?quels concurrents ?
2/ Structurer le site selon le2/ Structurer le site selon lepoint de vue de lpoint de vue de l’’utilisateurutilisateur
Quelles sont les ressources ?Quel scénario possible ? Comment organiser l’information ? Comment naviguer ?Mettre en place les fonctionnalités ?
3/ Tester l3/ Tester l’’ergonomie du siteergonomie du siteavec les utilisateurs concernavec les utilisateurs concernééss
Perception, compréhension ?niveau d’usabilité ?niveau de mémorisation ?
Cahier des chargesservicesergonomie Objectifs de communicationCadre graphique
•Synopsis•Diagramme
de navigation•Story-board, scénario•Charte graphique
•Prototype•Corrections•Améliorationssuccessives
![Page 25: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/25.jpg)
Le cahier des charges
•Quels services et fonctionnalités ?
•Quelle ergonomie ?
•Quels objectifs en terme de communication ?
•Positionnement / concurrence ?
-Dans quel cadre graphique ?
-Avec quelles techniques ?
Pour qui ?Caractéristiques : âge – sexe Pré requis - motivationscentres d’intérêts communsDans quelles conditions ?Où ? Ecran- Maison- travailScénarios d’usageQuand ? Temps , inciter à revenir, à ne pas perdre de temps…Pour quoi faire ?Besoin initial - besoins secondairesNiveau d’efficacité, d’information
1/ 1/ «« Cibler le site Cibler le site »» Définition du projet
Analyse de la concurrence
Grand public ?Utilisateur moyen ?
![Page 26: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/26.jpg)
TP
Réfléchir au cahier des charges du nouveau site de l’école d’ergothérapie
Visitez www.ergo-nancy.com
Analyse des stats www.ergo-nancy.com/stats
![Page 27: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/27.jpg)
Cibler son public
Le client : « C’est mon site »
Le client de mon client : « j’ai besoin d’une information »
Quelle est ma cible ? Que vient elle chercher ?
Quand vient l’internaute sur mon site ? Comment navigue t elle ?
Profil utilisateur … > qu’est ce que mon internaute trouverait d’utile sur le site ?
Quelle est son langage ? Quel est leur niveau préalable de connaissance du sujet ?
Quel est l’objectif du site ?
TP Alertes google
![Page 28: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/28.jpg)
Suppr Organiser l’information
Exemple d’organisation d’un site d’entreprise
Quand vient-elle ?De quoi a-t-elle besoin ?Quel est son niveau de compréhension du sujet ?Quelle va être sa clé de recherche ?
• Réunir tous les éléments existants(Y compris les documents publicitaires)
• Rassembler textes, images.
• Découper
• Regrouper les informations par rubriques
La société / qui sommes nous ?
Les services / notre offre / conseils
Les produits
Contact
Il faut qualifier son audience
On ne dispose que de quelques seconde pour les séduire
![Page 29: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/29.jpg)
SUPPR Profondeur
Créer du contenu de niveau supérieur
Distinguer ce qu’il y a derrièrehttp://europa.eu/abc/travel/index_en.htm
http://www.cg44.fr
![Page 30: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/30.jpg)
TP
Développez un récit hypertextuel
1
32
54
6
9
7
8
En choisissant 3 personnages, 2 lieux, 2 objets
> Un voyageur, un soldat, un grand-père, clint Eastwood, un curé, un aviateur, Patrick poivre D’Avor, une hôtesse de l’air, le ministre de l’intérieur> Un amphithéâtre, une voiture, la tour Eiffel, une île, une planète, une rivière, le viaduc de Millau,Une forêt, une chambre à coucherUn magazine, un tabouret, un téléphone, uen baguette, un trésor, un jeu vidéo, un aquarium, une sculpture, une photographie
![Page 31: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/31.jpg)
Story-board et scénario
Définitionécran par écran
![Page 32: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/32.jpg)
Une fois le profil de notre internaute connu …
http://www.edf.fr/edf-fr-accueil-1.html#Accueil
HUMANISER
CMS et rédacteur
Après avoir compris ce que mon utilisateur venait chercher…
![Page 33: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/33.jpg)
Architecture d’informationSite web = building = représente une architecture
L’architecture, le design, la construction, l'ameublement, les habitants et l'emplacement jouent tous un rôle majeur dans la définition de l'expérience globale;
Architecture d’information-> la combinaison de l’organisation, les rubriques et le schéma de Navigation à l’intérieur d’un SI-> la structure d’un espace d’information pour faciliter l’accès à l’information-> écologie de l’information – représentation sociale – l’utilisateur au centre
contexte
utilisateurcontenu
Le contenu est lié au objectifLa structure du site et son vocabulaire sont liés au sujet du site
Documents, applications, services, metadonnéesTransaction e-commerce
Ce que l’internaute recherche ? Comment il doit le trouver ?Quelles ont leurs taches ?Quelles sont leur préférences ?
![Page 34: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/34.jpg)
TROUVER UN EQUILIBRE
un site web doit contenir un système d'organisation, un système d‘appellation ou étiquettes, un système de navigation ainsi qu'un système de recherche.
Analyse du site www.searchtools.com
Faciliter l’accès au contenu
![Page 35: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/35.jpg)
Façons d'organiser l'information
- Colonne de gauche pour le contenu
- Etiquettes pour ces catégories de contenu- fil d’Ariane
- Liens vers d'autres possibilités de navigation (pour revenir à la page principale) dans le coin supérieur droit
- "Rechercher" interface dans le coin inférieurwww.aduan.fr
![Page 36: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/36.jpg)
Système d’organisation
Nécessaire car web = Surchage d’info, possibilités exponentielle
objectif = réussir à guider l’utilisateur, en regroupant les éléments, avec les relations entre les éléments
6 grandes clés organisation du contenu = regroupement en régime
![Page 37: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/37.jpg)
Chronologique : actualités, http://www.lemonde.fr/
Alphabétique : annuaire, http://www.unsystem.org/fr/
Géographique : questions de politiques, économiques http://www.campingfrance.com/
Thématique : annuaires, pages jaunes http://fr.dir.yahoo.com/
Orienté action : site de e-commerce, http://www.ebay.fr
Orienté audience : site personnalisable ou extranet http://www.netvibes.com/
étudier l'organisation actuelle / utiliser les 2 régimes
Régime exact
Régime ambigüe
![Page 38: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/38.jpg)
Rubricage / menus
Intermédiaire pré-enregistré entre propriétaire du site et internautes
Les menus ne sont pas représentatifs : limiter leur portée au contexte
Souvent du jargonProduits & servicesCorporateNouveau mot anglicisme
Risque de perdre l’internaute : s’inspirer des autres sites / concurrents
Tester compréhension , http://www.synonymes.com/ , thesaurus pro, analyser les logs, cohérence dans le style et typo, iconographie http://www.jetblue.com/
![Page 39: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/39.jpg)
Etiquettes
Liste des étiquettes communes
AccueilRecherchePlan du siteContact, contactez nousAide, FAQActualités, manifestationsA propos
TP : outil mindmeister rubriques ergo-nancy.com
![Page 40: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/40.jpg)
SYSTÈME de NAVIGATION
FinDébut
Début Fin
Moyens : Menu ou liensreprésentant chaque
Avant -
arrière (+début -
fin)
Avant (+fin)
Contiguïtémultichoix
Contiguïté linéaire
Navigation libre
Avance contrainte
Intention du concepteur
Contraindre le lecteur àsuivre un parcours avecla liberté de temps
Offrir la possibilité deRetour, la liberté de revenir au départ, de passer à la fin
Donner la possibilitéd’aller à plusieurspages de proximité
Offrir la liberté d’alleren tout point d’uneséquence
http://www.nouveau-paris-ile-de-france.fr/
![Page 41: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/41.jpg)
Navigation hiérarchique
Navigation secondaire
Accueil
Navigation transversale
menu
Arborescences de sites
Profondeur de site
larg
eur
de s
ite
Du synthétique vers l’exhaustif http://www.aduan.fr
Ne comptez pas le nombre de clicsPréférez une largeur plutôt qu’une profondeur
![Page 42: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/42.jpg)
![Page 43: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/43.jpg)
La notion d’hypertexte repose sur 4 notions:
Les noeuds d’information (ex: un document, une page dans le web)
les liens entre les noeuds (ex: un mot souligné, l’entrée d’un menu)
la structure
Les chemins
![Page 44: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/44.jpg)
![Page 45: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/45.jpg)
Type de navigation
Navigation globale
loca
le contextuelle
![Page 46: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/46.jpg)
Qui je suis ?
Pro
che
de m
oi
Ce qui se rapporte à ce qui est proche de moi ?
blog
![Page 47: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/47.jpg)
Où puis-je aller ?
Où
?
Où ?
www.nouvelles-frontieres.fr
![Page 48: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/48.jpg)
![Page 49: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/49.jpg)
![Page 50: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/50.jpg)
Systèmes de recherche
Si possible prévoir un moteur de recherche du contenu du site
Proposer si possible une recherche avancée
Penser présentation des résultats
Penser ré- indexation
![Page 51: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/51.jpg)
audience
themes
![Page 52: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/52.jpg)
Typologie sites plateforme relationnelleRéél
Faire
Projeté
Etre
peuplade
wikipediaflicker
myspace
youtube
secondlife
dodgeballrezoG
meetic
Meeticaffinity
skyblog
livejournalWorld ofwarcraft
Identité agissantCommunautés, passions
Identité civileSes caractéristiques, statut, localisation
Identité virtuelleAvatar, fansIdentité narrative
Journal, famille, quotidien
![Page 53: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/53.jpg)
Navigation à
partir d’une objectivation de la personneRéél
Faire
Projeté
Etre
peuplade
wikipediaflicker
myspace
youtube
secondlife
dodgeballrezoG
meetic
Meeticaffinity
skyblog
livejournalWorld ofwarcraft
relation
Amis d’amis,
personomie
Recherche catégorielleCatalogue, trombinoscope
Territoire / projetTwitt, geoloc, calendrier
HasardTags,
recommandations, groupes, agrégats
instantanéCarte virtuelle, événement
![Page 54: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/54.jpg)
Architecture d’information
![Page 55: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/55.jpg)
![Page 56: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/56.jpg)
Outil
Freemind : outil d’organisation d’idées = carte HEURISTIQUE (l'art d'inventer, de faire des découvertes) mettre en exergue une hiérarchie, un plan, ou tout simplement pour obtenir une
visualisation plus intuitive et plus complexe
Mindmeister : version collaborative lolodev54 loloaeco
XMIND
http://nathalierun.net/PenseeLibre/MindMapping/freemind.html
![Page 57: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/57.jpg)
TP
Enumérer les contenus, catégoriser l’information par groupe, structurer l’information
Créer une architecture d’information de la nouvelle version du site web de l’école d’ergothérapie de Nancy
Mettre en ligne l’architecture
![Page 58: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/58.jpg)
Tri de cartes
Faire participer l’utilisateur
1 – présenter les contenus
2 – faire valider : cohérence + libellé
3 – trier et regrouper:
pourquoi ce groupe ?
Quelles différences ?
Quelles ressemblances ?
4 – Nommer les groupes
![Page 59: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/59.jpg)
Accessibilité du site
Mettre l’information à portée de main de tous et pas uniquement l’aveugle …
Règles Web Accessibility Initiative (WAI) issu du W3c (organisme de standardisation ) interopérabilité HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP
stratégies, guides (WCAG1) et ressources
3 niveaux : A essentielles de l'accessibilité , AA facilite la
navigation , AAA toutes les recommandations d'accessibilité
http://www.braillenet.org/ outil jaws
![Page 60: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/60.jpg)
www.vandoeuvre.fr -> readspeaker
Firevox
http://www.accessiweb.org/
Projetenergie.lolodev.net
http://www.totalvalidator.com/validator/ValidatorFor m
Quelques tests: ALT, liens accessibles au clavier, ordre formulaire
tabindex="4"
http://www.accessiweb.org/fr/Label_Accessibilite/crit eres_accessiweb/
![Page 61: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/61.jpg)
STYLES CSS
Cascading Style Sheets
langage qui permet de gérer la présentation d'une page Web.
Position, Alignement, police, couleurs, marges, image de fond …
BUT séparer la structure d'un document HTML et sa présentation
![Page 62: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/62.jpg)
STYLES CSS
Méthode<link rel="stylesheet" href="fileadmin/templates/v4/css/styles.css" type="text/css" media="all" />
<!--[if lte IE 6]><link rel="stylesheet" href="fileadmin/templates/v4/css/styles_ie6.css" type="text/css" media="all" /><![endif]--><!--[if gte IE 7]><link rel="stylesheet" href="fileadmin/templates/v4/css/styles_ie7.css" type="text/css" media="all"
/><![endif]-->
![Page 63: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/63.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Document sans nom</title><style media="screen">div, span, object, iframe, h1, h2, h3, h4, h5, h6,p, a, em, img, fieldset, strong, ol, ul, li, dl, dt, dd,form, label, table, tr, th, td margin: 0 </style></head>
<body ><center><div style="width:980px" id="container">
<div style="" id="header"><div><a href="">image du haut</a></div>
<div style="width:980px"><div style="width:450px;float:left">Centre de formation</div><div style="width:450;float:left;text-align:left;margin:0 0 0 300px;">mes cooordonées</div></div></div><div style="clear:left;heigth:0px"></div>
<ul id="menu" style="list-style:none;width:980px;border:1px solid #000;margin: 0"><li style="float:left">accueil</li><li style="float:left"> | </li><li style="float:left">stage photo</li></ul>
<div style="clear:left;heigth:0px"></div>
<div style="width:940;border:1px solid #000" id="corps"><div id="colg" style="float:left;width:200px;border:1px solid #000"><div id="menu"><div style="background:"><a href="">Toutes les formations</a></div>
<div >image1</div><div>image1</div><div>image1</div><div>image1</div><div>image1</div><div>image1</div><div>image1</div><div>image1</div>
</div>
<div>boite 1</div><div>boite 2</div>
</div><div id="colm" style="float:left;width:450px;border:1px solid #000">
<div>flash</div><div>ttes le fomations</div>
</div><div id="cold" style="float:left;width:300px;border:1px solid #000">droite</div>
</div><div style="clear:left;heigth:0px"></div>
<div id="footer">pied</div></div></center><map><area map /></map></body></html>
![Page 64: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/64.jpg)
REDIGER
![Page 65: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/65.jpg)
Les pages
Les pages doivent fonctionner comme un entonnoir
Penser hiérarchie de l’information + messages essentiels + plan du site
Les titres, les intertitres, les accroches, les chandelles, les paragraphes, les liens
![Page 66: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/66.jpg)
L’essentiel en premier
Que voyons nous en premier dans un page ?Jakob Nielsen (F-Shaped Pattern For Reading Web Content) ‘F’ MODEL
• Pas de lecture mots à mots• Pas de lecture en profondeur• lecture 1ier paragraphe, 1ier sous-titre, 1iere puce, mots forts sur le coté gauche de la page • lecture du 1ier et 2ieme mot rarement le 3ieme
• lecture de listes restreintes
Article site coorporate E-commerce résultats Google
![Page 67: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/67.jpg)
L’essentiel en premier
Contenu web = tout livrer de suite
Sur l’écran, l’œil « scan »
Neuf, important, proche
Général, détail, explicatif
5W ou QQQPO Qui ? Quoi ? Où ? Quand ? Comment ? Pourquoi ?
Titre et chapo : 5WDébut du texte
Reprise des élémentsprincipaux, explicationsEt puis plongée dans
le texte pour deschoses
de moinsen moins
importantes.
![Page 68: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/68.jpg)
PARIS (AFP) - Le colonel libyen Mouammar Kadhafia quitté Paris samedi à destination de Séville, après cinq jours
d'une visite très controversée en France. Le dirigeant libyen est parti avec plus de deux heures de retardsur l'horaire prévu. Le tapis rouge avait été déroulé sur le tarmacet la garde républicaine était présente pour le départ du colonel,a constaté une journaliste de l'AFP.
TP titre
![Page 69: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/69.jpg)
LOIS DE PROXIMITE
Se mettre à la place du lecteur, que vient-il chercher ?
Pour capter son intérêt
Choisir un angle d’attaque
LOI DE LA PROXIMITE TEMPORELLE
-> parler des événements à
venir«
le directeur a tenu une conférence de presse lundi 5 octobre. Il a
notamment parlé
du rachat de la société
LAMBDA, prévue pour la fin d’année.
»
![Page 70: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/70.jpg)
LAMBDA fera parti du groupe dés cette année. C’est une des décisions annoncées par le directeur lors de sa dernière conférence de presse
Futur proche > passé proche > futur lointain > passé lointain
![Page 71: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/71.jpg)
LOI DE PROXIMITE GEOGRAPHIQUE
La loi de sur l’interdiction de fumer dans les lieux publics est en discussion en ce moment à l’Assemblée Nationale. Elle devrait bannir l’utilisation de la cigarette dans les lieux publics.
![Page 72: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/72.jpg)
Fini la cigarette au comptoir du café du Commerce ! Comme dans tous les autres lieux publics, la loi discutée en ce moment à l’Assemblée Nationale bannira la fumée dans le fameux établissement du 15 iéme arrondissement
>sa rue > son quartier > sa ville > son pays
![Page 73: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/73.jpg)
LOI DE PROXIMITE SOCIALE ET PSYCHO- AFFECTIVE
> Environnement social et affectif
![Page 74: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/74.jpg)
TP
Réécrivez le texte suivant en plaçant les éléments les plus importants au début :Interview :
« le multimédia deviendrait-il un nouvel art ? De plus en plus apparaissent dans le multimédia des OVNIS qui ne relèvent plus seulement des catégories classiques telles que le ludo-éducatif ou les jeux d’aventures et simulation, mais proposent une nouvelle invitation au rêve et touchent toute la famille.Oncle Ernest est à la fois un jeu d’aventures, un parcours géographique et historique, une plongée dans un univers fabuleux. Il passionne les enfants mais aussi leurs parents. Eric Viennot est un concepteur de CD Rom heureux. Il vient de sortir l’Ile Mystérieuse de l’oncle Ernerst, le troisième volume des aventures de cet aventurier fantasque qui entraîne les enfants dans d’étonnantes expéditions. »> article fnac
---Ayant acquis une réputation nationale, le laboratoire de Nancy est aujoud’hui dans la cour des grands laboratoires internationnaux soumis à une forte compétition en matière de recherhe, de haute technicité et de necessaires capacités investissmeent. Cette structure n’a plus vocation à être gérée par la ville. Il faut aujourd’hui au laboratoire une prespective qui va au-delà de ce que la ville peut lui offrir. Face à ce constat, lma décision a été prise de vendre le laboratoire. Après étude des propositions, le choix s’est porté sur la société ETS. Le projet présenté en matière de maintien de l’éthique, d’indépendance et de projets de développement pour le site de Nancy a convaincu de al crédibilité de l’offre. La vente, effective à compter du 1ier janvier prochain, permettra à la ville de financier d’autres grands projets à venir.
5 WDéterminer les 5WAlternative à la petite monnaie, la carte à puce Moneo ne fait pas l’unanimité. Alors qu’il arrive en région parisienne, ce système de
paiement est l’objet de vives critiques : commerçants et associations de consommateurs lui reprochent son prix élevé
![Page 75: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/75.jpg)
réécrire l'histoire de Blanche-Neige en respectant ce type de plan, en considérant qu'on la raconte au moment où l'héroïne est réveillée par le baiser du Prince Charmant.
![Page 76: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/76.jpg)
Proposer des ressources
Poursuivre son chemin hypertexte
Où placer des ressources ?
Corps du texte
Bas de mon article
Partie droite de la page
http://www.lemonde.fr/ameriques/article/2009/10/02/barack- obama-parle-avec-les-ennemis-de-l- amerique_1248326_3222.html
![Page 77: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/77.jpg)
Landing pages = donne moi ce que je veux
Bande annonce du site
Pages d’entrées
Pages réservées à entrées de bannières pub, moteur de recherche, ad-words, emailing …
Convertir un objectif
![Page 78: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/78.jpg)
La partie la plus importante de la landing page, celle où doit se produire l'action souhaitée, est placée en haut de page, idéalement dans les 300 premiers pixels, pour que le visiteur n'ait pas à "scroller" pour y accéder.
La landing page n'est pas trop riche en texte, afin de ne pas distraire le visiteur de l'action que vous souhaitez qu'il accomplisse.
La landing page contient peu de liens, portes de sortie potentielles pour le visiteur.
![Page 79: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/79.jpg)
Charte graphique
Des wagons de modèles graphiques !
http://www.charte-graphique.net
Modèles = dangers !il faut construire son cahier des chargespour créer un concept graphique fort.
ÉventuellementSource d’idéeSource d’inspiration
![Page 80: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/80.jpg)
TP
-> hyperlivre : livre de jacques Attali – certaines page sont imprimées avec code 2D
![Page 81: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/81.jpg)
Conclusion partie 1Conclusion partie 1
Organiser son informationOrganiser son information
Faire un planFaire un plan
Profiter de lProfiter de l’’hypertexte la partie droite sert hypertexte la partie droite sert aux liens complaux liens compléémentairesmentaires
Une page web est un toutUne page web est un tout
On doit penser On doit penser àà ce que les utilisateurs ce que les utilisateurs ont besoinont besoin
![Page 82: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/82.jpg)
Les techniques webLes techniques web
![Page 83: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/83.jpg)
Traduire le sens en balisage
Ce quipermet la mise ne forme d'un texte web = CSS
1er feuille en 1994 par Håkon W. Lie
CSS 1 = Recommandation W3C en 1996
Objectifs ?
Idée : travailler le balisage et la structure sémantique en vu de l'indexation
Objectifs: optimisation, ecriture, indexation, netlinking
![Page 84: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/84.jpg)
L’extension de Firefox Web Developer vous permet de faire une extraction du plan sémantique d’une page web (faites « Information » puis « Plan du document »)
Répondre à 2 questions:
Qu'est ce que ceci signifie ?
Quel est le véritable sens de cela ?
H1 : entête le plus important
ul,li : qu'est ce que cela
blockquote,p, cite : qu'est ce que ceci
![Page 85: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/85.jpg)
Exercices: voici 3 images, décrire les contenus que vous souhaitez faire véhiculer et le transformer en balisage sémantique
![Page 86: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/86.jpg)
Prendre un article ou une affiche, et interroger sur le balisage
Repérer l'en-tête principale, en-tête secondaire et troisième niveau
Repérer les listes
Traiter les images
![Page 87: L'écriture web - conseils et bonnes pratiques](https://reader031.vdocuments.site/reader031/viewer/2022020101/55643ed1d8b42adb258b54dd/html5/thumbnails/87.jpg)