Bien soigner la navigation d’un site

Pourquoi soigner la navigation d’un site

La navigation comprend dès éléments tels que le menu, le footer mais également les chemins de fer(1), les liens de contenu, les éventuels pavés contextuels, etc.

Tous ces éléments forment un tout qui, bien sûr, permet de passer de page en page, mais permet aussi à l’internaute de se repérer dans le site et de comprendre quelles informations il va trouver dans quel contexte.

Enfin, en plus de l’internaute, c’est le moteur de recherche a qui une navigation soignée va servir. Le référencement naturel n’en sera que meilleur.

Bien réfléchir à la navigation d’un site au moment de sa conception, participe donc à deux critères de l’expérience utilisateur : l’utilisabilité et la trouvabilité.

Comment soigner la navigation d’un site

Le menu

Le menu est, bien sûr, un élément central du site et de sa navigabilité.

En tant qu’élément récurrent, dans les sites web, les internautes sont habitués à y trouver les rubriques du site. Il peut donc être un premier indice du contenu du site et de ce qu’on y trouvera. Le découpage et le nommage des rubriques est donc primordial et doit bien correspondre au contenu effectif.

Le rendu graphique du menu est bien sûr important. Il doit être différencié du reste du contenu et lisible. Pensez au critères d’accessibilité (contraste des couleurs de fond et de texte, par exemple). Méfiez-vous également des menus qui, pour être plus jolis, utilisent des images plutôt que des typographies systèmes : le référencement en sera moins bon.

Mis à part la mise en forme d’une rubrique qui peut changer en fonction du contexte (onglet de couleur différente lorsqu’on navigue dans la rubrique en question), le menu doit être au même endroit et avec le même rendu graphique et le même contenu sur toutes les pages. C’est un élément de repérage important ; il ne doit pas “bouger”.

Le chemin de fer

Le chemin de fer aide l’internaute a s’y retrouver dans un site. Il devient indispensable à partir du moment où l’arborescence à plus de deux niveaux.

Le chemin de fer contient deux types d’éléments qui doivent être différenciés : les pages parentes et la page en cours. Les items de pages parentes sont des liens vers les pages en question et la page en cours est du simple texte (pas de lien vers elle-même). Cette différence devrait également être relayée par du graphisme.

Chacun de ces items, pages parentes ou page en cours, doivent, pour des raisons de repérage, reprendre le titre de la page (qui reprend lui-même, le cas échéant, le titre de rubrique utilisé dans le menu).
Par exemple, si dans mon menu j’ai une rubrique “Accessibilité des pages web”, la page vers laquelle pointe ce lien a pour titre “Accessibilité des pages web”. Les sous-pages de cette rubrique, dans leur chemin de fer contiennent alors un item de page parente “Accessibilité des pages web”.
Cette bonne pratique est également très utile pour optimiser une requête donnée sur une page et donc augmenter la qualité de son référencement naturel.

Pour coder le chemin de fer, vous pouvez aller consulter ces deux articles de vrais pointilleux (que j’adore ça !) : Fil d’Ariane et sémantique et Fil d’Ariane et sémantique (à nouveau).

Les liens de contenu

Les liens insérés dans un texte sont facilement lus, sont compréhensibles car contextualisés et sont fréquemment suivis. Pensez-donc, quand c’est pertinent, à rendre une allusion à une autre page du site cliquable. Là encore, l’idéal est que ce morceau de texte cliquable soit le titre de la page (que l’on retrouve dans le chemin de fer, dans le menu…)

Si un lien pointe vers un autre site, il faut le préciser. Utiliser pour cela l’info-bulle (attribut title) afin d’avertir votre internaute qu’il change de site. Cette information peut également être relayée par un pictogramme (comme le fais Wikipédia, par exemple au bas de l’article navigation).

Le plan du site

Le plan du site est indispensable, à mon sens, quel que soit l’étendue de votre site.
Il permet à l’internaute de se rendre compte du contenu d’un site dans sa globalité ; il permet à un moteur de recherche de trouver la totalité des pages d’un site.

Là encore, les items du plan du site doivent reprendre les libellés des titres de page.

Si la navigation utilise des couleurs, ces couleurs doivent être reprises dans le plan du site.

Pour en savoir plus sur le plan du site, consulter Concevoir un plan de site.

La page d’erreur

Même si on s’en passerait bien, la page d’erreur fait partie de la navigation d’un site.

Elle ne doit pas laisser l’internaute dans un cul-de-sac mais lui donner des éléments pour continuer de naviguer. Un lien vers la page d’Accueil est un minimum, une incitation à utiliser le moteur de recherche est une très bonne idée, une reprise du plan du site est indispensable.

Le moteur de recherche

La complexité du site imposera ou non la présence d’un moteur de recherche.

Conclusion

On le voit, les éléments de navigation d’un site sont nombreux et variés. Cela n’a rien d’étonnant le lien étant la particularité même du web. Pour autant, ces liens sont à traités de manière soignée et adaptée à leur fonction. Les principes vus ci-dessus s’appliqueront à chacun des éléments de votre navigation.

(1) D’après le mythe d’Ariane, le fil d’Ariane permet de repasser exactement par le chemin que l’on vient d’emprunter. Or un internaute n’emprunte pas forcément le chemin hiérachique des pages pour naviguer. Il peut également passer par des liens de contenu, le plan du site, etc. Le terme “chemin de fer” relaye l’idée que les items seront repris selon leur place dans l’arborescence du site.
Le fil d’Ariane correspond plus à “Vous êtes passer par…” et le chemin de fer correspond à “Cette page se situe…”. A vous de voir celui que vous souhaitez mettre en place.

Réflexions autour de la qualité web

Qu’est-ce que la qualité ?

Lorsqu’on l’on parle ici de qualité, il ne s’agit pas d’évaluer un “bon” ou un “mauvais” travail, mais l’on parle bien d’une qualité normative, industrialisable, mesurable.

Je vois un double aspect à la qualité pour le concepteur / réalisateur de sites web.

La qualité des développements web

La qualité des développements va permettre une exploitation facilitée et performante.
La mise en place de normes – et leur suivi – assurent la maniabilité des données puisque l’ensemble est construit sur une même modèle.
Les normes sont, bien sûr, choisies et appliquées selon des critères retenus en fonction des objectifs à atteindre.

La qualité du service web

L’autre aspect de la qualité web ne concerne plus la réalisation du site mais le résultat final : la qualité du service proposé à l’internaute. Tout cela est réuni sous la notion d’expérience utilisateur.
La qualité web vise une expérience utilisateur positive : que l’internaute trouve le service dont il a besoin, qu’il l’utilise facilement et plaisamment, enfin, que cette utilisation soit efficace.

L'expérience utilisateur selon Peter Morville
L'expérience utilisateur selon Peter Morville

Comment atteindre la qualité ?

Une liste de critères de qualité

La qualité reste une notion variable. La qualité a atteindre n’est pas la même en fonction des entreprises, des pôles, du public et des objectifs à atteindre.

La qualité est donc plus une notion à évaluer et à mettre en place au cas par cas. Néanmoins, pour pouvoir être travaillée, évaluée, communiquée, etc. elle doit être objective et mesurable.
Elle peut se traduire par une liste de critères.

Des listes différents peuvent être crées en fonction des profils qui vont les utilisés : règles d’hébergement, règles de développement, règles ergonomiques, règles graphique, etc.

Cette liste ou ces listes de critères peuvent être plus ou moins longues, plus ou moins facilement applicables, plus ou moins ancrées dans les habitudes des concepteurs et des développeurs.

La mise en place ne se fait donc pas de l’état 0 à l’état final. Les critères peuvent être classés selon leur “criticité”, leur facilité de mise en place, leur état (déjà appliqué ou non).

Ces listes évaluées sont ensuite utilisées pour avancer vers l’état final souhaité.

L’amélioration continue de la qualité

L’amélioration continue de la qualité web consiste à mettre des méthodes en place pour gérer les listes de critères de qualité.

Le but de cette amélioration continue n’est pas tant d’atteindre la qualité mais de tendre vers elle dans un cadre défini.

Ce cadre permet de savoir vers quoi on va, selon quelles exigences, comment on avance, etc. Cela permet également de communiquer (en interne, en externe) sur les efforts faits, les améliorations mises en place, les buts à atteindre.

L’amélioration continue de la qualité web est un chantier itératif où l’on peut traiter de l’existant comme les nouvelles pages, créer des listes de critères et appliquer les listes existantes, modifier ces critères en fonction de l’évolution du web, des exigences, des objectifs, des techniques, mettre en place de nouveaux réflexes, des nouvelles méthodes, etc.

Comment mettre en place l’amélioration continue de la qualité ?

Des hommes

Les premiers “leviers” à actionner pour mettre en place l’amélioration continue de la qualité des pages web sont les personnes amenés à intervenir sur les projets.

Il faut, bien sûr, qu’ils soient sensibilisés à la notion de qualité, à ce qu’elle représente ; ce qu’elle apporte et ce qu’elle coute.
Les notions d’amélioration continue et de chantier itératif sont clés pour bien comprendre les actions et méthodes qui seront mises en place pour la qualité.

Les objectifs (industrialisation des développements, expérience utilisateur mais aussi des objectifs spécifiques) doivent être compris.

Les moyens de sensibiliser les intervenants peuvent être :

  • la formation
  • les conférences
  • les blogs internes
  • les points d’avancement
  • les liens vers ce type de billet 😉
  • la machine à café

Les sujets sur lesquels sensibiliser sont multiples : la qualité et l’amélioration continue, l’accessibilité, les standards du web, l’ergonomie, l’expérience utilisateur, la rédaction web … ils sont aussi variés qu’il y a d’aspect à la conception et à la réalisation de pages web.

Des outils

e mémento des Bonnes Pratiques Opquast*
Mémento des Bonnes Pratiques Opquast*

L’outil auquel on peut penser immédiatement est Mon Opquast, puisque c’est un outil fait pour gérer l’amélioration continue de la qualité web mais également de se créer ses propres référentiels.

De nombreux outils existent qui permettent d’évaluer des éléments des pages web (extension Firefox, outils pour l’accessibilité, pour le référencement, etc.) Souvent, ces éléments se recouperont avec des référentiels de qualité web. Ils facilitent donc la mise en place de réflexes pour la qualité.

Un espace de “reporting” peut être un bon moyen de faire le suivi et de communiquer. Il peut prendre plusieurs formes (récapitulatif Mon Opquast, tableau partagé ou centralisé, billet régulier sur blog interne, etc.)

Enfin, on peut penser aussi aux “petits” outils mis à notre disposition pour présenter la qualité, la rappeler de façon simple. Je pense par exemple au Mémento des Bonnes Pratiques Opquast, à des cartes comme celle du W3C “Conseils pour faire des sites accessibles”, etc.

Conseils pour faire des sites web accessibles - Web Accessibility initiative
Conseils pour faire des sites web accessibles - Web Accessibility initiative

Conclusion

Prendre en considération la qualité et son suivi est donc une tâche itérative qui peut être, une fois mise en place, traitée de façon légère mais continue. En effet, un ensemble d’actions, même minimes, est efficace sur la durée.

L’étape à soigner est surtout la mise en place du chantier amélioration continue de la qualité, la sensibilisation des esprits, les outils et méthodes d’action et de suivi.

Liens :
Voir aussi :

* Mémento des Bonnes Pratiques dans sa version rouge… pas dans sa nouvelle version… moi, j’dis ça…
(hi hi hi)

Guide éditorial pour rédacteur web

Le métier de rédacteur web est un métier à part. Celui qui l’exerce doit avoir des compétences rédactionnelles, bien sûr, mais il doit aussi savoir s’adapter à son média si particulier : Internet.

Le rédacteur web doit également être capable de répondre aux attentes des autres intervenants de la conception de site web. Des notions d’accessibilité, de référencement, d’ergonomie sont indispensables (comme c’est d’ailleurs le cas pour tous les métiers d’interface).

Voici un guide rédactionnel pour le web.
Son but est d’aider le rédacteur web, élément par élément, à répondre aux spécificités du média. Pour cela, deux objectifs sont visés :

  1. Connaitre les règles de la rédaction web
  2. Comprendre les règles de la rédaction web

Le style éditorial

  • Utiliser un style rédactionnel simple
  • Faire des textes courts

L’écran (ou les synthèses vocales) font d’Internet un média où la lecture est plus difficile que sur papier.

Ces deux règles profitent à : l’accessibilité, l’ergonomie

L’organisation de l’information

  • Utiliser le principe de la pyramide inversée

L’internaute doit pouvoir trouver l’information principale très rapidement. Il faut donc mettre les contenus les plus importants et les arguments les plus marquants en début de texte et descendre au fur-et-à-mesure vers les précisions.

Ces deux règles profitent à : l’ergonomie, le référencement naturel

La rédaction des titres

  • Les titres doivent être compréhensibles hors-contexte
  • Les titres doivent être hiérarchisés et ordonner la page

Les internautes, en arrivant sur une page web, cherchent à savoir rapidement le contenu global d’une page.
Les titres sont une excellente manière de parcourir une page et de se faire une idée de son contenu. Visuellement, ils sont généralement mis en valeur et permettent de sauter de titre en titre.

La liste des titres d’une page est d’ailleurs un des points d’entrée de la synthèse vocale.

Les moteurs de recherche sont très attentifs à la titraille. Elle est pour eux un indice fort du contenu d’une page et donc de sa pertinence par rapport à la recherche d’un internaute.

De nombreux usages font que les titres d’une page web peuvent se retrouver isoler de leur contenu : flux RSS, résultats de recherche, liens directs à l’intérieur de la page…

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

L’emphase sur les mots-clé

  • Prévoir de l’emphase

De la même manière que les titres sont un repère pour l’internaute qui découvre une page, les mots importants doivent être mis en valeur pour servir d’accroche à l’œil qui parcourt la page.

Dans une moindre mesure que pour les titres, les moteurs de recherche y sont aussi sensibles.

L’emphase mise sur un mot sera relayée par de la couleur, de la graisse, de l’italique…

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

Les aides à la compréhension

  • Expliquer les abréviations

La règle de rédaction française dit qu’une abréviation doit être expliqueé, lors de sa première occurrence, directement dans le texte. Pour les occurrences suivantes, sur le web, l’explication peut apparaître en info-bulle au survol de l’abréviation.

Cette règle est à adapter en fonction de la complexité de l’abréviation et des usages.
“SNCF”, par exemple, n’est pas forcément à expliquer ; l’usage en est suffisamment répandu. L’abréviation “PTFR”, incompréhensible pour une majorité de personnes, n’est pourtant pas à traduire dans le cadre d’un intranet du groupe de travail qui à créé “PTFR”.
Parfois, c’est plutôt l’explication qui est obscure. Expliquer que “RSS” signifie “Really Simple Syndication” ne renseigne pas beaucoup. Il faut peut-être alors avoir plutôt recourt à un glossaire (voir ci-dessous).

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

  • Prévoir un glossaire

Faciliter la compréhension de vos textes en proposant un glossaire. Vous pouvez le prévoir en bas de page ou sur une page dédiée.

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

La langue

  • Indiquer et faire indiquer les changements de langue

Afin de pouvoir être bien compris, les mots, expressions et phrase dans une autre langue que la langue principale doivent être précisés au développeur qui intègre la page.

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

La rédaction des liens

  • Rédiger des liens explicites hors-contexte

Tous comme les titres et les mots en emphase, les liens sont des repères visuels sur lesquels l’internaute s’appuient pour parcourir la page.
Tous comme les titres, la liste des liens est un des points d’entrée lorsque l’on consulte une page à l’aide d’une synthèse vocale.

Le robot des moteurs de recherche utilise le libellé du lien comme un indice fort.

Cette règle profite à : l’accessibilité, le référencement naturel

  • Garder le même intitulé pour des libellés de liens pointant au même endroit.

Cette règle profite à : l’ergonomie, le référencement naturel

  • Différencier des liens similaires grâce à leur info-bulle

Dans certains cas, on voit des liens dont le libellé est le même alors que la destination est différente. C’est le cas typique des “Lire la suite”. Dans ce cas là, les titres peuvent être différenciés avec l’utilisation de l’info-bulle qui apparaît au survol du lien (exemple : Lire la suite de “Guide éditorial pour rédacteur web”).

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

  • Prévoir les informations supplémentaires

Dans tous les cas où le libellé manque de précisions, l’info-bulle permet de relayer ces informations sans apparaître directement dans le texte. Attention toutefois, tous les internautes n’auront pas le réflexe de survoler le lien pour y chercher des renseignements.

L’info-bulle doit toujours être plus longue que son libellé.

Cette règle profite à : l’accessibilité, l’ergonomie

Les aides rédactionnelles au téléchargement

  • Prévoir les informations techniques du téléchargement

Si un téléchargement est prévu, par exemple un PDF, il faut indiquer le format du document à télécharger, son poids, sa langue.

Ces informations doivent être présentes dans l’intitulé du lien et / ou dans son info-bulle. Pour des raisons de visibilité, elles peuvent également être reprises dans le texte, dans une zone à part…

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

La rédaction des éléments de tableau

  • Rédiger un titre pour le tableau

Le titre du tableau doit permettre à l’utilisateur de savoir immédiatement de quoi va parler le tableau.

Cette règle profite à : l’accessibilité, l’ergonomie, le référencement naturel

  • Rédiger un résumé du tableau qui explique son organisation

Le résumé du tableau n’apparaît pas directement dans la page. C’est une source supplémentaire insérée dans le code. Il doit indiquer, notamment pour les lecteurs d’écran, le contenu du tableau, son organisation, ses entêtes.

Cette règle profite à : l’accessibilité

  • Signaler les entêtes et pied-de-tableau

Chacune des entêtes de tableau doit être signalée car elles sont codées différemment. S’il y a un pied de tableau, il doit également être signalé au développeur.

Cette règle profite à : l’accessibilité, l’ergonomie

  • Donner un résumé pour chaque en-tête

Enfin, pour chaque entête, il est bon d’indiquer une version “raccourcie” du texte. Car les lecteurs d’écran reprennent, avant chaque cellule, le libelé de l’entête à laquelle elle se réfère. Ce texte répété régulièrement peut être remplacer par un résumé qui n’apparaîtra pas dans la page.

Cette règle profite à : l’accessibilité

Les compléments textuels des images

  • Prévoir l’alternative textuelles des images

Normalement, le rédacteur web n’a a s’occuper que des images de contenu. Les illustrations ou images décoratives prévues par le designer ne sont pas concernées. Pour les images de contenu, l’alternative est soit une courte phrase, soit un texte descriptif. Si l’image est un lien, l’alternative indique également la fonction du lien.

Exemples :
Pour le logo d’un site qui permet de revenir à l’accueil : “Nissone Veille – Retour à l’accueil”.
Pour un graphique : un texte expliquant la totalité du graphique.

Cette règle profite à : l’accessibilité, le référencement naturel

Le style rédactionnel des boutons

  • Utiliser des verbes

Qu’il s’agisse de bouton de formulaire ou de liens présentés sous forme de bouton pour inciter l’internaute à agir (les “call-to-action”), utiliser des verbes contribue à indiquer à l’internaute qu’il doit, lui, interagir et rappelle que quelque chose va se passer en réaction à son clic.

Cela peut être des verbes à l’infinitif ou à la première personne du singulier, selon le style rédactionnel retenu.

Cette règle profite à : l’ergonomie

L’organisation textuelle des formulaires

  • Réunir les items par groupes logiques

Pour faciliter la compréhension d’un formulaire, les items, s’ils sont nombreux, peuvent être répartis par groupes logique (exemple : adresse de facturation / adresse de livraison).

Il faut alors donner un titre à chaque groupe logique. Ce titre doit aider à comprendre dans quel contexte les champs du groupe doivent être remplis.

Cette règle profite à : l’accessibilité, l’ergonomie

Les règles typographiques

  • Prévoir et signaler les règles typographiques

Le web n’échappe pas aux règles typographiques (espaces de double ponctuation, quadratins…). Signalez-les et imposez-les au développeur web qui intègre vos textes.

Ce guide a été écrit à l’aide de mes connaissances d’intégration mais aussi en ergonomie, en référencement naturel et en accessibilité. Les sources suivantes sont celles dont je me suis aidée ou dont je vous recommande la lecture :

Voir aussi le Mémo Rédacteur web / intégrateur HTML qui fait suite à ce billet et qui reprend dans un tableau ces différents points pour le rédacteur comme pour l’intégrateur.

Faire de la veille

Six senses

Qu’est-ce que la veille ?

La veille, sur Internet, c’est de surveiller ce qui se passe, ce qui se fait, ce qui arrive et ce qui s’en va. Bref, se tenir au courant.

Pourquoi faire de la veille ?

Dès que l’on envisage des développements sur Internet, il faut tenir compte des contraintes du web, de ses particularités, de l’exigence des internautes et de leurs différences.

Or Internet est un support en perpétuel mouvement. Les innovations apparaissent aussi vite qu’elles disparaissent. Les technologies sont précises, exigeantes et changeantes.

Il est donc impératif de suivre les tendances, tant pour savoir vers quoi aller que pour pouvoir monter en compétence sur les techno d’avenir (ou non).

…Et puis bon, si un bon informaticien est un paresseux, un bon webmaster n’est-il pas un curieux ?! 😉

A qui profite la veille ?

Au marketing :

  • Savoir ce qui est possible, ce qui est faisable.
  • Savoir ce qui s’est déjà fait où qui se prépare et le faire avant la concurrence.
  • Offrir à l’internaute les services auxquels il s’attend ou, au contraire, qui vont le marquer (en bien, tant qu’à faire !)
  • Offrir à votre site une image de marque d’innovation

A l’ergonome :

  • Connaître les habitudes des internautes
  • Connaître le support : les configurations, les applications qui marchent ou ne marchent pas et dans quel cas

Au développeur :

  • Découvrir les nouvelles techno, les nouveaux langages et juger de leur pertinence.
  • Le cas échéants, apprendre des nouveaux langages

Au designer :

  • Voir ce qui se fait, trouver de l’inspiration ou des formes auxquelles on n’avait pas encore pensé

Etc. :

En fait, la veille profite à tous ceux qui travaillent sur Internet. Car chacun y trouve des informations sur l’actualité de son métier et des pratiques qui y sont liées.

Quelles méthodes pour faire de la veille ?

Une méthode critique, avant tout, car Internet est un média sur lequel on trouve tout : le meilleur et le pire.

  • Aller sur les sites d’actualités traitant des informations qui vous intéressent.
  • Voir ce qui se fait déjà, ce qui se profile et se qui tend à disparaître.
  • Se poser des questions, émettre des critiques.
  • Lire des argumentaires pour et contre.
  • Se faire son propre avis
  • Au fur et à mesure, repérer les lieux où l’on trouve des informations intéressantes et qui rentrent en résonance avec ses propres objectifs. Revenir sur ces sites régulièrement.

Où trouver les informations de veille ?

Les sites

N’importe quel site peut être une ressource intéressante. N’importe quel site peut nous aiguiller vers des pratiques à suivre ou à ne pas suivre.

Les blogs

La nature même du blog, géré via un moteur d’édition, en fait un support optimisé pour des mises en ligne fréquentes. La fraîcheur de l’actualité y est donc facilitée. La “blogosphère” est devenue un monde très vivant, très riche, très réactif où le savoir se partage rapidement et de façon très critique.

Un autre point très riche des blogs, ce sont les commentaires. On y trouve parfois des échanges qui sont encore plus intéressants que le billet qui les a suscités et qui n’a fait “que” de lancer le débat.

Un exemple parmi tant d’autres : HTML zen garden

Les réseaux

Les réseaux sociaux peuvent vous aider à rencontrer des personnes, garder le contact. Cette richesse est autant de sources d’information possible.

Les IRL

Ou “rencontres dans la vraie vie”. La conversation reste le moyen de communication peut-être le plus simple et celui où le débat, l’échange d’idées se fait le plus densément. De très nombreuses rencontres sont régulièrement organisées autour de tous les thèmes, dans toutes les régions, à toutes dates. Alors n’hésitez pas à aller aux trucCamp, ApéroTrucs, Truc Web 2008, etc. …Et créez les vôtres !

Un exemple parmi tant d’autres : Paris Web

…Les collègues !

Ils cumulent à eux seuls les avantages des réseaux et de “IRL”, les collègues sont une très bonne source puisque, en plus, …vous les voyez tous les jours !

Les newsgroups

Moyen pratique de recevoir les informations concernant un sujet dans sa boîte mail. Moyen pratique de rentrer en contact avec des gens.

Un exemple parmi tant d’autres : La liste Pompeurs-CSS

Les forums

Source permanente d’information, de problématiques, de solutions… les forums sont un lieu à ne pas oublier pour se tenir au courant. …Ils ne servent pas qu’à résoudre un problème à un instant T.

Un exemple parmi tant d’autres : Webmaster Hub

Le micro-blogging

Les fils de micro-blogging sont un moyen très simple de faire une veille “légère”. Les différents widgets qui y sont liés permettent d’avoir sous les yeux les nouveautés, en même temps que d’autres tâches. A nous de décider alors si l’on veut approfondir l’information.

Le plus difficile, là, sera de sélectionner les fils pertinents. 😉

Voir aussi à ce sujet : 26 services pour pratiquer la veille avec Twitter

Les sites de références

Quels que soient vos centres d’intérêt, votre compétence, il y a des sites de références pour vous.

Ils se reconnaissent à la qualité de leur contenu. Ce sont des sites à suivre régulièrement.

Un exemple parmi tant d’autres : Alsacréations

Quels outils pour faire de la veille ?

…Le temps ! L’outil le plus difficile à trouver et pourtant le seul vraiment indispensable à la veille !

Et bien sûr, les flux RSS. Ces petits fils d’actualité qui vous permettre de regrouper les nouveautés qui vous intéressent et un seul lieu et de faire votre veille en quelques clics. (Voir : RSS – Qu’est-ce que c’est ? Comment s’en servir ?)

Garder des traces de sa veille est également très utile. On peut, pour cela, utiliser des outils de gestion de favoris : via son navigateur ou via un outil en ligne;

Un exemple parmi tant d’autres : Blogmarks

Photo : «  Six senses » selon The Nickster (sous Licence CC by-sa)

La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

La barre « Web developper » est une extension du navigateur Firefox.
Très utile aux développeurs, elle permet de mettre en valeur rapidement et facilement toute une liste d’informations sur une page web.

Elle permet par exemple d’afficher tous les attributs « alt » ou « title » de la page. Elle permet de vérifier la validité d’un code en faisant appel au validateur du W3C. Elle permet de voir une page dans différentes tailles (800×600, 1024×768 ou taille au choix). Elle permet de désactiver le Javascript pour vérifier le comportement de la page. Elle permet encore de voir rapidement et sans intervenir sur le code une page sans faire appel aux fichiers de mise en forme.
Bien d’autres fonctionnalités sont à découvrir en fonction des besoins de chacun.

En savoir plus et télécharger : https://addons.mozilla.org/fr/firefox/addon/60


Initiation au HTML – Plan de l’article complet

Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)

Voir le code

Pour voir le code d’une page HTML :

  • depuis Internet Explorer :

    • clic droit > « Afficher la source »

    • ou Menu > « Affichage » > « Source »

  • depuis Firefox :

    • Ctrl + U

    • ou clic droit > « Code source de la page »

    • ou Menu > « Affichage » > « Code source de la page »

    Sur les deux navigateurs, utiliser ensuite Ctrl + F pour faire une recherche précise.


Initiation au HTML – Plan de l’article complet

Le W3C (Initiation au HTML – Annexe III)

Le Word Wild Web Consortium est un regroupement de personnes et d’organisation qui, ensemble, mettent au point les normes pour le développement web : les standards du web.


Initiation au HTML – Plan de l’article complet

Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)

Ouverture / fermeture

Une page HTML contient nécessairement certains éléments :

  • les balises qui indiquent que l’on va « parler » en HTML

<html>

</html>

Elles encapsulent la totalité du HTML.

  • la section qui contient les informations non affichées mais nécessaires au navigateur

<head>

</head>

Elles encapsulent des informations telles que le titre de la page, la description de la page, les mots-clé, l’encodage utilisé, la langue, la favicon, etc.

On y trouve aussi certains appels aux autres « couches » de la page : feuille de style, script Javascript, etc.

  • la section visible par le navigateur

<body>

</body>

C’est dans cette section que ce trouve tout ce qui peut être vu/lu par l’internaute ; tout ce qui s’adresse à lui.

Le doctype

Le doctype fait partie des éléments obligatoires sur une page HTML. Il indique quelle est la « grammaire » utilisée : la version de (X)HTML et le lien vers la grammaire en question, sur le site du W3C. Il se situe donc juste avant la balise qui indique le début de HTML.

Par exemple, de Doctype pour indiquer qu’on utilise du XHTML 1.0 Strict est :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


Initiation au HTML – Plan de l’article complet

Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)

XHTML a été créé pour permettre d’utiliser HTML en conformité avec un autre langage : le XML.
Les différences de syntaxe ou de structure entre XHTML et HTML sont minimes et concernent uniquement l’intégrateur.
D’un point de vue utilisateur, c’est totalement transparent.


Initiation au HTML – Plan de l’article complet

Le langage HTML (Initiation au HTML 3/5)

HTML et les autres éléments d’une page

La séparation des différents éléments

Une page web est un ensemble de « couches » d’éléments qui, combinés ensemble, font la totalité de la page : texte, design, fonctionnalités, interactivité, etc.
Chacun de ses aspects est traité indépendamment les uns des autres par différents langages.

La structure de l’information est gérée par le HTML.

La mise en forme (couleurs, typographies, emplacements des éléments, etc.) est traitée par les feuilles de style (CSS).

Certains comportements destinés à amener une « couche de confort » (ouverture dans une nouvelle fenêtre, apparition/disparition de texte, etc) sont traiter par le Javascript.

Enfin, dans le cas de traitement de données importantes (simulation en ligne, formulaire de demande, etc.), on utilise un langage de développement ; le PHP par exemple.

Le rôle du HTML : structurer le contenu

Le langage HTML est un langage de structuration : cela veut dire qu’il indique pour chaque information donnée dans la page, le type d’information dont il s’agit : paragraphe, lien, image, citation, adresse, etc.

A gauche, le contenu uniquement (HTML) – à droite, le même contenu mais avec la couche de mise en forme (CSS).
A gauche, le contenu uniquement (HTML) – à droite, le même contenu mais avec la couche de mise en forme (CSS).

Le code

Les outils

Les outils du développeur sont :

  • un éditeur. Cela peut être un simple éditeur de texte ou un logiciel type « WYSIWYG » : What You See Is What You Get.
  • dans l’idéal, des plateformes de test. Pour pouvoir tester ses pages dans différentes configuration
  • dans la plupart des cas, un logiciel FTP. Pour envoyer les fichiers créés à disposition sur le serveur, pour les mettre « en ligne ».

Un langage de balises

Le HTML est composé avec des balises. Les balises sont des éléments encadrant le contenu. Elles indiquent le type d’information donnée (titre, paragraphe, image, liste, etc). Elles permettent de structurer la page et d’indiquer le type d’information.

Ex :
&lt;p&gt;Cette balise indique un paragraphe.&lt/p&gt;

Ce qui donne, dans la page :
Cette balise indique un paragraphe.

Une balise HTML est un élément de la grammaire HTML (de la « langue » HTML). La balise marche par paire : une balise ouvrante, une balise fermante. Entre les deux balises, se place le contenu.

Aperçu du code de la même section de page
Aperçu du code de la même section de page

Les attributs

Une balise HTML indique donc le type d’information qu’elle délivre. La balise peut ensuite être « paramétrée » par des éléments supplémentaires : les attributs.

Par exemple, pour indiquer un lien, on utilise la balise <a>. Mais signaler que le texte qui est encapsuler dans la balise <a> est un lien ne suffit pas. D’autres renseignements sont nécéssaires, comme par exemple la cible du lien. On utilise alors les attributs de la balises : « href » pour la destination du lien, « title » pour le titre du lien (info-bulle).

Ex :

&lt;a href=”http://www.nissone.com/” title=”Conception de sites web”&gt;Nissone.com&lt;/a&gt;

Ce qui donne dans la page :

Nissone.com


Initiation au HTML – Plan de l’article complet