internet

  • Comment réussir une campagne de mailing ?

    La campagne de mailing

    Voici quelques conseils pour réaliser une bonne campagne de mailing, notamment en ce qui concerne le choix du format du message et les contraintes techniques liées à son envoi, et surtout sa bonne réception...

    L'insoutenable légèreté de la lettre...

    Créer sa campagne de mailing

    Sommaire

    1. Les impératifs
    2. Les filtres anti-spam
    3. Ce que dit la loi
    4. Inciter les destinataires à lire votre message...
    5. Email html ou texte ?
    6. Mise en page CSS ou tableaux ?
    7. Quelques chiffres
    8. Les choses à éviter
    9. Dans la pratique...
    10. Et quelques astuces...
    11. En résumé...

    Personnel, ciblé, facilement traçable, malléable dans son contenu, l'e-mail est puissant. On l'envoie, il est reçu dans l'instant. Mais comme tout outil puissant, il requiert une éthique solide quand il est exploité commercialement.

    Marie-Cécile Paccard - Article "L'UX des newsletters" - Décembre 2016

    Les impératifs

    Une campagne de mailing réussie implique quelques obligations formelles et technique dont vont dépendre le succès de l'opération.

    Mailing Artek

    L'emailing doit comporter notamment les infos élémentaires d'envoi :

    1. Un objet (le titre de mail) : ex. « Promotion de Printemps ! »
    2. Un nom d'expéditeur (qui envoie le message) : « Prénom Nom » ou « La société »
    3. Une adresse d'expéditeur (l'adresse email utilisée pour l'envoi) : « »ou « »
    4. Une adresse de réponse : généralement c'est la même que celle de l'expéditeur mais ça peut être aussi celle du webmaster ou de votre secrétaire...

    5 - Une adresse de retour des erreurs : lorsque la BAL de votre destinataire est pleine ou n'existe plus, le serveur renvoie une réponse automatique de non-distribution. Cette adresse de retour des erreurs n'est pas nécessaire et évitez d'utiliser la même que celle de l'expéditeur : en cas de gros envoi (si vous avez acheté un fichier contenant plusieurs milliers d'adresses par exemple), les retours peuvent déferler dans votre BAL sans que vous puissiez les arrêter. L'idéal est de prévoir une BAL relais pour pouvoir les récupérer et les retirer ensuite de votre fichier d'adresses de départ (par exemple : « »). Dans le meilleur des cas, si vous sous-traitez votre envoi par un spécialiste (comme Emailstratégie ou Cabestan...), c'est le prestataire lui-même qui gère l'envoi et qui s'occupe du traitement et des rapports de statistiques.

    NB : La nombre de ces adresses «en erreur » est importante car elle influe sur les statistiques globales de l'envoi et leur collecte permet d'avoir une meilleure image des retombées de la campagne.

    › La personne qui reçoit votre message doit vous identifier tout de suite ou au moins saisir l'objet de votre envoi pour y prêter attention.

    En savoir plus :

    www.pompage.net/pompe/emails-html-dompter-la-bete
    www.commitstrip.com/fr/2013/02/27/confession-de-codeur


    Les filtres anti-spam

    1 - Les termes à éviter

    A la suite du développement exponentiel de l'utilisation des mails et des envois de courriers non-sollicités (spam ou pourriel), chaque fournisseur d'accès internet (Free, Orange, Numéricable, SFR...) et chaque service de mail en ligne (Hotmail, Yahoo !, Gmail, Voilà,...) à mis au point son propre filtre anti-spam. Du coup, certains termes ou expressions sont à bannir de contenu de votre mail dont les plus connus sont « viagra », « sexe », « piratage »... Mais certains, plus « basiques » le sont aussi, notamment en ce qui concerne les objets (ou intitulés) des mails : « gagnez », « économisez », « gratuit »... termes trop liés aux véritables spam et qui sont donc à utiliser avec précaution...

    De plus, certaines adresses sont également à bannir : « » ou « » sont à éviter et à remplacer par exemple « » ou « ».

    On peut avec l'habitude connaître les différentes erreurs à ne pas commettre dans la rédaction des intitulés et du contenu des courriers mais il existe une barrière supplémentaire totalement incontrôlable qui est la propre liste des mots bannis par les utilisateurs eux-mêmes qui peuvent créer leur propre filtre sur leur logiciel de messagerie. Par exemple, je reçois des courriers pour jouer au casino en ligne... Je mets en liste noire le terme « casino », et du coup, à titre d'exemple, je ne reçois plus les mails issus du site officiel de Casino-Cafétéria... Autre exemple, qui laisse songeur : les mails que je reçois du service client de Numéricable sont considérés comme du spam par le filtre anti-spam de la messagerie Numéricable...

    Malgré toutes les précautions de rigueur, il existera toujours un risque de produire des « faux positifs » («false positive » en anglais), c'est-à-dire le blocage ou le filtrage à tort des emails en provenance d'éditeurs ou de site web autorisés qui travaillent en respectant les règles en usage : on considère qu' entre 18 et 20 % des e-mails envoyés sont irrémédiablement perdus...

    › Même s'il est impossible de lister toutes les contraintes liées aux filtres anti-spam, on peut limiter leur impact en respectant quelques règles élémentaires que vous indiquera votre prestataire avant votre campagne.

    › Ces blocages ont une conséquence directe sur les statistiques de vos envois et on peu considérer raisonnablement que la plupart des campagnes d'emailing offrent des taux de réussite (ouverture du mail ou clics dans le corps du message) supérieurs aux chiffres finalement livrés par le prestataire.

    En savoir plus :

    http://fr.wikipedia.org/wiki/Spam
    www.arobase.org/spam

    2 - Les filtres anti-spam des Providers

    Les fournisseurs d'accès Internet incluant un service de messagerie (Orange, Free, Numéricable...) ou les fournisseurs de services en ligne (Google avec Gmail, Microsoft avec Outlook...) filtrent eux-mêmes déjà une grande partie du trafic mail vers les ordinateurs de leurs clients. Heureusement. Comme les spammers inventent sans cesse de nouvelles techniques pour contourner leurs filtres (et vous arnaquer via des techniques de « phishing » ou d'« hameçonnage »), ils doivent eux aussi se mettre constamment à niveau pour éviter l'engorgement de leur réseau et garder leur utilisateurs/clients. Il faut savoir qu'en 2016, 50 à 95 % des mails transitant par le réseau sont des spams (et environ 1% contenaient un virus). La plupart d'entre-vous le savent déjà.

    Un filtre antispam utilise un système de classification (score) complexe pour décider si un e-mail constitue ou non du spam. Ce genre de programme ne peut jamais trancher avec certitude, mais bien de façon approximative. En d'autres termes, un courrier indésirable peut parfois ne pas être identifié comme tel, comme un spam et, inversement, un « bon message » sera parfois qualifié à tort de spam. Grâce à l'apport de corrections, un filtre antispam sera finalement en mesure d'améliorer sans cesse son efficacité.

    Les filtres mis en place sont en fait des filtres « achetés » et installés sur les serveurs de mail par des sociétés spécialisées. Elles sont peu nombreuses et la plus importante est Message Labs, attachée à Symantec (citons aussi Ironport, racheté par Cisco - Postini, racheté par Google - Maildefend, de Kaspersky).

    Dans ses grandes lignes :

    • Le filtre vérifie si l'expéditeur n'est pas connu ailleurs comme un spammer (par exemple sur une liste noire).
    • Le filtre analyse le contenu et la ligne d'objet de l'e-mail à la recherche de mots souvent utilisés par les spammers.
    • Le filtre examine tous les éléments du mail, même les composants cachés comme les codes de mise en page d'un message HTML, l'origine de photos et les liens web inclus... (méthode heuristique)

    Dans le détail, ces filtres anti-spam sont constitués par la mise en œuvre de 2 méthodes différentes mais complémentaires :

    A – Le blocage des messages envoyés à partir d'une serveur de mail reconnu malveillant

    Les « listes noires » que Message Labs, et ses concurrents, établit chaque jour à partir de ses propres outils de prospection sur le réseau internet. En fait, ce n'est qu'une liste d'adresse IP de serveurs de mails reconnus comme spammeur. Dans les faits, Message Labs livre tous les jours à ses clients une « liste blanche », liste d'adresses de serveurs « autorisés ». C'est pour cela qu'un message considéré comme spam par Yahoo ! le sera aussi pour La Poste par exemple.

    En savoir plus :

    www.messagelabs.be/Default.aspx?culture=fr-FR
    La méthode heuristique - Article de Wikipedia

    Attention ! Sur les serveurs mutualisés, hébergeant plusieurs domaines donc, un webmaster peu scrupuleux peux créer son propre flux de spams et en retour blacklister toutes les adresses mails des domaines hébergés sur ce même serveur.

    B – Le blocage des message à partir de son analyse intrinsèque (méthode heuristique)

    Le système de filtrage heuristique effectue une série de tests automatiques sur le contenu du message (par exemple la longueur de code HTML qu'il contient, combien d'images, combien de références textuelles suspectes - viagra, sexe... - la cohérence de l'en-tête et du contenu du message, si le sujet est vide...). Chaque message est évalué et une note lui est attribué . Plus cette note est basse, mieux c'est. Pour Message Labs par exemple, si la note atteint ou dépasse 7, le message est considéré comme un spam. Les critères de notation sont bien sûr arbitraires et définis par l'administrateur système, si il existe. C'est aussi pour cela que certains spam "passent", mais une fois dénué de sens logique... et donc ininterprétable par ces filtres.

    D'autres méthodes existent mais ces deux réunies permettent de supprimer 90 % des spams en circulation (et que vous ne recevez donc pas...).

    Voici un exemple d'analyse heuristique délivré par Message Labs


    Voici un exemple d'analyse heuristique d'un mail par Message Labs :

    Nom du champ : X_Spam_Flag
    Type de données : Liste de chaînes
    Longueur des données : 7 octets
    Numéro d'ordre : 2
    ID d'élément en double : 0
    Indicateurs de champ :

    "YES"

    › Message de validation indiquant que ce message est diagnostiqué comme "honnête"

     

    Nom du champ : X_SpamInfo
    Type de données : Liste de chaînes
    Longueur des données : 31 octets
    Numéro d'ordre : 2
    ID d'élément en double : 0
    Indicateurs de champ :

    "spam detected heuristically"

    › Message de rejet indiquant que ce message est diagnostiqué comme "spam"

    Détails du diagnostic :

    Nom du champ : X_SpamReason
    Type de données : Liste de chaînes
    Longueur des données : 250 octets
    Numéro d'ordre : 2
    ID d'élément en double : 0
    Indicateurs de champ :

    "Yes, hits=7.4 required=7.0 tests=FROM_EXCESS_BASE64,
    HTML_90_100,HTML_IMAGE_ONLY_20,HTML_IMAGE_RATIO_02,HTML_MESSAGE,
    HTML_SHORT_LINK_IMG_3,HTML_TEXT_AFTER_BODY,HTML_TEXT_AFTER_HTML,
    MPART_ALT_DIFF_COUNT,SUBJECT_EXCESS_BASE64,UNPARSEABLE_RELAY"

    › Le ratio attribué à ce message est de 7.4, ce message est diagnostiqué comme "spam"

     


    Voici un autre exemple d'analyse heuristique proposé par OPenSPF :

    Content analysis details: (5.3 points, 5.0 required)

    pts rule name description
    --------------------------------------------------
    1.7 SUBJECT_ENCODED_TWICE Subject: MIME encoded twice
    1.4 SPF_SOFTFAIL SPF: sender does not match SPF record (softfail)
    [SPF failed: Please see http://www.openspf.org/why.html?sender=xxx]
    0.0 UNPARSEABLE_RELAY Informational: message has unparseable relay lines
    1.1 HTML_IMAGE_ONLY_32 BODY: HTML: images with 2800-3200 bytes of words
    0.5 HTML_IMAGE_RATIO_02 BODY: HTML has a low ratio of text to image area
    0.1 HTML_90_100 BODY: Message is 90% to 100% HTML
    -2.6 BAYES_00 BODY: Bayesian spam probability is 0 to 1% [score: 0.0000]
    0.0 HTML_MESSAGE BODY: HTML included in message
    1.7 DNS_FROM_RFC_POST RBL: Envelope sender in postmaster.rfc-ignorant.org
    0.4 SUBJECT_EXCESS_BASE64 Subject: base64 encoded encoded unnecessarily
    1.3 FROM_EXCESS_BASE64 From: base64 encoded unnecessarily
    -0.3 AWL AWL: From: address is in the auto white-list

    › Message détaillant les résultats de l'analyse : le ratio attribué à ce message est de 5.3, ce message est diagnostiqué comme "spam", notamment parce qu'il ne contient pas beaucoup de texte et que le ratio texte/image est trop élevé.

    3 - Les filtres anti-spam personnels

    Chaque système de messagerie en ligne permet de créer sa propre grille de filtrage ainsi que les logiciels de messagerie (Outlook pour PC, Mailpour MAC,...). Ce système au coup par coup n'évite pas les ruses des spammeurs. Les plus connues concernent le terme « viagra » qui au fil de temps « mute » : viagravi@grav1@grav1@gr a ›... Difficile de lutter...

    › Cela montre qu'à chaque instant un mail honnête peut se retrouver étiqueté « spam » sans que l'on puisse y faire grand chose.

    › A chacun de connaître au moins les règles de base pour limiter les risques : en-tête pertinent, un minimum de contenu textuel, un lien « si vous ne visualisez pas.. » pointant vers un domaine sûr, attention particulière portée sur les termes employés (argent, gagnez, profitez,... qu'il faut traiter en image plutôt qu'en texte s'ils font partie de l'en-tête du message...)

    En savoir plus :

    http://fr.wikipedia.org/wiki/Anti-spam

    Lutter contre le spam...


    Inciter les destinataires a lire votre message

    Clavier touche mailRappelez-vous que presque la moitié de vos destinataires utilise peut-être un petit panneau de prévisualisation pour décider si votre email vaut le coup d'être consulté. Les panneaux de prévisualisation permettent à vos destinataires d'échantillonner un bout de votre email avant de décider de l'ouvrir et de le lire entièrement. Un certain nombre de vos destinataires liront même tous leurs emails dans ce panneau de prévisualisation et ne les ouvriront jamais complètement.

    Il est donc important de bien concevoir le haut de votre courrier en y faisant figurer votre logo ou une image qui permet de vous identifier immédiatement et de faire figurer un court descriptif du contenu de votre courrier. Typiquement : « Newsletter de votre entreprise – Juin 2016 – N°07 »... Et d'avoir une accroche pertinente et incitative : « Découvrez nous nouvelle promotion de l'été... », « Envie de vous évader avec Notre Entreprise ? »...

    Le mail doit inviter votre destinataire à en savoir plus que ce que contient votre mail et donc le mener à faire une action supplémentaire : aller sur votre site, répondre au mail, remplir un formulaire, vous rendre visite...

    › Votre mail n'est qu'un prétexte qui doit amener une réponse de la part du destinataire.


    Ce que dit la Loi

    Désormais, la loi encadre la pratique du mailing et le principe introduit par la directive européenne a été transposé en France par la loi du 21 juin 2004 pour la confiance dans l'économie numérique et figure désormais à l'article L.34-5 du code des postes et des communications électroniques, repris à l'article L.121-20-5 du code de la consommation :

    « Est interdite la prospection directe au moyen d'un automate d'appel, d'un télécopieur ou d'un courrier électronique utilisant, sous quelque forme que ce soit, les coordonnées d'une personne physique qui n'a pas exprimé son consentement préalable à recevoir des prospections directes par ce moyen. »

    C'est ce que nous appelons le « Opt-in » ou « Abonnement », chaque personne a donné son accord pour recevoir le mail soit parce qu'il a remplit le formulaire adéquat sur votre site (« Abonnez-vous à la newsletter », « en remplissant de formulaire, vous accepter de recevoir des courrier de notre part »...)
    Les Américains préfèrent eux le « Opt-out » ou « Désabonnement » : on peut recevoir des courriers non-sollicités mais il faut impérativement que vous puissiez vous désabonner de ce mailing.

    La législation française actuelle met en avant les principes des droits à l'information et droit d'opposition. La loi pour la confiance dans l'économie numérique (LEN) du 21 juin 2004 et la précision, faite par la CNIL lors de la séance du 17 février 2005, sur son interprétation reprend l'approche « opt-in » dans le cadre de communication à destination de particulier et l'« opt-out » dans le cas d'email de prospection à destination des professionnels.

    Il est conseillé aussi de mettre dans votre mail les raisons qui font ont amené à envoyer le mail à votre destinataire :« vous avez reçu ce mail car vous êtes abonné à la newsletter du site www.votre-entreprise.com », « vous recevez ce mail car vous êtes client de notre service... »

    Il est conseillé aussi de rappeler les conditions légales qui régissent votre envoi vis-à-vis de la CNIL :

    Dans tous les cas, même une personne qui s'est abonnée volontairement à votre newsletter ou qui fait partie de votre base client... doit pouvoir se désabonner. A vous de choisir la solution qui vous convient : une procédure automatique (lien «cliquez ici pour vous désinscrire»), ou une procédure plus lourde («Pour vous désabonner, rendez-vous dans votre espace abonné et modifiez les paramètres attachés à votre compte...»).

    Exemple de message de rappel inséré dans le corps de l'email :

    Ce courriel commercial est conforme à la législation en vigueur et aux délibérations de la CNIL des 22 et 30 mars 2005 sur la prospection par courrier électronique dans le cadre professionnel. Conformément à l'article 34 de la loi 78-17 du 6 janvier mille neuf cent soixante dix huit, relative à l'informatique, aux fichiers et aux libertés, vous disposez d'un droit d'accès, de rectification des données nominatives vous concernant. Si vous ne souhaitez plus recevoir d'informations commerciales de notre société par e-mail, merci de nous l'indiquer (suit généralement une adresse mail pour contacter le responsable du site internet ayant envoyé le mailing).

    Loi n° 78-17 du 6 Janvier mille neuf cent soixante dix huit, relative à l'informatique, aux fichiers et aux libertés : Toute personne physique a le droit de s'opposer, pour des motifs légitimes, à ce que des données à caractère personnel la concernant fassent l'objet d'un traitement. Elle a le droit de s'opposer, sans frais, à ce que les données la concernant soient utilisées à des fins de prospection, notamment commerciale, par le responsable actuel du traitement ou celui d'un traitement ultérieur. Les dispositions du premier alinéa ne s'appliquent pas lorsque le traitement répond à une nécessité légale ou lorsque l'application de ces dispositions a été écartée par une disposition expresse de l'acte autorisant le traitement La publicité par voie électronique

    Art 38 : Toute personne physique a le droit de s'opposer, pour des motifs légitimes, à ce que des données à caractère personnel la concernant fassent l'objet d'un traitement. Elle a le droit de s'opposer, sans frais, à ce que les données la concernant soient utilisées à des fins de prospection, notamment commerciale, par le responsable actuel du traitement ou celui d'un traitement ultérieur. Les dispositions du premier alinéa ne s'appliquent pas lorsque le traitement répond à une obligation légale ou lorsque l'application de ces dispositions a été écartée par une disposition expresse de l'acte autorisant le traitement. Cet e-mail vous a été envoyé par XXX qui peut être amenée à recourir à ses sociétés affiliées afin de vous fournir ses services.

    › Votre envoi doit respecter le principe d'honnêteté et de pertinence.

    › Il est recommandé d'inséré un lien de désinscription en un clic unique dans la corps de votre mail, généralement en bas de page.

    En savoir plus :

    http://www.cnil.fr/?id=1277
    http://www.cnil.fr/index.php?id=1532

    A ce sujet, certains prestataires proposent une étape supplémentaire lors de la procédure de désinscription pour tenter d'en connaître la cause. Par exemple, un formulaire invite le destinataire à préciser les raisons qui l'amène à se retirer de la liste de diffusion comme dans le cas de WEWMANAGER de la société Emailstrategie@ :

     

    Wewmanager / Emailstrategie : panneau de désabonnement de la newsletter

     

    Cette pratique est assez efficace car les destinataires y répondent souvent (ici d'ailleurs, ils n'ont pas le choix...), et elle permet surtout de mieux juger de la perception réelle qu'ont les destinataires du message reçu (ici, c'est un vrai sondage)... et du sort qu'il lui réserve...


    Email HTML ou texte ?

    On peut considérer qu'il y a deux grandes catégories de format pour les emails :

    • Les emails en texte brut (qui ressemble au texte que l'on tape dans Bloc-Note par exemple)
    • Les emails au format l'HTML qui sont agrémentés de textes, en couleurs, d'images, de logos animés.

    La tendance est de faire des emails au format l'HTML qui ont bien sûr plus d'impact sur les destinataires grâce à leur qualité visuelles. Attention ! Il faut cependant ne pas considérer un email comme une page web car de nombreuses caractéristiques de ce type de pages ne sont pas prises en compte par les logiciels de messagerie.

    Dans de nombreux cas, les destinataires consulteront leur email en ligne via des services de messagerie assez rustiques comme l'ancienne version de « Free » qui n'offre pas la possibilité d'afficher les email au format html dans leur forme enrichie. Dans ce cas, c'est la version texte qui est affichée par défaut, si vous l'avez prévue...

    › Il est conseillé de coupler les 2 versions (texte et html) pour obtenir une campagne réussie.


    Mise en page css ou tableaux ?

    Il y a deux possibilités pour construire les pages HTML complexes qui constitueront votre message :

    • en utilisant des tableaux : la page est un tableau contenant des cellules que l'on remplit par le contenu désiré : un titre ici, une image là... Cette méthode est la plus simple et la plus rapide à mettre en œuvre. Tout le code se trouve sur la page.
    • Les Css sont des feuilles de styles qui mettent en forme les différents élément de votre page : un style de police pour le titre, un autre pour le texte, une bordure de telle couleur autour des images... Ces Css se généralise peu à peu pour la construction des pages web et on peut aussi les utiliser pour les emails même si elles sont parfois mal « interprétées » par les logiciels de messagerie. Surtout, ces Css ne peuvent pas se trouver dans la code de l'email mais être « appelée » de l'extérieur : la feuille de style se trouve obligatoirement sur un serveur web.

    Contrairement à la croyance populaire, des emails en CSS et intégralement sémantiques sont non seulement possibles mais largement supportés dans la majorité des environnements de gestion de courriers électroniques (Mail de Mac peut lire directement de la vidéo intégré au message comme "pièce-jointe" par exemple...). Mieux, si vous rédigez correctement vos CSS, votre email peut se rabattre sur une version texte riche de votre message tout à fait utilisable par ceux qui disposeraient d'un faible support CSS.

    On peut coupler les 2 solutions : le html pour avoir uns structure globale robuste (supportée par la plupart des logiciels de messagerie) agrémentée de styles qui permettent par exemple une plus grande variété de police de caractère sans que le rendu final, selon les plate-formes, ne soit dégradé ou corrompu.

    › Il est recommandé d'inséré un lien « si vous ne visualisez pas correctement ce mail, cliquez ici... »menant à la version html du mail sur un serveur dédié (votre site web), généralement tout en haut de votre courrier.

    Aujourd'hui, décider si vous voulez jouer la carte des CSS ou vous replier sur les tableaux et les styles en ligne renvoient à l'époque où vous deviez décider si vous vouliez supporter Netscape ou non. Certains clients l'exigeront, tandis que d'autres réalisent qu'il est temps d'aller de l'avant.

    Si vous êtes malchanceux et que le PDG utilise Lotus Notes mais veut que le design de l'email s'affiche partout de la même manière, tableaux et styles en ligne vous attendent. Si vous arrivez à expliquer à votre client à quel point certains clients emails sont défectueux, et que votre design sera accessible à tous tout en se dégradant en vers une mise en page plus simple pour certains, les CSS sont par contre envisageables.

    En savoir plus :

    http://a-pellegrini.developpez.com/tutoriels/xhtml-css/tableaux/

    Concevez pour le cas où les images sont désactivées

    Par défaut, n'importe lequel de vos destinataires qui utilise AOL, Outlook et Gmail ne verra jamais les images dans les emails que vous lui enverrez. Pour certaines campagnes grand-public, cela peut représenter au moins la moitié de tous les gens concernés par votre envoi.

    Les images sont parfois bloquées et que cela affectera l'apparence de votre email - mais les images bloquées ne sont en aucun cas un obstacle définitif. Vous n'avez qu'à suivre quelques directives simples quand vous concevez votre email, et vous oublierez que la désactivation des images n'ait jamais été un problème :

    N'utilisez pas les images pour des contenus importants comme les commandes d'action, les titres et les liens vers votre site web.

    Fournissez un texte alternatif pour toutes les images (qui sera visible dans certains environnements de gestion d'email, surtout Gmail).

    Nous avons tous des boîtes de réception pleines d'emails et si vous êtes comme moi vous avez tendance à supprimer sans remords les emails d'origine incertaines. Si votre design n'attire pas l'attention de votre destinataire avec un contenu pertinent et intéressant en une ou deux secondes, il n'a probablement aucune chance d'être retenu et consulté.

    Chaque environnement de gestion d'email attribue des superficies différentes à leur panneau de prévisualisation, mais, quelle que soit la solution utilisée par votre destinataire, essayez de vous assurer des points suivants :

    • Une construction de votre message en tableau et ne dépassant pas 600/680 px de largeur.
    • Eviter d'utiliser des images au format PNG qui n'est pas supporté par Lotus notamment.
    • Insérer un élément signifiant (logo, image, slogan...) qui vous identifiera et attisera même l'intérêt tout en haut de votre email, et de préférence à gauche. Il pourrait s'agir d'un résumé du contenu de l'email ou au moins du nom de votre société/organisation.
    • Vérifiez vos rapports après chaque envoi d'email pour voir ce qui intéresse le plus les gens et essayez de le rendre visible dans l'espace du panneau de prévisualisation dans le prochain email.
    • Assurez-vous aussi de créer une version de votre message en texte brut, dans Bloc-Note ou TextEdit(au format ".txt"), afin que votre message soit visible par tous les destinataires par défaut. Cette fonction est toujours disponible pour les applications dédiées. Votre message est alors traité au format multipart(standard MIME permet de définir des messages composites, c'est-à-dire des messages comportant plusieurs pièces jointes, éventuellement emboîtées).

    En savoir plus :

    http://www.commentcamarche.net/contents/courrier-electronique/mime.php3

    › Respecter les règles de construction de vos mails et veiller au nommage pertinent des images qu'il contient pour que même non affichées elles puissent être « parlantes » pour vos destinataires : la balise "alt" est absolument à renseigner.

    Le rendu final du message...

    Vous serez finalement très surpris des différents rendus observés suivant les systèmes de messagerie utilisés par le destinataires finaux. Suivant les cas, il faut prévoir "large" comme dans le cas de campagnes à destination des publics professionnels (entreprises, grands groupes...) qui utilisent assez fréquemment Lotus Notes. Voici un exemple résumant les différences flagrantes que l'on peut constater entre Lotus 7 et Mail de mac. Comme on le sait, "une image vaut mieux qu'un long discours"...

    Comparaison de message entre Mail de Mac et Loturs Notes

    › Cliquez sur l'image pour l'agrandir

    En savoir plus :

    http://24ways.org/2009/rock-solid-html-emails

    http://www.emailing.biz/actus/7-exemples-emails-ouverts-mobile/


    Quelques chiffres

    Si vous envoyez des emails B2B («Business to Business«, c'est-à-dire d'entreprise à entreprise), il est sans danger de présumer que la plupart de vos destinataires utiliseront Outlook (environ 75%) ou Lotus Notes (9%). Le support des CSS par Outlook est excellent mais celui de Lotus est déplorable.

    Si vous vous occupez d'un envoi B2C (NdT : «Business to Consumer«, de l'entreprise vers le consommateur), vous devriez vous attendre à Yahoo!, Hotmail et AOL. Si vous ciblez des utilisateurs friands de nouveautés, vous devriez aussi tenir compte de Gmail (bien que vous devriez être avertis que Gmail n'est pas aussi populaire que vous le pensez et oscille toujours à seulement moins de 5% du marché des emails Internet).

    Pour vous rendre les choses plus faciles, voici un rapide résumé des clients emails courants qui supportent l'approche CSS, et de ceux qui se basent sur les tableaux et les styles en ligne pour afficher votre message comme désiré.

    Les logiciels de messagerie les plus courants :

    • Outlook et Outlook Express
    • Lotus Notes
    • Thunderbird
    • Mail de Mac

    Je réitère ce point parce qu'il me semble particulièrement important. Ne soyez pas honteux si vous êtes forcés à emprunter la voie des tableaux et des styles en ligne. Comme je le mentionnais plus haut, le support des CSS par les clients emails aujourd'hui va du parfait au quasi non-existant. Si votre client exige une homogénéité de votre design pour tous les destinataires, vous n'avez vraiment aucune autre option.

    Pour mémoire, voici les chiffres fournis par le site "emailclientmarketshare.com"pour juin 2016

    1. Apple iPhone : 33% (+0.54)
    2. Gmail : 16% (+0.37)
    3. Apple iPad : 11% (-0.49)
    4. Google Android : 9% (-0.21)
    5. Outlook : 7%(-0.16)
    6. Apple Mail : 7%(-0.5)
    7. Outlook.com : 5% (+1.74)
    8. Yahoo! Mail : 3% (-0.02)
    9. Windows Live Mail : 1% (-0.09)
    10. Windows Mail : 1% (-0.05)

    En savoir plus :

    www.campaignmonitor.com (en.)


    Les choses à éviter

    Que l'on utilise ou non les CSS pour la mise en page de votre mail, il y a des choses à bannir définitivement.

    - Les animations Flash sont médiocrement supportées par la plupart des logiciels de messagerie et il est préférable, si l'on veut mettre un peu d'animation dans le corps de votre message, d'utiliser des « gif animés » qui eux sont bien pris en compte. Et de toute façon, ce format est désormais condamné...

    - Les effets dynamiques de type JavaScript (lien vers fenêtre ouvrante « pop-up », images réactives au passage du pointeur,... ) sont désactivés par défaut sur le plupart des logiciels de messagerie pour des raisons évidentes de sécurité (en l'occurence, l'exécution de scripts malveillants). On peut cependant mettre des lien « normaux » vers des page html qui se trouvent alors sur le serveur dédié ou au sein de l'arborescence de votre site (typiquement, dans le cas ou l'on souhaite visualiser une version agrandie d'une image ou pour visualiser une fiche spécifique...).

    - Les formulaires : il est déconseillé de mettre dans la corps de votre mail un formulaire de contact qui souvent ne sera pas fonctionnel si le traitement de ce formulaire se trouve sur la page elle-même. On peut cependant les mettre en œuvre à la condition que le traitement des données du formulaire se fasse en dehors du message proprement dit (typiquement, un fichier Php qui doit insérer les données recueillies dans une base de données ou générer l'envoi d'un mail contenant ces données au responsable de la campagne par exemple).

    NB : il n'y aura aucune manière de faire les vérifications d'usage pour vérifier la véracité des données recueillies (le nom de la personne ou son numéro de téléphone...) ou la validité du format des données transmise (si l'adresse mail comporte bien un « @ » ou si le numéro de téléphone ne comporte bien que des chiffres...)


    Dans la pratique...

    Avec l'emailing, vous maîtrisez dans le temps l'action et la réaction de vos destinataires.

    L'emailing soulèvent beaucoup d'incertitudes. Contrairement à la plupart des autres médias de diffusion de masse, vous pouvez contrôler de façon précise à partir de quel jour et de quelle heure votre destinataire va pouvoir consulter votre mailing ou votre lettre d'information. Avec les statistique asociées aux campagnes, vous aurez une vision globale ettrès fine de l'impact de votre campagne : nombre d 'ouverture, nombre de clics, taux de chut, NPAI, désabonnés...

    Votre lettre d'information s'adresse à des professionnels.
    L'indice de pénétration sera meilleur (taux d'ouvertures plus élevé, taux de clics plus important) en faisant partir vos campagnes en début de semaine (lundi après-midi, mardi ou mercredi). Dans ce contexte, l'indice de pénétration concerne non seulement l'indice de consultation (ouverture, clic sur un lien) mais aussi l'indice de réactivité... Même si un envoi, en début d'après-midi, le vendredi, peut se révéler judicieux... (Oui, au bureau, on consulte ses derniers mails avant de partir... en week-end...).

    Si votre lettre d'information s'adresse à des consommateurs.
    Les règles ne sont pas aussi claires. Plusieurs facteurs rentrent en ligne de compte. Tout comme dans le cas de professionnels, les taux d'ouvertures les plus importants ont lieu dans les 48h qui suivent l'envoi de la campagne, mais les 72h suivantes présentent aussi des taux non négligeables.

    NB : éviter de lancer une campagne de mailing le vendredi pour que vos destinataires ne retrouvent votre message le... lundi matin, noyé parmi tant d'autres...


    Quelques astuces

    Mailto...Depuis 2012, certains clients de messagerie se révèlent un peu "capricieux"... Pour les nommer : Yahoo!, Outlook et Gmail...

    Évidemment, ces messageries sont actuellement devenues incontournables et il suffit de manipuler de gros fichiers d'adresses mail pour voir leur importance...

    En fait des bugs d'affichage apparaissent dans certains mails enrichis (format html + tableaux + images), essentiellement sous Firefox lors des consultation des mails en ligne... Bref, encore un truc de puriste ! Mais, puisque nous devons quand à nous réaliser une campagne d'emailing "parfaite", dans la forme et dans le fond, il devient difficile d'ignorer ce problème !

    Pour les professionnels de la profession, les spécialistes du mailing de masse, il a fallu tâtonner un peu avant de trouver les corrections nécessaires qui se révèlent d'ailleurs être plus des "patch" que des solutions définitives... et qui se révèlent d'ailleurs contradictoires avec les recommandations décrites ci-dessous... Oui, par delà l'aspect anecdotique de ces petites astuces de codage, il semble que l'usage de ces solutions offrent un bon compromis sans pour autant entraîner de problèmes supplémentaires.

    Les deux problèmes majeurs et commun à Yahoo!, Outlook et Gmail sont liés à l'affichage des images, la coloration des liens hypertextes et la traitement de la balise <p> dans le corps du mail comme dans l'exemple ci-dessous.

    1. Pour les construction de la page mail en html et donc avec un structure en tableaux et des visuels découpés en plusieurs images individuelles, les images normalement "jointes" (l'une après l'autre dans le sens de la hauteur) laissent apparaître un écart, un gap d'environ 10 pixels de hauteur... Malédiction !
    2. Les liens hypertextes reprennent leur couleur bleue par défaut, comme au bon vieux temps ! Pas très esthétique pour une construction voulue comme telle !
    3. Yahoo! Mail semble ne pas reconnaître la balise <p> (?!) et ne fait donc pas d'interlignage standard (un espacement vide qui pourrait contenir une ligne de texte) mais un simple "retour-charriot", sans espacement... Surprenant et pas cool effectivement.

    Exemple de divergences des rendus visuels d'un email consulté en ligne dans Gmail et Yahoo! Mail... :

     

    Exemple des différents rendus des message dans Gmail et Yahoo! Mail...

    Du nouveau !

    Heureusement, aujourd'hui, vous pouvez vous reposer sur les prestataires de gestion de campagne pour créer rapidement et efficacement vos messages destinés à être envoyer par mail.

    Emailstrategie, Mailchimp, Sarbacane propose des gabarit de page prêt à l"emploi voir même directement modifiable via des techniques de drag-and-drop qui rendent la création de vos messages simple et même ludique... Mailchimp entre les autres prestaires proposent de tester sa plateforme en mode Découverte avec un nombre limité de destinataires (2000), ce qui est déjà pas mal pour se faire la main...

    Attention quand même à ne pas trop intervenir sur ces modèles souvent très strictement structurés au niveau de leur code source au risque de perdre leur nature responsive en alourdissant le code de styles CSS inutiles... je vous conseille de faire des tests sur un premier gabarit et une fois le résultat final atteint après vos multiples essais de reprendre votre création à partir d'un nouveau modèle vierge. Si vous êtes plus à l'aise avec le CSS, intervenez directement dans le code source qui reste accessible et manipulable...

    Modèle de mail par Mailchimp


    Alors que faire ?

    La couleur des liens et du soulignement :

    Dans le cas d'Outlook de Microsoft et de GMail de Google, la balise "color" est à déclarer deux fois : une première déclaration "font-color"qui sera comprise entre les deux balises "href" et encadrant la mention du lien et une autre en "css" qui doit être déclarée à l'intérieur de la balise "href" du lien comme ceci :

    <a href="http://www.mon-site.fr" style="color:#ffcc00"><font color="#ffcc00">Intitulé du lien</font></a>

    Cassure des images sur GMail et Outlook :

    Les images doivent être toutes fixées au niveau de la balise <img src="/.."> avec l'ajout du code style="display:block;"... Il doit être présent pour toutes les images de la page de mailing :

    <img src="/img-03.gif" style="display:block;" width="600" height="200">

    La mis en page dans Yahoo Mail :

    Il faut éviter d'utiliser des balises de mise en page en mode "paragraphe". Les balises <p> et </p> ne sont pas reconnues avec Yahoo. A la place, il faut utiliser des retours à la ligne <br />... et donc intégrer deux "<br>" pour générer l'espacement généralement créé par la balise <p> standard. De toute façon, comme on est en Html, seules la taille, la police (font-family) et la couleur sont à déclarer :

    <font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">Pas de surco&ucirc;t sur les prestations h&ocirc;telli&egrave;res<br>Inclut la visite de la ville en cal&egrave;che</font>

    Hotmail de Microsoft est devenu Outlook en 2013. On connaît les nombreux soucis sur votre boîte mail en ligne (affichages aberrants, promptitude à classer en spam des mails qui arrivent normalement ailleurs...). Avec Outlook, la techno employée est devenu plus pointue et les problèmes - surtout d'affichage - se sont aggravés... Notamment pour le rendu des tailles et des interlignages des polices, même les plus standards... Un petit truc à utiliser, en entête de votre fichier HTML :

    <font <style type="text/css">
    /* POUR HOTMAIL/OUTLOOK */
    .ExternalClass { width:100%; }
    .ExternalClass * { line-height: 100% }
    </style>

    PS : Mais,... Il reste toujours de petits détails à peaufiner, pour les "perfectionnistes"... Il arrive que l'on souhaite mettre une couleur de fond (bgcolor="#D4E9FC") au message envoyé... et là aussi, souvent, le fond est restitué en blanc... Alors... On privilégie encore l'efficacité au détriment du "poids" du message en préférant mettre les style inline, soit directement dans le corps des balises de déclaration, pour parer aux instructions des en-têtes des différents mailers (lire cet article de Rémi Parmentier). Puis, à vous de faire des tests et de trouver un "truc" pour parer à cet ultime problème... Et de transmettre l'info !


    En résumé

    La nécessité de mettre en place une véritable stratégie pour réussir votre campagne de mailing qui s'occupe tout à la fois de penser le contenu des newsletters et leur design, de choisir la bonne fréquence dans le cas des newsletters, de traiter efficacement les demandes de désabonnement et d'exploiter toutes les statistiques liés aux envois. Les campagnes d'emailing sont des outils de promotion très efficaces à la condition d'être employées avec discernement et professionnalisme. Mais attention, elles ont un coût : faire appel à un prestataire ou un webmaster reconnu vous évitera bien des problèmes.

    Rendre instantanément votre mail identifiable pour son destinataire.

    Mailing Clairjoie

    Un lien vers une version web (déposée sur le site internet du demandeur ou hébergé par le prestataire de la solution employée) afin que ceux qui ne peuvent pas visualiser votre message dans leur logiciel de messagerie, ou s'il est fortement dégradé, puissent le consulter correctement dans un navigateur web.

    Un rapide résumé de la méthode d'obtention de l'adresse email du destinataire pour lui rappeler la cause du message reçu (il s'est inscrit sur votre site, il vous a acheté un produit, etc...).

    Faire apparaître clairement l'adresse email de votre destinataire afin qu'il puisse s'assurer que l'email lui a bien été spécifiquement envoyé.

    Pensez à réaliser une version texte brut de votre message. Certains de vos destinataires auront peut-être paramétré leur logiciel de messagerie afin de n'afficher que la version texte de chaque message pour diverses raisons. Assurez-vous alors d'envoyer votre email en format « multi-part », qui comprend à la fois les versions texte brut et HTML dans un seul message... et cela augmentera vos chances de passer les barrières anti-spam.

    Mail de Mac... GMail de Google... Lotus...

     

    Les détails font la perfection, et la perfection n'est pas un détail.

    Léonard de Vinci


    A vous de vous lancer !

    En suivant les directives listées ci-dessus, vous mettez de votre côté toutes les chances de réussir votre campagne de mailing.

    Quelques prestataires :

    www.cockpit-mailing.com
    www.emailstrategie.com
    www.dolist.net

    Pour les débrouillards, des outils vraiment très intéressants et performants :

    www.phplist.com
    mailchimp.com (en.)

    Et d'autres conseils plus spécifiques :

    www.1stwebdesigner.com/tutorials/ultimate-guide-html-emails (en.)
    www.insidedaweb.com/emailing-direct-mail-marketing/comment-bien-utiliser-le-html-pour-un-emailing
    http://fr.statista.com/statistiques/502103/email-publicitaire-element-le-plus-attractif-france/

    Et un outil pour tester de vos mails avant envoi :

    Avec Mailchimp : https://mailchimp.com/features/inbox-preview/
    Le tutoriel pour Mailchimp via OpenClassRooms : openclassrooms.com/courses/reussir-sa-campagne-d-e-mailing-avec-mailchimp
    Avec Litmus : https://litmus.com/email-testing

    Et les mails spécifiquement responsive ?

    http://frenchweb.fr/emails-responsive-un-imperatif/118288
    Des exemples de mailings responsives à télécharger

     

    Pas de courrier indésirable, merci !

     

    Erwan Corre - Août 2016


  • Le cybersquatting involontaire...

    Le cybersquatting involontaire...

    Le cybersquatting peut parfois prendre des tournures étonnantes... et risquées pour le webmaster imprudent qui se retouve au centre de la polémique... Étude de cas....

  • Le DNS, c'est quoi ?

    Le DNS, c'est quoi ?

    Nous naviguons sur internet en utilisant en permanence les "serveurs de nom de domaine" qui, comme leur nom l'indique, permettent de mettre en correspondance les adresses IP des ordinateurs et le nom de domaine qui s'y rapporte.

    Les DNS sont les aiguilleurs du réseaux internet...

     

    Un DNS (Domain Name System en anglais) est simplement un serveur avec un logiciel
    et une base de donnée qui remplace automatiquement l'adresse du domaine au format alphanumérique
    comme www.votredomaine.com par l'adresse IP numérique.

    Par exemple, via quelques lignes de PHP (les variables d'environnement) :

    > L' adresse I.P. de votre machine : 54.198.147.79

    > L'adresse I.P. du serveur hébergeant ce site : 212.227.119.163


    Internet et les noms de domaine

    Derrière cette acronyme évoquant une déesse grèque, le DNS est au cœur même de la révolution internet. Chacun sait que tout ordinateur qui se connecte au réseau internet est identifié sur ce réseau par une adresse IP individuelle et qui correspond à son identité, sa carte d'identité. Le problème soulevé par cette manière de s'identifier est résolu par le mise en place du DNS - Domain Name System (ou système de noms de domaine) : les utilisateurs ne veulent pas travailler avec des adresses numériques du genre 194.153.205.26 mais avec un nom de domaine ou des adresses plus explicites du type "www.webmaster-bretagne.info" (appelées adresses FQDN, ou plus généralement npm de domaine, sémantiquement plus compréhensible et manipulable par les internaute).

    Ainsi, il est possible d'associer des noms en langage courant ou sémantiques aux adresses numériques grâce à un système appelé DNS (Domain Name System) : webmaster-bretagne.info, vivamexico.info, www.la-decoratrice.com, www.copyroom.fr, www.copynews.fr,www.racines-paysage.com...

    On appelle résolution de noms de domaines (ou résolution d'adresses) la corrélation entre les adresses IP et le nom de domaine associé qui permet une meilleur accessibilité au contenu du web via des noms de domaines explicites et facilement mémorisables pour les utilisateurs.


    Alors, en 2 mots, C'EST QUOI ?

    En gros, et par comparaison, quand vous téléphonez à quelqu'un, vous devez composer son numéro de téléphone

    Comme il est difficile de les retenir par cœur, on a créé les annuaires qui sont des bases de données recensant tous les numéros de téléphone disponible et donc de trouver une personne ou une société et donc d'y trouver son numéro de téléphone.

    nom ---> numéro de téléphone

    C'est sensiblement la même chose sur Internet mais ce ne sont plus des numéros de téléphone mais des numéros de serveurs web hébergeant physique les fichiers de votre site internet : pour qu'un ordinateur puisse se "raccorder" à un autre ordinateur, il doit connaître son adresse IP (exemple: 216.17.122.124).

    On le voit, ce n'est pas facile à retenir...

    Alors, on a inventé une sorte d'annuaire mettant en correspondance une machine et son adresse : le DNS.

    nom d'ordinateur ---> adresse IP

    Par exemple, sur votre ordinateur, tapez pinguez ce site internet www.webmaster-bretagne.info (en ligne de commande, dans une fenêtre MS-Do sous PC, ou via les outils dédiés comme l'Utilitaire de réseau sur MAC...), vous pourrez connaître instantanément l'adresse IP de ce site...

     

    Ping du site "Webmaster-Bretagne.info" pour connaîter son adresse IP

     

    Cependant, dans le détail, le DNS a 3 significations distinctes:

    • DNS : Domain Name Server, c'est à dire un serveur de nom (une machine sur laquelle tourne un service DNS).
    • DNS désigne aussi le système constitué par l'ensemble des serveurs de noms de la planète. Ces serveurs s'échangent leurs répertoire de proche en proche à intervalles réguliers.
    • DNS : Domaine Name Service est un protocole (plus de détails... )

    Noms d'hôtes

    Aux origines de TCP/IP, étant donné que les réseaux étaient très peu étendus ou autrement dit que le nombre d'ordinateurs connectés à un même réseau était raisonnable. Les administrateurs de réseau informatique créaient des fichiers appelés tables de conversion manuelle. Ces tables de conversion manuelle étaient des fichiers séquentiels, généralement nommés hosts ou hosts.txt, associant sur chaque ligne l'adresse IP de la machine et le nom littéral associé, appelé nom d'hôte. C'était encore du bricolage mais cela suffisait encore


    Introduction au Domain Name System

    Le système précédent de tables de conversion nécessitait néanmoins la mise à jour manuelle des tables de tous les ordinateurs en cas d'ajout ou de modification d'un nom de machine. Ainsi, avec l'explosion de la taille des réseaux, et de leur interconnexion, il a fallu mettre en place un système de gestion des noms hiérarchisé et plus facilement administrable. Le système nommé Domain Name System (DNS), traduisez Système de nom de domaine, a été mis au point en novembre 1983 par Paul Mockapetris (RFC 882 et RFC 883), puis révisé en 1987 dans les RFCs 1034 et 1035. Le DNS a fait l'objet depuis de nombreuses RFCs.

    Ce système propose :

    • un espace de noms hiérarchique permettant de garantir l'unicité d'un nom dans une structure arborescente, à la manière des systèmes de fichiers d'Unix.
    • un système de serveurs distribués permettant de rendre disponible l'espace de noms.
    • un système de clients permettant de « résoudre » les noms de domaines, c'est-à-dire interroger les serveurs afin de connaître l'adresse IP correspondant à un nom.

    L'espace de noms

    La structuration du système DNS s'appuie sur une structure arborescente dans laquelle sont définis des domaines de niveau supérieurs (appelés TLD, pour Top Level Domains), rattachés à un nœud racine représenté par un point.

    Arborescence du Domain Name System

    On appelle « nom de domaine » chaque nœud de l'arbre. Chaque nœud possède une étiquette (en anglais, « label ») d'une longueur maximale de 63 caractères. L'ensemble des noms de domaine constitue ainsi un arbre inversé où chaque nœud est séparé du suivant par un point (« . »).

    L'extrémité d'une branche est appelée hôte, et correspond à une machine ou une entité du réseau. Le nom d'hôte qui lui est attribué doit être unique dans le domaine considéré, ou le cas échéant dans le sous-domaine. A titre d'exemple le serveur web d'un domaine porte ainsi généralement le nom www.

    Le mot « domaine » correspond formellement au suffixe d'un nom de domaine, c'est-à-dire l'ensemble des étiquettes de nœuds d'une arborescence, à l'exception de l'hôte.

    Le nom absolu correspondant à l'ensemble des étiquettes des nœuds d'une arborescence, séparées par des points, et terminé par un point final, est appelé adresse FQDN (Fully Qualified Domain Name, soit Nom de Domaine Totalement Qualifié). La profondeur maximale de l'arborescence est de 127 niveaux et la longueur maximale d'un nom FQDN est de 255 caractères. L'adresse FQDN permet de repérer de façon unique une machine sur le réseau des réseaux. Ainsi www.webmaster-bretagne.info représente une adresse FQDN.


    Les serveurs de noms

    Les machines appelées serveurs de nom de domaine permettent d'établir la correspondance entre le nom de domaine et l'adresse IP des machines d'un réseau.

    Chaque domaine possède un serveur de noms de domaines, appelé « serveur de noms primaire » (primary domain name server), ainsi qu'un serveur de noms secondaire (secondary domaine name server), permettant de prendre le relais du serveur de noms primaire en cas d'indisponibilité.

    Chaque serveur de nom est déclaré dans à un serveur de nom de domaine de niveau immédiatement supérieur, ce qui permet implicitement une délégation d'autorité sur les domaines. Le système de nom est une architecture distribuée, où chaque entité est responsable de la gestion de son nom de domaine. Il n'existe donc pas d'organisme ayant à charge la gestion de l'ensemble des noms de domaines.

    Les serveurs correspondant aux domaines de plus haut niveau (TLD) sont appelés « serveurs de noms racine ».

    Il en existe treize, répartis sur la planète, possédant les noms « a.root-servers.net » à « m.root-servers.net ».

    Un serveur de noms définit une zone, c'est-à-dire un ensemble de domaines sur lequel le serveur a autorité. Le système de noms de domaine est transparent pour l'utilisateur, néanmoins il ne faut pas oublier les points suivants :

    • Chaque ordinateur doit être configuré avec l'adresse d'une machine capable de transformer n'importe quel nom en une adresse IP. Cette machine est appelée Domain Name Server. Pas de panique : lorsque vous vous connectez à internet, le fournisseur d'accès va automatiquement modifier vos paramètres réseau pour vous mettre à disposition ces serveurs de noms.
    • L'adresse IP d'un second Domain Name Server (secondary Domain Name Server) doit également être définie : le serveur de noms secondaire peut relayer le serveur de noms primaire en cas de dysfonctionnement.

    Le serveur le plus répandu s'appelle BIND (Berkeley Internet Name Domain). Il s'agit d'un logiciel libre disponible sous les systèmes UNIX, développé initialement par l'université de Berkeley en Californie et désormais maintenu par l'ISC (Internet Systems Consortium).

    La salle des serveurs

    Résolution de noms de domaine

    Le mécanisme consistant à trouver l'adresse IP correspondant au nom d'un hôte est appelé « résolution de nom de domaine ». L'application permettant de réaliser cette opération (généralement intégrée au système d'exploitation) est appelée « résolveur » (en anglais « resolver »).

    Lorsqu'une application souhaite se connecter à un hôte connu par son nom de domaine (par exemple « www.webmaster-bretagne.info »), celle-ci va interroger un serveur de noms défini dans sa configuration réseau. Chaque machine connectée au réseau possède en effet dans sa configuration les adresses IP de deux serveurs de noms de son fournisseur d'accès.

    Une requête est ainsi envoyée au premier serveur de noms (appelé « serveur de nom primaire »). Si celui-ci possède l'enregistrement dans son cache, il l'envoie à l'application, dans le cas contraire il interroge un serveur racine (dans notre cas un serveur racine correspondant au TLD « .net »). Le serveur de nom racine renvoie une liste de serveurs de noms faisant autorité sur le domaine (dans le cas présent les adresses IP des serveurs de noms primaire et secondaire de webmaster-bretagne.info).

    Le serveur de noms primaire faisant autorité sur le domaine va alors être interrogé et retourner l'enregistrement correspondant à l'hôte sur le domaine (dans notre cas www).


    Types d'enregistrements

    Un DNS est une base de données répartie contenant des enregistrements, appelés RR (Resource Records), concernant les noms de domaines. Seules sont concernées par la lecture des informations ci-dessous les personnes responsables de l'administration d'un domaine, le fonctionnement des serveurs de noms étant totalement transparent pour les utilisateurs.

    En raison du système de cache permettant au système DNS d'être réparti, les enregistrements de chaque domaine possèdent une durée de vie, appelée TTL (Time To Live, traduisez espérance de vie), permettant aux serveurs intermédiaires de connaître la date de péremption des informations et ainsi savoir s'il est nécessaire ou non de la revérifier.

    D'une manière générale, un enregistrement DNS agrège les informations suivantes :

     

    Nom de domaine (FQDN)

    TTL

    Type

    Classe

    RData

    www.webmaster-bretagne.info.

    3600

    A

    IN

    163.5.255.85

     

    • Nom de domaine : le nom de domaine doit être un nom FQDN, c'est-à-dire être terminé par un point. Si le point est omis, le nom de domaine est relatif, c'est-à-dire que le nom de domaine principal suffixera le domaine saisi ;
    • Type : une valeur sur 16 bits spécifiant le type de ressource décrit par l'enregistrement. Le type de ressource peut être un des suivants :
      • A : il s'agit du type de base établissant la correspondance entre un nom canonique et une adresse IP. Par ailleurs il peut exister plusieurs enregistrements A, correspondant aux différentes machines du réseau (serveurs).
      • CNAME (Canonical Name) : il permet de faire correspondre un alias au nom canonique. Il est particulièrement utile pour fournir des noms alternatifs correspondant aux différents services d'une même machine.
      • HINFO : il s'agit d'un champ uniquement descriptif permettant de décrire notamment le matériel (CPU) et le système d'exploitation (OS) d'un hôte. Il est généralement conseillé de ne pas le renseigner afin de ne pas fournir d'éléments d'informations pouvant se révéler utiles pour des pirates informatiques.
      • MX (Mail eXchange) : correspond au serveur de gestion du courrier. Lorsqu'un utilisateur envoie un courrier électronique à une adresse (utilisateur@domaine), le serveur de courrier sortant interroge le serveur de nom ayant autorité sur le domaine afin d'obtenir l'enregistrement MX. Il peut exister plusieurs MX par domaine, afin de fournir une redondance en cas de panne du serveur de messagerie principal. Ainsi l'enregistrement MX permet de définir une priorité avec une valeur pouvant aller de 0 à 65 535 :

        www.webmaster-bretagne.info. IN MX 10 mail.webmaster-bretagne.info
      • NS : correspond au serveur de noms ayant autorité sur le domaine.
      • PTR : un pointeur vers une autre partie de l'espace de noms de domaines.
      • SOA (Start Of Authority) : le champ SOA permet de décrire le serveur de nom ayant autorité sur la zone, ainsi que l'adresse électronique du contact technique (dont le caractère « @ » est remplacé par un point).
    • Classe : la classe peut être soit IN (correspondant aux protocoles d'internet, il s'agit donc du système utilisé dans notre cas), soit CH (pour le système qualifié de chaotique) ;
    • RDATA : il s'agit des données correspondant à l'enregistrement. Voici les informations attendues selon le type d'enregistrement :
      • A : une adresse IP sur 32 bits ;
      • CNAME : un nom de domaine ;
      • MX : une valeur de priorité sur 16 bits, suivi d'un nom d'hôte ;
      • NS : un nom d'hôte ;
      • PTR : un nom de domaine ;
      • SOA : plusieurs champs.

    Le système de gestion de noms Dns est efficace et unificateur.
    De plus, comme tous les systèmes cruciaux d'Internet,
    il y a au moins une implémentation efficace et gratuite.
    C'est portable et très complet.

    _SebF sur FramIp


    En savoir plus :

    Plus d'infos sur le site de l'ICANN

    ICANN
    L'article de Wikipedia : « Domaine de premier niveau »

    Et plus loin avec le fichier « HOST » : http://www.commentcamarche.net/faq/5993-modifier-son-fichier-hosts

    A propos des « DNS menteurs » : https://blog.genma.fr/?Les-DNS-menteurs


  • Le métier de webmaster / intégrateur

    Un métier en plein boom !

     

    Se connecter à internet, c'est y rencontrer des centaines de gens
    avec qui vous n'auriez jamais eu envie d'avoir quelque rapport que ce soit.

    Dave Barry

    Voici donc quelques informations pratiques sur ce métier qui attire du monde tout en étant porteur et qui s'apprend aussi dans les grandes écoles que sur le tas à la maison...

    webmaster / intégrateur

    Intégrateur HTML, Développeur front office, Développeur front-end

    L'intégrateur Web est chargé de traduire et de transposer les maquettes fournies par l'équipe graphique dans un langage informatique : le HTML.

    Il compose la mise en page statique du site Web en y intégrant les éléments des maquettes graphiques : textes, sons, images.

    Il participe à la qualité du site, dans le respect des normes d'accessibilité, de référencement et d'ergonomie.

    L'intégrateur Web peut exercer dans une agence web, en tant que travailleur indépendant ou directement chez le client.


    Fiche métier diffusée par la Délégation aux usages de l'Internet (DUI)

    Le poste d'intégrateur

    L'intégrateur web est chargé de produire, traduire puis transposer les maquettes fournies par l'équipe graphique en langage informatique. Son rôle consiste à composer la mise en page statique d'un site web en y assemblant tous les éléments des maquettes graphiques (textes, images, sons) dans le respect des normes et des standards. Pour mettre en page le site web, l'intégrateur web s'appuie sur le langage informatique HTML (Hyper Text Mark up Language).

    A ce titre, l'intégrateur web est en charge de :

    • La découpe, le montage et l'intégration des pages en HTML/CSS, XHTML
    • La cohérence entre les pages codées en HTML et les maquettes graphiques
    • Le respect des standards web (Norme W3C, normes d'accessibilité)
    • La compatibilité entre les navigateurs (Firefox, Internet Explorer, Safari, Chrome, Opera, iCab...)
    • L'intégration des contenus
    • L'intégration des effets graphiques

    De façon complémentaire, il participe à :

    • L'architecture de l'information au sein du site
    • La conception des éléments graphiques du site
    • L'optimisation de l'accessibilité du site
    • La mise en place des optimisations techniques propres au référencement

    Missions

    Pièce maîtresse de la réalisation de tout site web, l'intégrateur web collabore au quotidien avec l'équipe créative, les développeurs et les chefs de projet.

    Il est le garant du respect des spécifications techniques et du design. L'intégrateur web est souvent amené à travailler sur plusieurs projets en même temps. A ce compte, il doit faire preuve d'adaptabilité, de rigueur et d'organisation. Il participe, par son expertise, à la qualité globale du site, dans le respect des normes d'accessibilité, de référencement et d'ergonomie.

    Outre une bonne maitrise du langage HTML, sa mission requiert donc une bonne connaissance des problématiques de graphisme, d'ergonomie et de référencement d'un site web.


    Domaines et périmètre d'intervention

    L'intégrateur web travaille principalement dans deux types d'environnements : les agences Web et les Sociétés de Services en Ingénierie Informatique (SSII). Il est directement rattaché au chef de projet (qui dépend lui-même du directeur de l'agence web ou de la SSII). Le plus souvent, il est associé à la phase de réflexion technique qui précède le début du développement.

    En fonction de son expérience et de ses compétences, mais aussi de la taille des sites à créer, l'intégrateur aura des attributions plus ou moins larges : de la simple exécution jusqu'à des interventions sur l'ergonomie ou le design du site. Il peut aussi être amené à assister les développeurs et les infographistes au cours du développement en les conseillant en matière de format, de taille des fichiers ou encore de compression.

    Activité et tâches

    Activité 1 Découpage, montage et intégration des pages
    Tâches Découper chaque zone partir des maquettes réalisées par les graphistes :
      · Découpage de textes · Découpage d'images · Découpage de sons · Découpage de vidéos
      Assembler / Structurer les différentes zones :
      · Assemblage de textes · Assemblage d'images · Assemblage de sons · Assemblage de vidéos
      Traduire les différentes zones en langage web :
      · XHTML / HTML · CSS

     

    Activité 2 Veiller au respect des norme
    Tâches Respect des normes d'accessibilité :
      · W3C
      Respect des normes de référencement :
      · Balises META · Renseigner la balise ALT des images · Renseigner les TITLE des liens

    Respect des principes d'ergonomie

    Activité 3 Compatibilité entre les différents navigateurs
    Tâches Vérifier l'affichage du site sur les navigateurs les plus utilisés :
      · Firefox · Internet · Explorer · Chrome · Safari · Opéra
      Vérifier la cohérence avec les maquettes graphiques fournies :
      · Place exacte des éléments

    Intégration des contenus

    Activité 4 Intégration des contenus
    Tâches Intégrer les différents contenus :
      · Directement dans le code HTML
    ou
    · Via un CMS (Content Management System) : Joomla, Worpress, SPIP...
      Intégrer tous les éléments de contenu :
      · Textes · Images · Vidéos · Sons

    Intégration des effets graphiques

    Activité 5 Intégration des effets graphiques
    Tâches Transcrire les effets graphiques en langage web :
      · JavaScript · jQuery · CSS3

    Intégration des contenus pour le référencement

    Activité 6 Intégrer les balises METAS pour chaque page
    Tâches · TITLE · Description · Keyword
      Mettre une balise ALT sur chaque image du site Intégrer les titres des liens

    Projet web en cours...

    Gestion du projet

    Compréhension des contraintes du projet

    · Délais · Budget · Spécificités propres au client et/ou au projet

    Connaissance des règles et normes applicables sur le web

    · Accessibilité · Ergonomie · Référencement

    Connaissances informatiques

    · Méthodes, normes, langages et outils de développement · Langages de programmation web · Environnement de développement · Culture générale informatique · Environnement web et XML

    Maîtrise des langages et des technologies de publication du web

    · XHTML / HTML · JavaScript · AJAX · XML · jQuery · CSS3

    Maîtrise opérationnelle des outils suivants

    · CMS (Content Management System) · Editeurs de code

    Utilisation de logiciels spécifiques

    · Traitement d'images et des logos vectoriels


    Qualités requises

    Rigueur

    · Sens du détail · Respect des normes

    Autonomie

    · Respect des délais · Rapidité d'exécution

    Capacités d'adaptation

    · Polyvalence · Force de proposition · Compréhension des métiers des autres membres de l'équipe

    Capacités à travailler en équipe

    · Écoute · Ouverture aux autres · Goût pour l'échange

    Veille technologique

    · Langages · Méthodes d'intégration · Nouveaux navigateurs et pourcentage d'utilisateurs

    Cette fiche métier Intégrateur Web est mise à disposition selon les termes de la Licence Creative Commons Attribution 2.0 France
    Délégation aux usages de l'Internet (DUI) - Hautes Etudes des Technologies de l'Information et de la Communication (HETIC) - 2012


    Perspectives

    Internet n'est pas un espace de liberté, c'est un espace marchand.
    Aujourd'hui, ceux qui gagnent de l'argent, ce sont les fournisseurs d'accès, pas les journaux.

    Nicolas BRIMO

     

    Le métier tend à se complexifier et à faire intervenir de plus en plus la technique (site responsive et mobile-friendly, animations et interactivité croissante avec l'internaute qui se fait profiler) et il est dans l'intérêt du webmaster / intégrateur à se spécialiser plutôt que de rester trop généraliste.

     

    L'émergence du web mobile et les techniques associées au responsive web design (RWD) ont contribué à une mutation de notre métier d'intégrateur HTML/CSS. De plus en plus, nous constatons une spécialisation et nous ne pouvons plus nous contenter d'être simplement intégrateur. Thomas

    Thomas Zilliox

     

    D'un autre côté, même si l'on connait tous les majors du net et les tendances mainstream, et que les principaux acteurs tendent à concentrer entre leurs mains l'essentiel du trafic mondial, il faut bien savoir que le marché de proximité reste accessible à tout webmaster qui connaît son métier et comprend les besoins de ses clients qui sont pour la très grosse majorité des PME/PMI ou des associations et qui souvent se contentent d'un site au goût du jour, facilement administrable et qui leur permet de toucher leurs cibles les plus proches... Alors, tout reste ouvert !


    En savoir plus :

    La fiche ONISEP : Intégrateur/trice Web

    La fiche pédagogique : Intégrateur Web

    L'article sur Wikipedia : https://fr.wikipedia.org/wiki/Int%C3%A9grateur_web

    Des ressources : www.infowebmaster.fr

    L'incontournable : dicodunet.com

    Et un retour d'expérience de Vanessa I. : "Le recrutement dans le monde du web"


  • Les caractères HTML

    La structure de base d'un document au format HTML

    Un exemple de document au format HTML

    Voici un descriptif des balises HTML de base qui structurent un document standardisé nommé page web...

    <html>  
    <head>
    <title> </title>
    </head>
    <body>
    <p>Votre contenu...<p>
    </body>
    </html>

    A NOTER : toutes les balises <> se referment avec un "/"


    !-- Le document HTML commence ici --!

    <html>

    On complète désormais cette première déclaration par la langue et son format générique qui est en html 5 :

    <html lang="fr">

    !-- Ici, une déclaration de titre pour la page --!

    <head> 
    <title>Votre titre de page ici</title>
    </head>

    On complète désormais cette première déclaration par le type d'encodage des caractères de la page qui est en utf-8 :

    <meta charset="utf-8">

    !-- Et le début du corps de la page --!

    <body>

    Tous les éléments constituant le contenu visible de la page se situent à l'intérieur de la balise <body> (le corps du document) : le texte, les images, les animations...


    !-- Pour insérer les titres, sous-titres... <H1>,<H2>,<H3>,<H4>,<H5>,<H6> --!

    <h1>niveau one header </h1>

    <h2>niveau two header </h2>

    <h3>niveau three header </h3>

    <h4>niveau four header </h4>

    <h5>niveau five header </h5>

    <h6>niveau six header </h6>

    <h1> et le plus grand format et <H6> le plus petit, ce qui donne ceci pour ce site :

    Premier niveau - l'en-tête

    Second niveau - Un sous-titre

    Troisième niveau - Une rubrique

    Quatrième niveau - Une sous-rubrique

    Cinquième niveau - Une section
    Sixième niveau - Une sous-section

    !-- Pour mettre du texte en gras --!

    un texte normal...

    <b>les balises requises</b>

    Voici le texte en gras

    Elle est de plus en plus substituée par la balise <strong> (fort) qui donnent le même résultat d'affichage mais permet de mettre en avant sémantiquement le terme au-delà de la mettre simplement en gras

    <strong>les balises requises</strong>

    !-- Pour mettre du texte en italique--!

    un texte normal...

    <i>les balises requises</i>

    Voici le texte en en italique

    Elle est de plus en plus substituée par la balise <em> (emphase) qui donnent le même résultat d'affichage mais permet de mettre en avant sémantiquement (avec emphase donc) le terme au-delà de la mettre simplement en italique

    <em>les balises requises</em>

    !-- Pour centrer le texte ou une image --!

    <center><h1>Le texte que vous souhaitez centrer</h1></center>

    Ce qui donne ceci :

    Le texte que vous souhaitez centrer



    !-- Insertion d'une image dans la page --!

    Ce qui donne ceci :

    <img src="/mon-logo.jpg">

    Mon logo

    Il est très conseillé de rajouter l'attribut "alt" qui permet d'afficher un texte alternatif pendant que votre image se charge lorsqu'elle est d'un poids important :

    <img src="/images/mon-logo.jpg" alt="Mon logo : Webmaster Bretagne" />


    !-- Pour ajouter un lien hypertexte--!

    <a href="/index.html">Retour à la page d'accueil</a>

    Ce qui donne ceci :

    Retour à la page d'accueil


    !-- Une ligne de séparation --!

    Pour faire des séparation entre vos paragraphes, vous pouvez utiliser le balise <HR> qui génère une ligne horizontale sur toute la largeur de la page. Attention, elle s'insère seul, sans balise de fermeture.

    <hr />

    Ce qui donne ceci :


    Vous pouvez l'agrémenter de divers attributs :

    <hr size=10 align=left noshade width=50%>

    Ce qui donne ceci :


     


    !-- Les listes à puce --!

    Vous pouvez créer des listes précédées de puce avec les balises <ul> et <li>.

    <ul>
    <li>Texte 1</li>
    <li>Texte 2</li>
    <li>Texte 3</li>
    </ul>  
    

    Ce qui donne ceci :

    • Texte 1
    • Texte 2
    • Texte 3

    !-- Listes numérotées --!

    Vous pouvez créer des listes numérotées avec les balises <ol> et <li>..

    <ol>
    <li>Texte 1</li>
    <li>Texte 2</li>
    <li>Texte 3</li>
    </ol>
    

    Ce qui donne ceci :

    1. Texte 1
    2. Texte 2
    3. Texte 3

    !-- A la fin de votre page, vous devez refermer les balises de pages --!

    </body>
    </html>


    Des infos complémentaires :

    Les différents codages des caractères html : ISO-8859-1 ou UTF-8 ?

    Allez plus loin :

    La liste complète des balises HTML5...


  • Les différents codages des caractères html : ISO-8859-1 ou UTF-8 ?

    Un nouveau langage pour une nouveau monde...

    Un exemple de document au format HTML

    Pour écrire une page web, plusieurs langages peuvent être utilisés mais le HTML reste fondamental car il est universel.

    Cependant, dans ses déclinaisons, sont formatage ou encodage, certaines tendances apparaissent et se confirment...

    Tel qu'il a été formalisé par le W3C, le HTML ne sert pas à décrire le rendu final des pages web.
    En particulier, contrairement à la publication assistée par ordinateur, HTML n'est pas conçu pour
    spécifier l'apparence visuelle exacte des documents. HTML est plutôt conçu pour donner du sens aux différentes parties du texte : titre, liste, passage important, citation, etc.

    Article de "HTML" (Hypertext_Markup_Language) Wikipedia


    Les différents codages des caractères HTML : ISO-8859-1 ou UTF-8 ?

    Le codage de la page est déclaré dans l'en-tête de la page, dans le "code source", en bonne place dans les "balises méta".

    Cette déclaration va régir le comportement du navigateur pour la lecture des pages et notamment pour l'affichage des tables de caractères.

    Auparavant, le plus courant, celui déclaré par défaut dans le célèbre Dreamweaver® par exemple, était l'ISO ISO-8859-1 qui intègre l'essentiel des caractères "latins" mais aussi cyrilliques, orientaux, arabes...

    Aujourd'hui, c'est l'UTF-8 qui s'est généralisé... pour sa souplesse et sa transparence.


    1 - LES BASES

    Exemple de page ISO

    Texte

    Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.

    Codage ISO-8859-1

    G&eacute;n&eacute;ralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a &eacute;t&eacute; modifi&eacute;), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'op&eacute;rateur sait au premier coup d'&oelig;il que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas d&eacute;rang&eacute;e par le contenu, il demeure concentr&eacute; seulement sur l'aspect graphique.
     

     

    On remarque que certains caractères sont codés (commençant par un "&"), ce sont typiquement les caractères accentués.

    Exemples de caractères accentués

    Texte

    & é à ç " Ê â ù

    Codage ISO-8859-1

    &amp; &eacute; &agrave; &ccedil; &quot;& Ecirc;& acirc;& ugrave;
     

    Exemple de page UTF-8

    Texte

    Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.

    Codage UTF-8

    Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
     

     

    Eh hop, pas de différence ! Vous pourrez le vérifier dans le code source de cette page. Mine de rien, ce choix de l'utilisation de l'UTF-8 se révèle très pratique, par sa simplicité et son évidence.

    C'est aujourd'hui devenu la norme...

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">


    2 - LES USAGES

    Sachez que depuis plusieurs années, le format UTF-8 prend l'avantage... et cela tombe bien car il ne nécessite aucun codage spécifique.

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    Exemples de caractères accentués

    Texte

    &éàç"Êâù

    Codage UTF-8

    &éàç"Êâù
     

     

      espace Alt+ 0160 &#160; &nbsp; Espace insécable
      ¡ Alt+ 0161 &#161; &iexcl; Exclamation inversée
      ¢ Alt+ 0162 &#162; &cent; Symbole centime
      £ Alt+ 0163 &#163; &pound; Symbole livre
      ¤ Alt+ 0164 &#164; &curren; Symbole monétaire
      ¥ Alt+ 0165 &#165; &yen; Signe Yen
      ¦ Alt+ 0166 &#166; &brvbar; ou &brkbar; Barre verticale interrompue
      § Alt+ 0167 &#167; &sect; Signe section
      ¨ Alt+ 0168 &#168; &uml; ou &die; Tréma
      © Alt+ 0169 &#169; &copy; Copyright
      ª Alt+ 0170 &#170; &ordf; Ordinal féminin
      « Alt+ 0171 &#171; &laquo; Chevron gauche ou guillemet gauche
      ¬ Alt+ 0172 &#172; &not; Signe non
      ­ Alt+ 0173 &#173; &shy; Tiret conditionnel
      ® Alt+ 0174 &#174; &reg; Marque déposée
      ¯ Alt+ 0175 &#175; &macr; ou &hibar; Macron
      ° Alt+ 0176 &#176; &deg; Signe degrés
      ± Alt+ 0177 &#177; &plusmn; Plus ou moins
      ² Alt+ 0178 &#178; &sup2; Deux exposant
      ³ Alt+ 0179 &#179; &sup3; Trois exposant
      ´ Alt+ 0180 &#180; &acute; Accent aigu
      µ Alt+ 0181 &#181; &micro; Signe micro
      Alt+ 0182 &#182; &para; Signe paragraphe
      · Alt+ 0183 &#183; &middot; Point milieu
      ¸ Alt+ 0184 &#184; &cedil; Cédille
      ¹ Alt+ 0185 &#185; &sup1; Un exposant
      º Alt+ 0186 &#186; &ordm; Ordinal masculin
      » Alt+ 0187 &#187; &raquo; Chevron droit ou guillemet droit
      ¼ Alt+ 0188 &#188; &frac14; Fraction un quart
      ½ Alt+ 0189 &#189; &frac12; Fraction un demi
      ¾ Alt+ 0190 &#190; &frac34; Fraction trois-quarts
      ¿ Alt+ 0191 &#191; &iquest; Point d'interrogation inversé
      À Alt+ 0192 &#192; &Agrave; A accent grave majuscule
      Á Alt+ 0193 &#193; &Aacute; A accent aigu majuscule
      Â Alt+ 0194 &#194; &Acirc; A accent circonflexe majuscule
      Ã Alt+ 0195 &#195; &Atilde; A tilde majuscule
      Ä Alt+ 0196 &#196; &Auml; A tréma majuscule
      Å Alt+ 0197 &#197; &Aring; A anneau majuscule
      Æ Alt+ 0198 &#198; &AElig; AE majuscule (digramme soudé ae, lettre)
      Ç Alt+ 0199 &#199; &Ccedil; C cédille majuscule
      È Alt+ 0200 &#200; &Egrave; E accent grave majuscule
      É Alt+ 0201 &#201; &Eacute; E accent aigu majuscule
      Ê Alt+ 0202 &#202; &Ecirc; E accent circonflexe majuscule
      Ë Alt+ 0203 &#203; &Euml; E tréma majuscule
      Ì Alt+ 0204 &#204; &Igrave; I accent grave majuscule
      Í Alt+ 0205 &#205; &Iacute; I accent aigu majuscule
      Î Alt+ 0206 &#206; &Icirc; I accent circonflexe majuscule
      Ï Alt+ 0207 &#207; &Iuml; I tréma majuscule
      Ð Alt+ 0208 &#208; &ETH; ou &Dstrok; Eth islandais
      Ñ Alt+ 0209 &#209; &Ntilde; N tilde majuscule
      Ò Alt+ 0210 &#210; &Ograve; O accent grave majuscule
      Ó Alt+ 0211 &#211; &Oacute; O accent aigu majuscule
      Ô Alt+ 0212 &#212; &Ocirc; O accent circonflexe majuscule
      Õ Alt+ 0213 &#213; &Otilde; O tilde majuscule
      Ö Alt+ 0214 &#214; &Ouml; O tréma majuscule
      × Alt+ 0215 &#215; &times; Signe infini
      Ø Alt+ 0216 &#216; &Oslash; O barré majuscule
      Ù Alt+ 0217 &#217; &Ugrave; U accent grave majuscule
      Ú Alt+ 0218 &#218; &Uacute; U accent aigu majuscule
      Û Alt+ 0219 &#219; &Ucirc; U accent circonflexe majuscule
      Ü Alt+ 0220 &#220; &Uuml; U tréma majuscule
      Ý Alt+ 0221 &#221; &Yacute; Y accent aigu majuscule
      Þ Alt+ 0222 &#222; &THORN; Thorn islandais majuscule
      ß Alt+ 0223 &#223; &szlig; s dur allemand (szet)
      à Alt+ 0224 &#224; &agrave; a accent grave minuscule
      á Alt+ 0225 &#225; &aacute; a accent aigu minuscule
      â Alt+ 0226 &#226; &acirc; a accent circonflexe minuscule
      ã Alt+ 0227 &#227; &atilde; a tilde minuscule
      ä Alt+ 0228 &#228; &auml; a tréma minuscule
      å Alt+ 0229 &#229; &aring; a rond minuscule
      æ Alt+ 0230 &#230; &aelig; e dans l'a minuscule
      ç Alt+ 0231 &#231; &ccedil; c cédille minuscule
      è Alt+ 0232 &#232; &egrave; e accent grave minuscule
      é Alt+ 0233 &#233; &eacute; e accent aigu minuscule
      ê Alt+ 0234 &#234; &ecirc; e accent circonflexe minuscule
      ë Alt+ 0235 &#235; &euml; e tréma minuscule
      ì Alt+ 0236 &#236; &igrave; i accent grave minuscule
      í Alt+ 0237 &#237; &iacute; i accent aigu minuscule
      î Alt+ 0238 &#238; &icirc; i accent circonflexe minuscule
      ï Alt+ 0239 &#239; &iuml; i tréma minuscule
      ð Alt+ 0240 &#240; &eth; eth islandais minuscule
      ñ Alt+ 0241 &#241; &ntilde; n tilde minuscule
      ò Alt+ 0242 &#242; &ograve; o accent grave minuscule
      ó Alt+ 0243 &#243; &oacute; o accent aigu minuscule
      ô Alt+ 0244 &#244; &ocirc; o accent circonflexe minuscule
      õ Alt+ 0245 &#245; &otilde; o tilde minuscule
      ö Alt+ 0246 &#246; &ouml; o tréma minuscule
      ÷ Alt+ 0247 &#247; &divide; Signe division
      ø Alt+ 0248 &#248; &oslash; o barré minuscule
      ù Alt+ 0249 &#249; &ugrave; u accent grave minuscule
      ú Alt+ 0250 &#250; &uacute; u accent aigu minuscule
      û Alt+ 0251 &#251; &ucirc; u accent circonflexe minuscule
      ü Alt+ 0252 &#252; &uuml; u tréma minuscule
      ý Alt+ 0253 &#253; &yacute; y accent aigu minuscule
      þ Alt+ 0254 &#254; &thorn; Thorn islandais minuscule
      ÿ Alt+ 0255 &#255; &yuml; y tréma minuscule
        &#8471;   Copyright des enregistrements sonores
               
      ! Alt+ 033 &#33;    
      " Alt+ 034 &#34; &quot; Guillemet double
      # Alt+ 035 &#35;   # (carré ou dièse)
      $ Alt+ 036 &#36;   symbole Dollar
      % Alt+ 037 &#37;    
      & Alt+ 038 &#38; &amp; Et commercial
      ' Alt+ 039 &#39;    
      ( Alt+ 040 &#40;    
      ) Alt+ 041 &#41;    
      * Alt+ 042 &#42;    
      + Alt+ 043 &#43;    
      , Alt+ 044 &#44;    
      - Alt+ 045 &#45;    
      . Alt+ 046 &#46;    
      / Alt+ 047 &#47;   / (barre oblique) ou "slash"
      0 Alt+ 048 &#48;    
      1 Alt+ 049 &#49;    
      2 Alt+ 050 &#50;    
      3 Alt+ 051 &#51;    
      4 Alt+ 052 &#52;    
      5 Alt+ 053 &#53;    
      6 Alt+ 054 &#54;    
      7 Alt+ 055 &#55;    
      8 Alt+ 056 &#56;    
      9 Alt+ 057 &#57;    
      : Alt+ 058 &#58;   Deux points
      ; Alt+ 059 &#59;   Virgule
      < Alt+ 060 &#60; &lt; Signe "inférieur à"
      = Alt+ 061 &#61;   Signe "égal"
      > Alt+ 062 &#62; &gt; Supérieur à
      ? Alt+ 063 &#63;   Point d'interrogation
      @ Alt+ 064 &#64;   "a" commercial ou "arobase"
      A Alt+ 065 &#65;    
      B Alt+ 066 &#66;    
      C Alt+ 067 &#67;    
      D Alt+ 068 &#68;    
      E Alt+ 069 &#69;    
      F Alt+ 070 &#70;    
      G Alt+ 071 &#71;    
      H Alt+ 072 &#72;    
      I Alt+ 073 &#73;    
      J Alt+ 074 &#74;    
      K Alt+ 075 &#75;    
      L Alt+ 076 &#76;    
      M Alt+ 077 &#77;    
      N Alt+ 078 &#78;    
      O Alt+ 079 &#79;    
      P Alt+ 080 &#80;    
      Q Alt+ 081 &#81;    
      R Alt+ 082 &#82;    
      S Alt+ 083 &#83;    
      T Alt+ 084 &#84;    
      U Alt+ 085 &#85;    
      V Alt+ 086 &#86;    
      W Alt+ 087 &#87;    
      X Alt+ 088 &#88;    
      Y Alt+ 089 &#89;    
      Z Alt+ 090 &#90;    
      [ Alt+ 091 &#91;   Crochet fermant
      \ Alt+ 092 &#92;   \ (barre oblique inversée)
    ou "anti-slash"
      ] Alt+ 093 &#93;   Crochet fermant
      ^ Alt+ 094 &#94;   Accent circonflexe
      _ Alt+ 095 &#95;   Tiret (signe "moins")
      ` Alt+ 096 &#96;    
      a Alt+ 097 &#97;    
      b Alt+ 098 &#98;    
      c Alt+ 099 &#99;    
      d Alt+ 100 &#100;    
      e Alt+ 101 &#101;    
      f Alt+ 102 &#102;    
      g Alt+ 103 &#103;    
      h Alt+ 104 &#104;    
      i Alt+ 105 &#105;    
      j Alt+ 106 &#106;    
      k Alt+ 107 &#107;    
      l Alt+ 108 &#108;    
      m Alt+ 0109 &#109;    
      n Alt+ 0110 &#110;    
      o Alt+ 0111 &#111;    
      p Alt+ 0112 &#112;    
      q Alt+ 0113 &#113;    
      r Alt+ 0114 &#114;    
      s Alt+ 0115 &#115;    
      t Alt+ 0116 &#116;    
      u Alt+ 0117 &#117;    
      v Alt+ 0118 &#118;    
      w Alt+ 0119 &#119;    
      x Alt+ 0120 &#120;    
      y Alt+ 0121 &#121;    
      z Alt+ 0122 &#122;    
      { Alt+ 0123 &#123;   Parenthèse ouvrante
      | Alt+ 0124 &#124;   Barre droite
      } Alt+ 0125 &#125;   Parenthèse fermante
      ~ Alt+ 0126 &#126;   ~ (tilde)
       Alt+ 0127      
      Alt+ 0128 &#128; ou &#8364; &euro; Symbole Euro
       Alt+ 0129      
      Alt+ 0130 &#130;   Apostrophe
      ƒ Alt+ 0131 &#131;    
      " Alt+ 0132 &#132;   Guillemet fermant
      Alt+ 0133 &#133;   Trois petits points
      Alt+ 0134 &#134;   Signe de croix
      Alt+ 0135 &#135;    
      ˆ Alt+ 0136 &#136;    
      Alt+ 0137 &#137;    
      Š Alt+ 0138 &#138;    
      Alt+ 0139 &#139; &lt;  
      Œ Alt+ 0140 &#140;    
      Ž Alt+ 0142 &#142;    
      Ž Alt+ 0142 &#142;    
       Alt+ 0143      
       Alt+ 0144      
      ' Alt+ 0145 &#145; &nbsp;  
      ' Alt+ 0146 &#146; !  
      " Alt+ 0147 &#147;    
      " Alt+ 0148 &#148;    
      Alt+ 0149 &#149;    
      Alt+ 0150 &#150;    
      Alt+ 0151 &#151;    
      ˜ Alt+ 0152 &#152;    
      Alt+ 0153 &#153;   Marque déposée
      š Alt+ 0154 &#154;    
      Alt+ 0155 &#155; &gt;  
      œ Alt+ 0156 &#156; &oelig;  
       Alt+ 0157      
      ž Alt+ 0158 &#158;    

     


    En savoir plus :

    L'article de Wikipedia : "HTML" (Hypertext_Markup_Language)

    Sur le site d'Alsacreations.com : Comment bien déclarer l'encodage des caractères d'une page ?

    Et d'autres ressources :

    Les caractères HTML

    La table complète des caractères ASCII

    Un convertisseur universel en ligne


  • Les licences Creative Commons

    Les licences libres Creative Commons

    La charte Creative Commons facilite et encourage l'utilisation et la réutilisation d'œuvres produites et diffusées par le réseau internet pour un accès au plus grand nombre.

  • Lutter contre le spam

    Le Spam ? Qu'est-ce c'est ?

    Le spam est sûrement la plus grande calamité du web. Il est né avec lui d'ailleurs... Tous le monde en reçoit quotidiennement, mais comment s'en prémunir ?

En poursuivant votre navigation sur le site, vous acceptez l'utilisation des cookies...