internet

  • 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


  • Joomla piraté : comment diagnostiquer les problèmes et les résoudre ?

    Cet article concerne particulièrement le Google Results Defacing, ou comment résoudre le problème des résultats de recherche Google détournés au profit de sites tiers malveillants...

    Quand votre identité numérique est volée au profit de hackers peu regardants...

     

    A propos du Google Results Defacing

    Sommaire

    1. Avant-propos sur Joomla!
    2. Découverte du problème...
    3. Qu'est-ce qui se passe ? Le diagnostic du problème...
    4. Premiers réflexes...
    5. Premières actions pour limiter les dégâts...
    6. Trouver la source du problème...
    7. Traitement du second cas : Les "liens de menu" détournés
    8. Traitement du second cas : La balise "titre" détournée
    9. Invoquer Google pour rafraîchir le référencement du site
    10. En résumé...

    #1. Joomla is free
    #2. Joomla already includes the most common features
    #3. Joomla Extensions Directory
    #4. Joomla is supported by volunteers
    #5. Joomla is international
    #6. Joomla is well coded
    Conclusion : Socially and technically this is the best software to build the future of the web.

    Valentín García - Article"6 reasons why Joomla! is the best CMS"


    Joomla!

    Mon Joomla a été piraté !Je suis assez friand du CMS grand public Joomla! et je le mets en œuvre pour moi-même et quelques clients depuis plusieurs années (depuis la version 1.5…) et je le trouve personnellement bien plus puissant que son plus célèbre concurrent Wordpress (30% de part de marché en 2018, soit environ 19 millions de site, contre 2,5 pour Joomla!)… Mais c'est surtout une histoire de goût et d'expériences personnelles, et d'habitudes....

    Au fil du temps, j'ai pu apprécier ses atouts, sa simplicité d'usage au quotidien et la clarté de son interface administrateur bien plus précise et commode que celle de son rival (même si ce point est à relativiser bien évidemment)… et découvrir aussi ses faiblesses… Eh oui, victime de sa popularité, comme ses concurrents les plus utilisés, Joomla tombe assez régulièrement sous les coups de boutoir des hackers qui s'amusent à montrer leurs compétences en prenant la main sur leur administration et leur fonctionnement. C'est de bonne guerre et crée de l'émulation pour avancer : finalement, le piratage est une bonne chose… sauf pour ceux qui le subissent de plein fouet !


    Un type particulier de piratage de votre site Joomla!

    Je prendrai le cas particulier du Google Results Defacing... Bon, ce terme n'existe pas encore, mais c'est le meilleur que j'ai trouvé pour décrire le problème rencontré… En gros, il signifie "affichage de résultats de recherche détourné". Concrètement, dans le rendu des termes SEO retournés par la page de résultat Google, on remarque bien que les infos retournées ne correspondent plus du tout à votre propre contenu normalement mis en ligne… En gros, le résultat des votre site est volontairement détourné pour faire le promotion d'un site tiers, avec lequel vous n'avez aucun rapport : l'angoisse ! Le résultat est grossier mais il vous ruine immédiatement votre réputation… D'autant plus que les infos retournée ne renvoient pas au site malveillant désigné (il n'y a pas de lien réellement activés). Heureusement, désormais Google a bien bien repéré le problème, mais il ne peut pas y remédier tout seul…

    Là, les liens de site sous le tite renvoient vers des sites pour acheter des stimulants aphrodisiaques... : l'angoisse !

    Des liens de menus (sitelinks) renvoyant vers l'achat de produits exotiques...

    Là, c'est le titre même de mon site internet qui a été détourné pour faire la promotion de produits alimentaires japonais : l'angoisse !

    Là, c'est carrément le "Titre" du site qui est détourné... Google fait une alerte, bien justifiée...

    Là, on a vraiment un gros problème, et Google est de la partie... Et on se doute que ça ne va pas être simple...

    Je tiens à préciser que je ne suis pas expert en sécurité réseaux, ni développeur, ni hacker du coup. Cet article vise simplement à vous faire prendre conscience des risques inhérents à l'utilisation d'un CMS comme Joomla! et à vous montrer comment réagir dans le cas de ce type de piratage - et des autres similaires - et comment remettre votre site d'aplomb sans avoir besoin de faire appel à un pro qui vous facturera la plupart du temps au prix fort car vous êtes dans l'urgence et que vous ne comprenez pas la mécanique mise en œuvre dans votre problème...


    Découvert et diagnostic du problème...

    Dans le premier cas, on voit que ce sont les liens du menu de navigation qui sont impactés et détournés... OK.

    Dans le second cas, c'est la balise "Titre" de description du site site qui est modifié : OK...

    Bon, on se rend immédiatement dans l'administration du Joomla pour voir ce qui s'est passé... et évidemment, on ne voit rien de spécial...

    Dans le cas d'un hébergement sur des serveurs mutualisés (OVH, 1and1, Amen, LWS...), ces hébergeurs sont bien sécurisés et disposent d'outils d'analyse et d'alerte permettant de bloquer certains comportements suspects issus du fonctionnement de votre site. Ici, c'est plus insidieux car ce n'est pas le fonctionnement du site qui est en cause, mais bien la manière dont il est référencé, et plus précisément dans la manière dont le Google le voit, ou l'interprète...

    Dans le cas du second site piraté, ce n'est pas tant ce que VOUS voyez sur le site qui compte - car d'ailleurs on ne remarque rien de spécial quand on le visite, ni dans l'affichage visible de la page, que dans le code source... - que ce que Google voit via ses robots indexeurs... Et là, c'est le drame... et c'est bien cela qui remonte de manière automatique dans les résultats de recherche...

    La page en cache telle qu'elle apparaît pour Google...

    Voilà la page "visible" pour Google, celle que l'on trouve en l'état dans le cache, en encore, là, ce n'est que le haut de page...
    Cliquez dessus pour voir l'étendue des dégâts...

    De l'importance d'un hébergement de qualité

    On ne le répètera jamais mais on ne fera jamais d'économie en choisissant un hébergement bas de gamme chez des prestataires qui proposeront certes des prix attractifs mais qui se révèleront à longue incapable d'assurer le sécurité de leur infrastructures et de monitorer efficacement les problème de piratage. 1and1 ou OVH par exemple peuvent réagir rapidement en cas d'attaque - en allant jusqu'à bloquer votre site ! - et même préciser le nom du ou des fichiers infectés qui pose(nt) problème... Ce n'est pas un luxe et cela a un prix, bien évidemment

    Le message d'alerte de 1and1 indiquant la détection d'un fichier malveillant sur votre site...

    Le message d'alerte de 1and1 indiquant la détection d'un fichier malveillant sur votre site...

    De l'importance d'utiliser des outils capables de vous alerter en cas de la survenue de problème sur votre site

    Google fait son job avec son service Google Search qui permet de lui donner accès aux données de trafic de votre site et qui réagit bien en cas d'activité anormale. C'est lui qui a alerté le client : mais encore fallait-il qu'il consulte ses mails pour le savoir...

    Le message d'alerte de Google Search indiquant la présence suspecte d'un nouveau fichier activé sur votre site...

    Le message d'alerte de Google Search indiquant la présence suspecte d'un nouveau fichier activé sur votre site...


    Premiers réflexes...

    On sait que le site a été piraté... Si, comme dans nos cas présentés ici, l'admin est toujours active, on se dépêche de mettre le site en "mode maintenance" pour suspendre temporairement le problème pour vos visiteurs... et stopper le compteur de stats du site qui profite incidemment de votre détournement...

    On regarde dans ses archives pour retrouver la dernière version de sauvegarde du site mis en ligne... Si vous n'en avez pas, vous pouvez solliciter votre hébergeur pour soit faire une restauration de fichiers à une date antérieur (bof...) mais surtout pour demander une copie de la sauvegarde la plus récente, et plus ancienne si possible. Bon, je sais, à ce stade, vous ne savez pas quand votre site a été piraté mais vous pouvez déjà faire la démarche pour vérifier si votre compte permet ce type de demande et pour voir comment cela se passe...

    Généralement, votre hébergement de base ne propose pas ce service et c'est donc une bonne manière de comprendre pour vous - ou votre prestataire webmaster - que les sauvegardes sont essentielles car souvent les effets du piratage de votre site peut prendre plusieurs jours, voire plusieurs semaines, avant d'être visibles et impactants...

    Pensez aussi du coup à vérifier votre base de données et ses sauvegardes : dans le cas d'un site piraté par des processus de mail bombing, sa taille croît de manière anormal de manière continue (1and1 par exemple vous alerte dans ce cas en indiquant que le site enregistre un nombre anormal d'enregistrements d'envoi de mail... après avoir suspendu le service).

    1and vous alerte en cas d'activités anormales sur sur site...

    1and vous alerte en cas d'activités anormales sur site, et notamment pour l'envoi massif de mails...


    Premières actions pour limiter les dégâts...

    On est dans l'urgence et on ne sait pas ce qui s'est passé... Est-ce un piratage à l'aveugle, des robots qui ont pu investir votre site d'une manière ou d'une autre ? Vos infos confidentielles (code d'accès ftp, compte de votre compte client chez votre hébergeur, votre propre ordinateur...) ont peut-être été récupérés et utilisés...

    01 - Changez vos identifiant et mot de passe de Joomla!

    Retrouvez ce codes et commencez par modifier votre identifiants et mot de passe de votre CMS Joomla : ce sera l'occasion de voir s'ils n'ont pas déjà été modifié (mais vous le savez déjà si vous avez suivi l'étape précisée juste avant...).

    02 - Changez vos identifiant et mot de passe de votre compte d'hébergement !

    03 - Changez vos identifiant et mot de passe de votre base de données SQL !

    Oui, je sais, c'est lourd... mais au moins cela de voir si c'est l'un de ces comptes qui a été piraté, volé ou cracké... Et de repartir sur de bonnes bases pour la suite, et plus sereinement


    Comment trouver la source du problème ?

    Comme je n'ai rien vu dans l'admin, c'est donc ailleurs que je dois chercher... et donc dans les innombrables fichiers du Joomla que je vais devoir chercher la source du problème... Et des fichiers dans le Joomla, il y en a des milliers !

    On se tourne donc alors vers l'arborescence du site via son Dreamweaver ou son client FTP pour voir ce qu'il se passe en ligne sur le serveur d'hébergement...

    Et on se doute bien que ce sont les fichiers eux-mêmes (plus rarement la base de données SQL) qui ont été tripotés d'une manière ou d'une autre : soit des fichiers importés par contrebande, soit les fichiers eux-mêmes qui ont été modifiés ou réécrits pour y mettre quelque chose de plus... Oui, c'est ça le terme : un script malveillant !

    Mais comment et où le trouver ?

    On peut commencer par un truc tout simple pour voir si quelqu'un, ou quelque chose à bien piraté votre site en faisant une simple recherche dans les fichiers du site sur le terme "hacked"... et on a rapidement trouvé un fichier "txt" avec la signature du pirate car ce sont des gens qui aime bien la publicité - sous un pseudo bien évidemment - et qu'il signent pas conséquence souvent leur crime !

    Pour le premier cas, on a trouve "Hacked By MuhmadEmad" dans un fichier texte tout simple ("1998.txt").

    Le second dans l'une des variables d'un des fichiers PHP infecté : else{echo "Uploader By Psyco!";}

    Bon, donc le site a bien été visité et piraté en son sien : on peut passer aux choses sérieuses...

    1ère méthode : La date des fichiers

    La première méthode est la plus simple, mais elle peut s'avérer vite fastidieuse (si on ne touche pas sa bille en lignes de commande via SSH...). Oui, le fichier ajouté dans l'arborescence du Joomla, ou celui modifié, doit dans la majorité des cas indiquer une date de création ou de modification différente de celle des autres fichiers statiques (oui, il y a des fichiers qui eux changent et sont modifiés en permanence comme les fichiers de cache ou les fichiers de logs... et en fonction aussi des autres surcouches utilisés pour votre Joomla comme les Frameworks T3 ou Sparky...).

    On regarde donc scrupuleusement les dates des fichiers dans le schéma d'arborescence via votre client FTP :

    Ici, les fichiers du répertoire des modules...

    Ici, les fichiers du répertoire des modules... tout est OK et colle avec la date de déploiement officiel du site

    Ici, Bingo ! La date des fichiers est plus récente... Trop d'ailleurs, surtout si vous n'avez pas fait de mise à jour du CMS ou des contenus...

    Ici, Bingo ! La date des fichiers est plus récente... Trop d'ailleurs, surtout si vous n'avez pas fait de mise à jour du CMS ou des contenus...

    Cette méthode est la plus simple, mais elle demande une attention visuelle qui n 'est pas toujours évidente et surtout elle vous demandera de scruter TOUS les fichiers à l'intérieur de TOUS les répertoires... Y'en a pour plusieurs minutes et cela n'est pas toujours pertinent car de nombreux fichiers sont ajoutés ou modifiés régulièrement lors du fonctionnement normal de votre Joomla, et notamment les fichiers de logs, errors, cache... et d'autres en fonction de l'architecture de votre site (upload de pièce jointe de formulaire, fichier de compilation CSS, fichiers JS dynamiques...)

    2de méthode : Rechercher des fichiers au nom "exotique"

    Pour la première méthode, on regardait les fichiers distants, ceux qui sont en ligne et actifs : ceux qui fonctionnent une fois le visiteur arrivé pour consulter vos pages...

    Là, on va devoir plutôt rapatrier tous les fichiers du site, en local, pour mieux les examiner... Si vous avez déjà une version du site, vous la mettez de côté, pour archivage, et au pire, pour comparaison...

    On lance son client FTP - en ayant auparavant créé un répertoire/dossier vide - et on récupère tout à cet endroit. Il faut qu'il reçoivent TOUS vos fichiers transférés...

    NB : la plupart du temps, cette manip redonne une nouvelle date à vos fichiers (celle du jour, heure et seconde du fichier récupéré), ce qui rend caduque la méthode de détection des fichiers malveillants précédente (par date)...

    Première remarque

    Si votre logiciel anti-virus est assez puissant et malin, il vous indiquera qu'il a rencontré un fichier malveillant lors du transfert : ça, c'est cool ! Mais, si c'est le cas, passez outre cette alerte pour valider son acquisition en prenant bien soin de noter son nom, et son emplacement (son chemin dans l'arborescence du site).

    Une fois fait, nous allons pouvoir disséquer l'objet de nos inquiétudes... On fait une recherche au hasard sur des termes précis... On peut commencer sur le nom des fichiers par exemple... Le type d'injection de fichier malveillant se caractérise par leur nommage "exotique" : effectivement, générés de manière aléatoire, on peut les repérer assez facilement, lors de l'examen visuel : "x.php", "test49.php", "view35.php", "functions60.php", "b3z5fy.php"...

    Mais attention, cela n'est pas satisfaisant car des fichiers nommés "c.php", ou "empty.php"sont des fichiers réguliers et même obligatoires pour votre Joomla... Surtout, ces fichiers peuvent se retrouver implantés à peu près n'importe où dans l'architecture de votre site... Donc, on peut faire un examen visuel rapide pour voir si on en trouve mais cela ne peut rester que superficiel...

    Exemple de nom de fichier verolé qui squatte et détourne votre site Joomla...

    Il est intéressant quand même de faire cette recherche empirique juste pour voir si vous n'en trouvez pas 20 en quelques minutes... Et surtout pour voir, si vous en trouvez un, de regarder ce que renferme ce fichier et découvrir le type d'infection qu'il provoque, comme ceux-ci :

    Exemple de script malveillat capable de pourrir votre site Joomla...

    Voilà, on y est... C'est d'la bonne, enfin, bon, ç'est du rustique, mais c'est déjà assez efficace pour vous flinguer un Joomla...

    Là, on est pas mal ! On a trouvé le source du problème, en tout cas dans le cas d'un Hack classique de Joomla... Oui, ces fichiers renferment des lignes de code utilisant du "encrypt", du "encode", "64_decode", du "$GLOBAL",... bref des directives et des variables PHP classiques que tout bon développeur maîtrise et peut mettre en œuvre, et qui suffisent à prendre la main sur votre site, plus ou moins insidieusement, et surtout de manière entièrement automatique pour lui faire faire des choses que l'on ne souhaite bien.

    NB : Souvent, ces fichiers sont inopérants car mal écrits ou mal implémentés et se retrouve donc inactif... Il n'empêche qu'ils sont bien là, montrant qu'une faille de sécurité qui a été exploitée, ce qui n'est pas rassurant pour la suite...

    Seconde remarque

    Dans ce cas, il vous suffit de faire une recherche sur ces termes ("encrypt", "$GLOBAL" et surtout le "64_decode"...) pour repérer vos fichiers infectés... Et normalement, ce sera la révélation !

    Attention cependant, d'autres fichiers réguliers utilisent ces "$GLOBAL" et surtout le "64_decode", et il faut donc faire des comparaisons avec vos fichiers archivés - si vous les avez - pour vérifier et valider leur nocivité...


    Traitement du premier cas : Les "liens de menu" détournés

    Ce premier type de piratage est assez incongru mais de toute façon catastrophique :

    Là, les liens de site sous le tite renvoient vers des sites pour acheter des stimulants aphrodisiaques... : l'angoisse !

    Des liens de menus (sitelinks) renvoyant vers l'achat de produits exotiques...

    Ici, ce sont les liens du menu principal de navigation qui ont été détournés... mais ils ne sont pas activé... c'est un moindre mal mais c'est quand gênant et même catastrophique pour l'image et la crédibilité de l'entreprise...

    Dans ce cas, nous avons commencé par regarder le code source sans rien y voir de spécial même si Google ne voit en l'occurrence pas la même chose que nous.

    D'ailleurs, Google a bien fait son job en fait - via son serviceGoogle Search - car c'est lui qui a alerté le client : mais encore fallait-il consulter ses mails pour le savoir. Google n'est pas le seul a générer ce type d'alerte et 1and1 ou OVH par exemple peuvent réagir aussi en cas d'attaque et même préciser le nom du fichier infecté qui pose problème..

    Là, les liens de site sous le tite renvoient vers des sites pour acheter des stimulants aphrodisiaques... : l'angoisse !

    Le message d'alerte de Google Search...

    Puis nous sommes allé voir dans l'administration du Joomla, dans les Modules et les Plug-ins... mais rien de spécial non plus n'est apparu...

    Puis, après avoir récupérer les fichiers du site - en ayant mis de côté la dernière version que vous aviez en local sur votre poste - on fait une recherche anodine sur le terme "hacked"... et on a rapidement trouvé un fichier "txt" avec la signature du pirate "Hacked By MuhmadEmad". Bon, c'est déjà pas mal... On a pu voir du coup la date du jour où tout s'est produit...

    On pourrait alors regarder visuellement toute l'arborescence du site visuellement mais c'est trop fastidieux : on oublie cette méthode même si elle peut se révéler riche en enseignement via les dates des répertoires et des fichiers... et si vous avez un utilitaire pour effectuer des recherche par ce critère de dates...

    Dans notre cas, une recherche à "64_decode" a suffit trouver rapidement des fichiers infectés :

    Exemple de script malveillat capable de pourrir votre site Joomla...

    Ça, c'est déjà assez efficace pour vous flinguer un Joomla...

    Mais dans ce cas, aussi, il y en avait d'autres qui ne contenaient pas cette instruction...

    Exemple de script malveillat capable de pourrir votre site Joomla...

    Là, par contre, on a droit à un peu de tout...

    On est donc obligé de revisiter toute l'arborescence du site, et testant d'autres types de variables critiques, ou tout simplement en scannant le site via un logiciel anti-virus...

    En combinant plusieurs méthodes, empiriques et automatiques, on peut généralement trouver et supprimer les fichiers et les scripts malveillant !


    Traitement du second cas : La balise "titre" détournée

    Ce second type de piratage et de détournement concerne donc le renommage de la balise de "Titre" de votre site internet via les résultats fournis par Google !

    Là, c'est le titre même de mon site internet qui a été détourné pour faire la promotion de produits alimentaires japonais : l'angoisse !

    01 - Éradiquer la source du problème

    On a regardé le code source en ligne et là c'est l'angoisse car on ne voir rien de particulier dans le code source restitué !

    Là, c'est carrément flippant... mais sachez que beaucoup de choses sont flippant sur le net et que là, c'est carrément magique ! C'est regardant dans la page conservée en cache par Google que l'on voit toute l'étendue des dégâts : on y retrouve directement les contenus d'un autre site web complètement incrusté dans ma propre page d'accueil... En même, en faisant une recherche sur les autres pages en cache enregistrées, on voit que ce sont TOUTES les pages du site qui ont été infestées, et que même d'autres pages sont générées automatiquement et référencées : et elles sont des milliers ! La loose, quoi !

    Ce que vous voyez dans le code source en haut, et ce que voit et restitue Google Search...

    Ce que vous voyez dans le code source en haut, et ce que voit et restitue Google dans ses résultats de recherche...
    カルビ丼のたれ 2kg【日本食研】【業務用】 Ici, du japonais… Bol de riz salé 2 kg [Nippon Shoken] [pour usage professionnel]

    Le pirate se sert de votre site pour générer artificiellement du trafic vers des produits qu'il promotionne et pour lequel il est rémunéré d'une manière ou une autre...

    C'est évidemment une catastrophe : et voilà comment traiter le problème

    C'est avec -mauvaise - surprise que l'on a repéré dès le départ un nouveau fichier "google1adfa2ebabbe531e.html" à la racine du site... C'est un fichier de validation de site Google, qui permet de permettre l'exploration du site par les bots de Google et de générer des audits (via son service Google Search) et des stats (via son service Google Analytics).

    On a repéré dans l'arborescence du site l'endroit où se trouve la source de l'infection : c'est le répertoire "mod_tags_cloudbt"... On voit bien que sa date diffère ce celles de autres répertoires et qu'elle colle avec le commencement des problèmes...En faisant quelques recherches sur le net, on trouve bien des mentions à un module nommé"mod_tags_cloud", mais pas le nôtre spécifiquement...

    Le répertoire de module Joomla piraté vue via le client FTP

    Ici, le répertoire du module "mod_tags_cloudbt" piraté vue via le client FTP...

    Même si l'on voit qu'il n'est pas activé ("publié"), on serait tenté de le supprimer directement... mais ce serait un peu hâtif : on ne sait pas immédiatement si ce module est "indépendant" et s'il n'est pas relié à d'autres fonctionnalités réparties ailleurs dans l'arborescence du site... De toute façon, il est certainement présent dans l'un des champs de la base de données...

    Le module Joomla piraté vue dans le panneau d'administration

    Là, le module piraté vue dans le panneau d'administration...

    NB : Au indice, on voit que ce module montre un nommage particulier avec ses "_"... Et si on clique sur ce module, on remarque aussi queles expressions de traduction ne sont pas traduites : "MOD_SEARCH_XML_DESCRIPTION", "MOD_SEARCH_FIELD_LABEL_TEXT_LABEL"...

    On supprime alors le module directement depuis le panneau d'administration !

    On clique sur le petit menu contextuel "Statut" à gauche du nom du module et clique sur "Corbeille"...

    Mettre à la corbeille le module infecté Joomla

    On doit alors allez dans la colonne du menu de droit pour -"Sélectionner un statut" -... et on clique sur "Corbeille"...

    On voit alors le module dans la liste... On le sélectionne en cochant la case... et on remonte en haut pour cliquer sur le bouton "Vider la corbeille" !

    Le bouton Corbeille de l'admin Joomla

    Apparaît alors un message dans un cadre vert : "Message 1 - module supprimé avec succès"

     

    Et l'on ressent un petit soulagement ! Mais ce n'est pas fini !

    Eh oui, si on retourne sur le FTP et l'arborescence du site, on voit que le répertoire existe toujours... et les fichiers nocifs aussi ! Ah !

    Par contre, le champ de la base de données a bien été supprimé... Quand même !

    Là, on s'embête pas, on les supprime directement !

    Ici, avec Filezilla, on supprime définitivement le répertoire incriminé !

    Ici, via Filezilla, on supprime définitivement le répertoire incriminé !

    Là, on pense que c'est définitivement fait, ce qui est loin d'être le cas !

    Pour la cause du piratage, elle sont multiples mais la première est le fait que le Joomla n'était pas à jour et qu'avec le temps, la faille potentielle a bien été trouvée et exploitée par de petits malins...

    Ici, c'est un module qui est le point de passage par lequel le piratage s'est produit. Maintenant, la porte d'entrée -backdoor - est fermée, et même supprimée...

    Il est connu que les points faible des CMS et donc de Joomla sont des modules - ou extensions - qui sont vulnérable et en premier lieu les porte ouverte qui se trouve sur votre site comme les formulaires de contact ou d'inscription à un service... La technique la plus connue et la plus néfaste - au-delà des simples techniques de spamming automatiques qui font déborder vos boîtes mail - est l'injection de code...

    L'autre source du problème très connu sont les modules d'édition de contenus WYSIWYG natif de Joomla dont Tiny MCE (présentant déjàce type de piratage en 2009...).

    Évidemment, si vous utilisez des Frameworks ou des modules complémentaires vous multipliez les risques...

    02 - Nettoyer le site infecté

    On avait fait des recherches sur des fonction PHP et cela s'était avéré concluant mais pas suffisant. On aurait déjà pu faire une première recherche sur les caractères japonais - et chinois - qui surchargent les pages en contenus indésirable : ici, c'est facile ! Dans le répertoire de votre site, on recherche par exemple le caractère "中"... Et là, bingo !

    J'ai retrouvé non seulement le fichiers infectant mais aussi ses petits copains dans un répertoire nommé "managera"... qui effectivement montre les bonnes dates de modification...

    Le tableau PHP présentant les correspondances de chaines de caractères injectées dans les pages du site piraté

    J'ai aussi trouvé un autre fichier au format html lui qui m'a permis de mieux de comprendre la mécanique du détournement ()... Sans entrer dans les détails - qui me dépassent car je ne suis par un développeur -, on peut voir que c'est une mécanique de remplacement de code source via une technique de formatage de type Smarty qui est en œuvre : des variables sont injecté via des shortcodes présent dans la page html et qui se substituent à la page normale...

    Et les variables sous forme de shortcodes injectés dans les balises méta du site piraté

    Évidemment, on s'empresse de supprimer ce répertoire !

    Ici, les différents aspects de ce hacking très vicieux sont vraiment flippants :

    • Il a installé un module "mod_tags_cloudbt" qui n'avait pas été voulu par l'administrateur
    • Il a installé un répertoire"managera" contenant les instructions orientant l'affichage du contenu (en fonction du statut de l'utilisateur User-Agent, d'un visiteur des fichiers du site)
    • Il contient des instructions détectant le User-Agent pour montrer ce qu'il veut : votre navigateur = une page normale / un bot indexeur Google = la page détournée
    • Il a installé un fichier d'indentification de site Google à la racine du site pour permettre son exploration par les robots indexeur de Google
    • Il a ensuite créé un fichier sitemap - arborescence du site au format xml - contenant ici plus de 8800 entrées (pages)
    • Il a ensuite invoqué Google pour référencer toutes ces pages virtuelles
    • En bonus, il contient aussi un mapping de votre URL qui masque une URL de destination pour montrer la publicité indésirable...

    Bref, des milliers de pages créées artificiellement - que l'on peut voir dans le fichier sitemap lui-même impacté par cette mécanique - et des pages qui sont bien référencées par Google Search...

    Le fichier Sitemap piraté !

    Le fichier Sitemap piraté vu par Google !


    Invoquer Google pour rafraîchir le référencement du site

    Il vous faut bien sûr un compte Google !

    Vous avez bien évidemment un compte Google, que vous avez activé au moins pour activer le service de stats via son service Google Analytics. Du coup, il vous faut y revenir pour activer le service complémentaire qui vous permet d'auditer et surtout de "piloter" de manière assez simple la manière dont Google travaille pour analyser le contenu de votre site et l'indexer de manière efficace pour le rendre accessible aux réponse des internautes lorsqu'il font une recherche Google...

    Si nous avions regardé de plus près cet outil puissant de monitoring Google, nous aurions été alerté très rapidement de la survenue d'un problème sur le site...

    Tous les messages et les alertes sont dans le Search Console

    Tous les messages et les alertes sont visibles dans la partie "Messages" de Search Console

    Et surtout, qu'un invité non prévu s'est rendu maître de certaines fonctionnalités de mon compte en activant le droit d'accès au site via un fichier de validation :

    Tiens, le voilà donc mon pirate ! Mister ...

    Regénérer un fichier Sitemap propre pour la nouvelle indexation

    Le site est nettoyé de ses fichiers infecté... On demande donc de générer un nouveau fichier sitemap sur le site via des outils comme le module OSMap Free que j'utilise depuis longtemps... Une fois activée, c'est ce fichier sitemap au format xml qui sera soumis à Google pour lui demander de réindexer le contenu du site :

    Les informations détaillées du sitemap soumis à Google

    On active les fonctions d'audit et de validation du site via Google Search

    Et ici, via son service Google Search, on demande à Google de faire repasser ses bots indexeurs sur toutes les pages du site :

    Les informations détaillées du sitemap soumis à Google

    Eh voilà... le processus est lancé... Google va lancer ses bots rapidement et explorer de nouveau le site et toutes ses ramification internes. On peut aussi lui indiquer directement via un formulaire qui l'on a traité le problème pour accélérer les choses.

    Vous verrez alors rapidement dans vos fichiers de logs les requêtes venant de Google qui vont croître de manière parfois ahurissantes ! (oui, dans la base de données les sessions explosent, et dans le module "Redirections de liens" de Joomla, vous verrez les erreurs s'accumuler...).

    Et on surveille tout ça !

    Surveillez ce qui se passe dans Google Search, et si tout se déroule bien, vous verrez votre notoriété sur Google revenir à la normale après quelques jours d'attente...

    L'approbation de réexamen par Google


    En résumé...

    Mettre systématiquement à jour votre site Joomla!

    Toujours suivre les instructions de mise à jour des versions Joomla pour ne pas rompre la fiabilité et la sécurité de votre site !

    Oui, c'est la moindre des choses et j'ai souvent du mal à faire comprendre à mes clients et mes amis pour qui je travaille que c'est la première chose à faire, même avant la mise des contenus de votre site. Je sais que c'est pénible : copier en local la version actuelle en ligne (enfin, le transfert des fichiers se fait automatiquement une fois lancée...) et sauvegarder la base de données (ce qui demande quand même un peu de connaissance pour accéder et exporter la BDD) mais une fois fait, vous verrez que ces opérations sont simples et rapides...

    Joomla - Version 3-8

    Il en va de même d'ailleurs lors de la mise à jour des plug-in et des modules du site qui sont cependant moins urgentes comme pour les fichiers de langue...

    Quand faire ces mises à jour ?

    Joomla est bien fait pour ses administrateur et des alertes automatiques apparaissent directement lorsque vous vous connecter à votre admin lors de la diffusion des MAJ :

    Alerte de mise à jour Joomla

    Astuce :

    Vous pouvez demander à recevoir une notification par mail en activant le plug-in dédié :

    Activez le plug-in de notifiaction de mise à jour Joomla

     

    Message email alertant de la diffusion de la mise à jour de joomla.

     


    A vous de jouer !

    En suivant les directives listées ci-dessus, vous pourrez résoudre votre problème de piratage en quelques heures... et rétablir votre notoriété sur Google après quelques jours d'attente...

    Infos spécifiques à Joomla :

    Les sites officiels de Joomla : www.joomla.org (en.) / www.joomla.fr (fr.)
    Le blog dédié à la sécurité de Joomla : www.joomla.org (en.) /www.joomla.fr (fr.)
    Les Release - mises à jour - officielles : www.joomla.org/announcements/release-news.html (en.)

    Des exemples de failles de sécurité Joomla :

    https://www.joomla.fr/actualites/joomla-3-4-6-est-disponible-mise-a-jour-de-securite-critique (fr.)
    https://www.lexsi.com/securityhub/analyse-recentes-failles-joomla-creation-de-compte-elevation-de-privilege/ (fr.)
    https://blog.ripstech.com/2017/joomla-takeover-in-20-seconds-with-ldap-injection-cve-2017-14596/ (en.)

    Des infos de Google pour comprendre et régler le problème :

    https://support.google.com/webmasters/answer/3311329 (fr.)
    https://developers.google.com/web/fundamentals/security/hacked/clean_site (en.)
    http://www.arobasenet.com/2018/03/relancer-indexation-google-4511.html (fr.)

    Des infos pour auditer et sécuriser votre site web :

    5 outils en ligne pour tester la sécurité d'un site web (fr.)
    https://www.nosyweb.fr/astuce-joomla/comment-securiser-et-proteger-joomla-3-contre-les-hackers.html (fr.)
    https://blog.sucuri.net/2015/12/remote-command-execution-vulnerability-in-joomla.html (en.)

    Erwan Corre - Mars 2018


  • 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 ?

    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.224.91.246

    > 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


  • 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"


  • 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...
    Toutes les balises HTML en détail (en.)


  • 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


  • 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.

  • 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...