[Pense-bête] – Delphine MALASSINGNE https://articles.nissone.com Sun, 29 Jan 2012 13:46:03 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.7.1 Ressources de référence https://articles.nissone.com/2010/10/ressources-de-reference/ https://articles.nissone.com/2010/10/ressources-de-reference/#comments Mon, 18 Oct 2010 13:44:12 +0000 http://articles.nissone.com/?p=1301 Ressources (françaises) de référence pour se lancer, suivre et se perfectionner dans la conception, l’intégration, le design, etc. de sites web orientés qualité, standards, accessibilité, expérience utilisateur, etc.

Vos propres références sont les bienvenues en commentaire.

(et à propos de la veille : Faire de la veille)

Articles et billets

Outil

  • Projet Opquast – Gestion de la qualité
    #qualitéweb  #referentiel #bonnespratiques
    http://www.opquast.com

Communautaire

(forum, liste de diffusion, discussion, etc.)

Événements

  • W3Café
    http://france.w3cafe.org
  • Paris Web
    #conférences #ateliers
    www.paris-web.fr
]]> https://articles.nissone.com/2010/10/ressources-de-reference/feed/ 1 Mémo rédacteur web / intégrateur HTML https://articles.nissone.com/2008/11/memo-redacteur-integrateur/ https://articles.nissone.com/2008/11/memo-redacteur-integrateur/#respond Tue, 11 Nov 2008 08:17:56 +0000 http://articles.nissone.com/?p=385 Guide éditorial pour rédacteur web, voici un mémo reprenant les éléments de la rédaction web pour le rédacteur mais aussi pour l'intégrateur HTML.]]> Mémo rédacteur web / intégrateur HTML Rédacteur web Intégrateur HTML Style éditorial Faire court Faire simple Organisation de l’information Appliquer le principe de la pyramide inversée Les titres Compréhensible hors-contexte Hiérarchisés Utiliser les balises <h1> à <h6> Contribuent à organiser la page L’emphase Prévoir de l’emphase Utiliser les balises <strong> et <em> Les aides à la compréhension Prévoir les abréviations Utiliser les balises <abbr> et <acronym> (voir Abréviations, sigles et acronymes : balises, attributs HTML et accessibilité Prévoir un glossaire Utiliser les balises <dl> , <dt> et <dd> Langue Signaler les langues et les changements de langue Utiliser l’attribut lang de la balise <html> pour la langue principale du document Utiliser l’attribut lang dans la balise englobant un texte d’une langue différente de la langue principale.

Utiliser la balise <span> au besoin Les liens Compréhensible hors-contexte Un même intitulé pour des liens vers une même destination Utiliser l’attribut rel= »nofollow » pour qu’il n’y ait qu’un seul lien suivi par les moteurs de recherche Liens dont le libellé est le même différenciés par info-bulle Utiliser l’attribut title du lien Utiliser l’info-bulle pour des renseignements supplémentaires Les téléchargements Indiquer les informations techniques Utiliser éventuelement l’attribut title du lien Les règles typographiques Indiquer et imposer les règles typographiques Utiliser les espaces insécables (&nbsp;). Voir HTML Character Entities (en) Les tableaux Titre du tableau Utiliser la balise <caption>. Voir Au tableau ! pour la création de tableaux en HTML Résumé du tableau Utiliser l’attribut summary En-tête et pied de tableau Utiliser les balises <thead>, <tfoot> et <tbody> Résumé des en-têtes Utiliser l’attribut abbr Les images Ne traiter que les images de contenu Gérer les images illustrative et décorative via la feuille de style. Dans le cas d’une image présente dans le contenu mais n’apportant pas d’information, laisser la valeur de l’attribut alt à vide. Image-lien : indiquer la fonction du lien Utiliser l’attribut alt Alternative courte Alternative longue pour des images complexes Utiliser l’attribut longdesc Les boutons Utiliser des verbes Les formulaires Items réunis par groupes logiques Utiliser la balise <fieldset> Titres des groupes logiques Utiliser la balise <legend> ]]> https://articles.nissone.com/2008/11/memo-redacteur-integrateur/feed/ 0 Gabarit de tableau HTML https://articles.nissone.com/2008/11/gabarit-tableau-html/ https://articles.nissone.com/2008/11/gabarit-tableau-html/#respond Sat, 08 Nov 2008 14:04:48 +0000 http://articles.nissone.com/?p=401 <table summary= » »>
<caption></caption>
<thead>
<tr>
<td>&nbsp;</td>
<th id= » » abbr= » »></th>
</tr>
</thead>
<tbody>
<tr>
<th id= » » abbr= » »></th>
<td headers= » »></td>
</tr>
</tbody>
</table>

]]> https://articles.nissone.com/2008/11/gabarit-tableau-html/feed/ 0 Conception de site web – Planning https://articles.nissone.com/2008/06/conception-site-web-planning/ https://articles.nissone.com/2008/06/conception-site-web-planning/#respond Thu, 26 Jun 2008 16:50:39 +0000 http://articles.nissone.com/?p=159 Projet
  1. Écoute de la problématique ; écoute de la demande, des besoins, des objectifs, des résultats attendus
  2. Prise de connaissance de la cible, des produits, des contraintes, des moyens financiers, du calendriers
  3. Liste des produits, des services
  4. Questionnements sur la mise à jour : qui ? quel niveau technique ? quelle fréquence ? quels impacts ?
  5. Exigences de qualité : quel niveau ? quel suivi ? quelle fréquence ?

Mise en œuvre

  1. Anticipation des questions techniques : hébergement, nom de domaine
  2. Mise en place du calendrier, des intervenants, du coût
  3. Choix de la ligne éditoriale (ton, principe à mettre en avant, etc)

Réalisation

  1. Arborescence
  2. Charte graphique / Rédaction texte
  3. Choix de gabarits déjà existants ou développement de gabarits manquant à utiliser dans projet en cours et projets futurs
  4. Intégration / développement

Suivi

  1. Recette
  2. Tests / audits
  3. Mise en ligne
  4. Suivi de la qualité
]]> https://articles.nissone.com/2008/06/conception-site-web-planning/feed/ 0 Consignes rédactionnelles https://articles.nissone.com/2008/02/consignes-redactionnelles/ https://articles.nissone.com/2008/02/consignes-redactionnelles/#respond Fri, 22 Feb 2008 19:35:47 +0000 http://localhost/nissone-articles-3/?p=79
  • Faire simple

    Faire des phrases de préférence affirmatives, avec sujet-verbe-complément. La lecture a l’écran est difficile et bien moins fluide que sur papier.

  • Faire court
  • Utiliser le principe de la pyramide inversée

    La pyramide inversée, c’est le principe qui consiste à placer en haut les informations importantes et de détailler en descendant.

  • Appliquer la règle des « 5W »

    Les « 5W » sont les cinq questions auxquelles il faut répondre : « what », de quoi on parle ; « who », de qui on parle ; « where », où est-ce que ça se passe ; « when », quand est-ce que ça se passe et « why », pourquoi. On peut y ajouter deux questions : « how », comment et « how much », combien.

  • Faire des liens

    Les liens hypertexte sont la base même du web. Faire des liens externes pertinents enrichi votre contenu et donc la satisfaction apportée à l’utilisateur.

  • Rédiger des titres informatifs

    Contrairement au support papier, les titres sur Internet doivent être compréhensibles hors de leur contexte. En effet, la nature du web fait qu’ils peuvent se retrouver isolé du reste de la page (Flux RSS, résultat de recherche, etc.)

  • Soigner la titraille

    La titraille, c’est l’ensemble des titres, y compris la légende. Elle doit être équilibrée. Une titraille hiérarchisée est déjà une information pour le lecteur qui parcourt souvent la page plus qu’il ne la lit.

    • ]]>     https://articles.nissone.com/2008/02/consignes-redactionnelles/feed/ 0     La balise d’indexation <title> https://articles.nissone.com/2007/11/la-balise-dindexation/ https://articles.nissone.com/2007/11/la-balise-dindexation/#respond Tue, 06 Nov 2007 19:27:18 +0000 http://localhost/nissone-articles-3/?p=67
    • Balise très importante pour le référencement
    • Apparaît dans les résultats des moteurs de recherche
    • Titre différent sur chaque page et adapté au contenu : pour varier les mots-clé, pour que toutes les pages ne paraissent pas identiques dans un résultat de recherche.
    • Les mots-clé les plus importants au début
    • 60 carctères / une 10aine de mots environ
    ]]>     https://articles.nissone.com/2007/11/la-balise-dindexation/feed/ 0     robots.txt / balise « robots » https://articles.nissone.com/2007/11/robotstxt-balise-robots/ https://articles.nissone.com/2007/11/robotstxt-balise-robots/#respond Tue, 06 Nov 2007 19:25:32 +0000 http://localhost/nissone-articles-3/?p=65 Lire la suite »robots.txt / balise « robots »]]> Le fichier robots.txt

    Le robots.txt permet est destiné aux moteurs.
    Il permet d’autoriser ou non un moteur nommé (utile pour interdire les collecteurs de mails mais sachant que tous les robots ne respectent pas le robots.txt !).
    Il permet également de spécifié des pages à ne pas suivre (Les pages qui n’ont aucun intérêt pour le référencement ; les dossiers de scripts, de formulaire, par exemple). Il permet ainsi une économie en ressources.

    • Attention à la syntaxe et à la casse : c’est : robots.txt
    • Les robots sont le plus souvent sensible à la casse
    • Si les robots.txt sont destinés aux moteurs, ils sont lisibles par tous : ne pas y lister les répertoires cachés (il suffit de ne pas faire de liens dessus !)
    • Le robots.txt est unique et doit être à la racine du site
    • Ne pas sauter de ligne dans le fichier robots.txt
    • En cas d’absence de robots.txt (= si on veut que le moteur suive tous les liens, indexe tout), le moteur le cherche (ce qui entraîne, dans les logs, une erreur 404). Ne le trouvant pas, il ne perd pas son temps à l’analyser. On peut toutefois le mettre quand même si on veut « faire propre ».

    Exemple :

    # Commentaire
User-agent: *
# A quel moteur s'applique la règle. * = tous les moteurs
Disallow: /scripts/
# Interdit la visite à tout le contenu du répertoire scripts
Disallow: /membres/inscription.php
# Interdit la visite à la page inscription.php
# un groupe User-agent par moteur

    La balise meta robots

    • Elle n’est pas suivie par tous les robots ; privilégier le robots.txt
    • On doit la mettre sur toutes les pages du site !
    • Syntaxe :
      page indexée, liens suivis :

      • <metaname="robots" content="index, follow">
      • <meta name="robots" content="all">

      page indexée, liens non suivis :

      • <metaname="robots" content="index, nofollow">

      page non indexée, liens suivis :

      • <metaname="robots" content="noindex, follow">

      page non indexée, liens non suivis :

      • <metaname="robots" content="noindex, nofollow">
      • <meta name="robots" content="none">
    ]]>     https://articles.nissone.com/2007/11/robotstxt-balise-robots/feed/ 0     La balise d’indexation « keywords » https://articles.nissone.com/2007/11/la-balise-dindexation-keywords/ https://articles.nissone.com/2007/11/la-balise-dindexation-keywords/#respond Mon, 05 Nov 2007 19:22:51 +0000 http://localhost/nissone-articles-3/?p=63 Lire la suite »La balise d’indexation « keywords »]]>
  • Une importance très faible
  • Y mettre les mots absents du contenu et pourtant ayant un rapport, une pertinence avec le contenu (synonymes, anglicismes, …).
  • Mettre les mots dans l’ordre d’importance, les plus importants au début.
  • Utiliser les groupe de mots : « création de sites Internet » plutôt que « création, sites, Internet ».
  • Ne mettre les pluriels que s’ils différents de plus d’une lettre du singulier (ex. : cheval / chevaux).
  • Séparateur : espace ou virgule ou espace + virgule
  • Risque d’être considéré comme spammeur au-delà de 100 mots ou 1000 caractères (un caractère accentué vaut pour un) ;
  • Une 20aine de mots suffit.
  • L’utilisation de marques, de nom de concurrent est illégale.
  • A placer sous la meta « description ».
    • <meta name="keywords" content="" />
    ]]>     https://articles.nissone.com/2007/11/la-balise-dindexation-keywords/feed/ 0     La balise <textarea> https://articles.nissone.com/2006/02/la-balise-2/ https://articles.nissone.com/2006/02/la-balise-2/#respond Mon, 06 Feb 2006 19:34:03 +0000 http://localhost/nissone-articles-3/?p=77

    Les attributs rows et cols sont obligatoires et leur valeur doit être renseignée pour que la page soit valide.

    Si la feuille de style indique une hauteur et une largeur pour les textarea, elle prendra la main sur les valeurs indiquées par rows et cols. ]]> https://articles.nissone.com/2006/02/la-balise-2/feed/ 0 Validateurs https://articles.nissone.com/2006/02/validateurs/ https://articles.nissone.com/2006/02/validateurs/#respond Thu, 02 Feb 2006 19:28:39 +0000 http://localhost/nissone-articles-3/?p=69 Validateur HTML / XHTML

    Validateur CSS

    • Validateur W3C
      • page par page
      • en français
      • par : URL / fichier local / copié-collé

    Validateur RSS

    ]]>     https://articles.nissone.com/2006/02/validateurs/feed/ 0