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

twitter

linkedIn

wikipediaflicker

myspace

youtube

secondlife

dodgeballrezoG

meetic

Meeticaffinity

facebook

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

twitter

linkedIn

wikipediaflicker

myspace

youtube

secondlife

dodgeballrezoG

meetic

Meeticaffinity

facebook

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">&nbsp;|&nbsp;</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