ll’é’écriture webcriture web
FondamentauxFondamentaux
linlinééaire vs Nonaire vs Non--linlinééaireaire
Cahier des charges minimalCahier des charges minimal
Un bon site web ?
Bonne technique Bon contenu
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
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
Penser aux liens dans une page
Evoluer
En fait …
Rédiger des accroches
Structurer et habiller le texte
Ecrire pour les moteurs de recherche
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
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 ???
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
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 ?
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 …
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
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
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
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
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.?
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
TP
analyser parmi les sites suivant :
ergo-nancy.com, ademe.fr, developpementdurable.com, amazon.fr, etam.fr, lautrecanalnancy.fr, france2.fr
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… )
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 …
http://www.diladou.com/
http://www.manability.com
http://www.crau-hotel.com
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
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
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 ?
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
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
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
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
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
Story-board et scénario
Définitionécran par écran
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…
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 ?
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
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
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
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
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/
Etiquettes
Liste des étiquettes communes
AccueilRecherchePlan du siteContact, contactez nousAide, FAQActualités, manifestationsA propos
TP : outil mindmeister rubriques ergo-nancy.com
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/
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
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
Type de navigation
Navigation globale
loca
le contextuelle
Qui je suis ?
Pro
che
de m
oi
Ce qui se rapporte à ce qui est proche de moi ?
blog
Où puis-je aller ?
Où
?
Où ?
www.nouvelles-frontieres.fr
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
audience
themes
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
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
Architecture d’information
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
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
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
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
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/
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
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]-->
<!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>
REDIGER
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
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
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.
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
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.
»
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
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.
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
LOI DE PROXIMITE SOCIALE ET PSYCHO- AFFECTIVE
> Environnement social et affectif
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é
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.
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
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
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.
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
TP
-> hyperlivre : livre de jacques Attali – certaines page sont imprimées avec code 2D
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
Les techniques webLes techniques web
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
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
Exercices: voici 3 images, décrire les contenus que vous souhaitez faire véhiculer et le transformer en balisage sémantique
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
Top Related