Your SlideShare is downloading. ×
L'écriture web - conseils et bonnes pratiques
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

L'écriture web - conseils et bonnes pratiques

407

Published on

L'écriture web - conseils et bonnes pratiques.

L'écriture web - conseils et bonnes pratiques.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
407
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. l’écriture web
  • 2.  Fondamentaux linéairevs Non-linéaire Cahier des charges minimal
  • 3. Un bon site web ?Bonne technique Bon contenu
  • 4. Un bon contenu ?« Mettre son site web dans les mains d’unresponsable de com, C’est mettre son bistrotdans les mains d’un alcoolo » Gerry McGoverm
  • 5. 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
  • 6.  Penser aux liens dans une page Evoluer
  • 7. En fait … Rédiger des accroches Structurer et habiller le texte Ecrire pour les moteurs de recherche
  • 8. Les concepts idéalistesLes nouvelles techniques apportent leur lot d’illusions et d’idées préconçues…En conséquence : de nombreux balbutiements et échecs• 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
  • 9. 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 ???
  • 10. 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 lactuelle 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 dInternet.  Aujourd’hui -> écriture en réseau
  • 11. Ecriture réticulaire = BLOGWeb 2.0 porte ouverte à l’hypertexte … Le texte est rédigé et commenté par le lecteur le 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 ?
  • 12. 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 …
  • 13. 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 larges Des erreurs à ne pas commettre.• Des projets d’équipe >>> richesse et difficultés
  • 14. 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’informationSource fermée > accès direct ou moteur de recherche, on ne Écrituresait pas d’où vient le lecteur où il ira webSupport « Livre » > navigateur, accessibilitéTemporel > flux RSS, déconnectéMeilleure définition des caractères et de la langue > plus deprécision forme et fondL’œil lit les lignes > l’œil « scan »
  • 15. Ecriture de rupture Pourquoi le contenu est –il important ? le contenu est échangé entre le site et l’internaute le contenu est vecteur d’image le contenu doit être adapté à chaque cible le contenu doit être optimisé pour le web le contenu est lu par les moteurs de recherche Les visiteurs ne retournent pas 2 fois sur un site qui les a déçus
  • 16. L’hyper textualité  Origine de l’hypertexte ? ProjetMEMEX : premier texte sur le poste de travail « As we may think » (1945) un appareil électronique relié à une bibliothèque capable dafficher des livres et de projeter des films http://www.archipress.org/episteme/vannevar.htm1967 – Théodore Nelson – projet xanadu – invente le terme en 1965 projet wanadu fut suppenté par le HTTP 1989 – Tim Berners-Lee invente le 1er serveur httpd et le 1er client WWW
  • 17. Méthodes de création d’un site écriture = démarche créative C’est l’intention d’un concepteur / d’un auteurDe très nombreuses manières d’aborder un projet ? 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 de l’équipe de réalisation. ? Concevoir le site selon le désirata du client.
  • 18. Faire linventaire de lexistant Pour ne pas naviguer dans les étoiles. N’ont pas connaissance de leur domaines N’ont pas connaissance de leurs statistiques de navigation
  • 19. TP analyser parmi les sites suivant : ergo-nancy.com, ademe.fr, developpementdurable.com, amazon.fr, etam.fr, lautrecanalnancy.fr, france2.fr
  • 20. 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… )
  • 21.  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 …
  • 22.  http://www.diladou.com/ http://www.manability.com http://www.crau-hotel.com
  • 23. Démarche de création d’un site Démarche ergonomique de conception Adapter le site : 1/ à son utilisateur besoins, conditions physiques et psychologiques, comportements, milieu social 2/ au contexte dans lequel il va l’utiliser matériel, lieu, temps, dispositions
  • 24. Démarche ergonomique de conception 1/ « Cibler le site » Cahier des charges Pour qui ? services Dans quelles conditions ? ergonomie Pour quoi faire ? Objectifs de communication quels concurrents ? Cadre graphique 2/ Structurer le site selon le point de vue de l’utilisateur •Synopsis Quelles sont les ressources ? •Diagramme Quel scénario possible ? de navigation Comment organiser l’information ? •Story-board, scénario Comment naviguer ? •Charte graphique Mettre en place les fonctionnalités ? 3/ Tester l’ergonomie du site •Prototype avec les utilisateurs concernés •Corrections •Améliorations Perception, compréhension ? successives niveau d’usabilité ? niveau de mémorisation ?
  • 25. Le cahier des charges1/ « Cibler le site » Définition du projet Grand public ? Pour qui ? Utilisateur moyen ? •Quels services et fonctionnalités ? Caractéristiques : âge – sexe Pré requis - motivations centres d’intérêts communs •Quelle ergonomie ? Dans quelles conditions ? Où ? Ecran- Maison- travail Scénarios d’usage Quand ? Temps , inciter à revenir, à ne pas perdre de temps… •Quels objectifs en terme de Pour quoi faire ? communication ? Besoin initial - besoins secondaires Niveau d’efficacité, d’information •Positionnement / concurrence ? -Dans quel cadre graphique ? Analyse de la concurrence -Avec quelles techniques ?
  • 26. 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
  • 27. 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
  • 28. Suppr Organiser l’information On ne dispose que de quelques seconde pour les séduireIl faut qualifier son audienceQuand 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 Exemple d’organisation d’un site d’entreprise(Y compris les documents publicitaires)• Rassembler textes, images. La société / qui sommes nous ?• Découper Les services / notre offre / conseils Les produits• Regrouper les informations par rubriques Contact
  • 29. SUPPR ProfondeurCréer du contenu de niveau supérieurDistinguer ce qu’il y a derrière http://europa.eu/abc/travel/index_en.htm http://www.cg44.fr
  • 30. TP Développez un récit hypertextuel 1 2 3 4 5 6 7 8 9 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 à coucher Un magazine, un tabouret, un téléphone, uen baguette, un trésor, un jeu vidéo, un aquarium, une sculpture, une photographie
  • 31. Story-board et scénarioDéfinitionécran par écran
  • 32. Une fois le profil de notre internauteconnu … 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…
  • 33. Architecture d’information Site web = building = représente une architecture L’architecture, le design, la construction, lameublement, les habitants et lemplacement jouent tous un rôle majeur dans la définition de lexpé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 Le contenu est lié au objectif La structure du site et son vocabulaire sont liés au sujet du site Documents, applications, services, metadonnées contenu Ce que l’internaute recherche ? Transaction e-commerce utilisateur Comment il doit le trouver ? Quelles ont leurs taches ? Quelles sont leur préférences ?
  • 34. Faciliter l’accès au contenuTROUVER UN EQUILIBREun site web doit contenir un système dorganisation,un système d‘appellation ou étiquettes,un système de navigationainsi quun système de recherche.Analyse du site www.searchtools.com
  • 35. Façons dorganiser linformation - Colonne de gauche pour le contenu - Etiquettes pour ces catégories de contenu - fil d’Ariane - Liens vers dautres possibilités de navigation (pour revenir à la page principale) dans le coin supérieur droit - "Rechercher" interface dans le coin inférieurwww.aduan.fr
  • 36. 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
  • 37. Chronologique : actualités, http://www.lemonde.fr/ Régime exactAlphabétique : annuaire, http://www.unsystem.org/fr/Géographique : questions de politiques, économiques http://www.campingfrance.com/Thématique : annuaires, pages jauneshttp://fr.dir.yahoo.com/ Régime ambigüeOrienté action : site de e-commerce, http://www.ebay.frOrienté audience : site personnalisable ou extranethttp://www.netvibes.com/ étudier lorganisation actuelle / utiliser les 2 régimes
  • 38. 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 Risque de perdre l’internaute : s’inspirer des autres sites / Souvent du jargon concurrents Produits & services Corporate Nouveau mot anglicismeTester compréhension , http://www.synonymes.com/ , thesaurus pro,analyser les logs, cohérence dans le style et typo, iconographiehttp://www.jetblue.com/
  • 39. Etiquettes Liste des étiquettes communes Accueil Recherche Plan du site Contact, contactez nous Aide, FAQ Actualités, manifestations A propos TP : outil mindmeister rubriques ergo-nancy.com
  • 40. SYSTÈME de NAVIGATION Intention du concepteur Avance contrainte Contraindre le lecteur àDébut Fin Avant (+fin) suivre un parcours avec la liberté de tempsDébut Fin Contiguïté linéaire Offrir la possibilité de Avant - arrière Retour, la liberté de (+début - fin) revenir au départ, de passer à la fin Contiguïté Donner la possibilité d’aller à plusieurs multichoix pages de proximité http://www.nouveau-paris-ile-de-france.fr/ Offrir la liberté d’aller Moyens : Menu ou liens Navigation libre en tout point d’une représentant chaque séquence
  • 41. Arborescences de sites largeur de siteAccueil menu Navigation hiérarchique Navigation transversale Navigation secondaire Profondeur de site Du synthétique vers l’exhaustif http://www.aduan.frNe comptez pas le nombre de clicsPréférez une largeur plutôt qu’une profondeur
  • 42. 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
  • 43. Type de navigation Navigation globale locale contextuelle
  • 44. Qui je suis ? Proche de moi Ce qui se rapporte à ce qui est proche de moi ?blog
  • 45. Où puis-je aller ? Où ? Où ?www.nouvelles-frontieres.fr
  • 46. 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
  • 47. audiencethemes
  • 48. Typologie sites plateforme relationnelle Réél peuplade meetic Identité civile twitter Identité agissant Ses caractéristiques, statut, localisation linkedIn Communautés, passions dodgeball Meetic rezoG flicker wikipedia affinityEtre facebook myspace Faire skyblog youtube Identité virtuelle Avatar, fans Identité narrative Journal, famille, quotidien livejournal secondlife World of warcraft Projeté
  • 49. Navigation à partir d’une objectivation de la personne Réél peuplade meetic Ter Recherche catégorielle twitterritoire / p Twitt , geol roCatalogue, trombinoscope oc, ca jet lendri linkedIn er dodgeball Hasard Meetic rezoG Tags, flicker wikipedia affinity recommandations, Etre facebook groupes, myspace Faire ie agrégats m n ono a tio e skyblog rs youtube el , p r is instantané am s d’ Carte virtuelle, événement i Am livejournal secondlife World of warcraft Projeté
  • 50. Architecture d’information
  • 51. Outil Freemind : outil d’organisation d’idées = carte HEURISTIQUE mettre en exergue (lart dinventer, de faire des découvertes) une hiérarchie, un plan, ou tout simplement pour obtenir une visualisation plus intuitive et plus complexe http://nathalierun.net/PenseeLibre/MindMapping/freemind.html XMIND Mindmeister : version collaborative lolodev54 loloaeco
  • 52. 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
  • 53. 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
  • 54. 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 laccessibilité, AA facilite la navigation, AAA toutes les recommandations daccessibilité http://www.braillenet.org/ outil jaws
  • 55.  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/
  • 56. STYLES CSS Cascading Style Sheets langage qui permet de gérer la présentation dune page Web. Position, Alignement, police, couleurs, marges, image de fond … BUT séparer la structure dun document HTML et sa présentation
  • 57. 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]-->
  • 58. <!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">&nbsp;|&nbsp;</li><listyle="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>
  • 59. REDIGER
  • 60. 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
  • 61. L’essentiel en premier Que voyons nous en premier dans un page ? Jakob Nielsen (F-Shaped Pattern For Reading Web Content) ‘F’ MODEL Article site coorporate E-commerce résultats Google • 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
  • 62. L’essentiel en premier Contenu web = tout livrer de suite Sur l’écran, l’œil « scan » Titre et chapo : 5W Début du texte Neuf, important, proche Reprise des éléments principaux, explications Et puis plongée dans le texte pour des choses de moins en moins importantes. Général, détail, explicatif5W ou QQQPO Qui ? Quoi ? Où ? Quand ? Comment ? Pourquoi ?
  • 63. PARIS (AFP) - Le colonel libyen Mouammar Kadhafia quitté Paris samedi à destination de Séville, après cinq jours dune visite très controversée en France.Le dirigeant libyen est parti avec plus de deux heures de retardsur lhoraire 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 lAFP. TP titre
  • 64. 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. »
  • 65.  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 presseFutur proche > passé proche > futur lointain > passé lointain
  • 66.  LOI DE PROXIMITE GEOGRAPHIQUELa 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.
  • 67.  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
  • 68.  LOI DE PROXIMITE SOCIALE ET PSYCHO- AFFECTIVE> Environnement social et affectif
  • 69. 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. 5W Déterminer les 5W Alternative à la petite monnaie, la carte à puce Moneo ne fait pas l’unanimité. Alors qu’il arrive en région parisienne, ce système depaiement est l’objet de vives critiques : commerçants et associations de consommateurs lui reprochent son prix élevé
  • 70.  réécrire lhistoire de Blanche-Neige en respectant ce type de plan, en considérant quon la raconte au moment où lhéroïne est réveillée par le baiser du Prince Charmant.
  • 71. Proposer des ressources Poursuivre son chemin hypertexte Où placer des ressources ? Corps du texte Bas de mon article Partie droite de la pagehttp://www.lemonde.fr/ameriques/article/2009/10/02/barack-obama-parle-avec-les-ennemis-de-l-amerique_1248326_3222.html
  • 72. Landing pages = donne moi ce queje veux Bande annonce du site Pages d’entréesPages réservées à entrées de bannières pub, moteur de recherche, ad-words, emailing … Convertir un objectif
  • 73.  La partie la plus importante de la landing page, celle où doit se produire laction souhaitée, est placée en haut de page, idéalement dans les 300 premiers pixels, pour que le visiteur nait pas à "scroller" pour y accéder. La landing page nest pas trop riche en texte, afin de ne pas distraire le visiteur de laction que vous souhaitez quil accomplisse. La landing page contient peu de liens, portes de sortie potentielles pour le visiteur.
  • 74. Charte graphiqueDes wagons de modèles graphiques !http://www.charte-graphique.net Modèles = dangers ! il faut construire son cahier des charges pour créer un concept graphique fort. Éventuellement Source d’idée Source d’inspiration
  • 75. TP-> hyperlivre : livre de jacques Attali – certaines page sont imprimées avec code 2D
  • 76. Conclusion partie 1 Organiser son information Faire un plan Profiter de l’hypertexte la partie droite sert aux liens complémentaires Une page web est un tout On doit penser à ce que les utilisateurs ont besoin
  • 77. Les techniques web
  • 78. Traduire le sens en balisage Ce quipermet la mise ne forme dun 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 lindexation Objectifs: optimisation, ecriture, indexation, netlinking
  • 79.  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:  Quest ce que ceci signifie ?  Quel est le véritable sens de cela ? H1 : entête le plus important ul,li : quest ce que cela blockquote,p, cite : quest ce que ceci
  • 80.  Exercices: voici 3 images, décrire les contenus que vous souhaitez faire véhiculer et le transformer en balisage sémantique
  • 81.  Prendre un article ou une affiche, et interroger sur le balisage Repérer len-tête principale, en-tête secondaire et troisième niveau Repérer les listes Traiter les images

×