————————–
Aujourd’hui, je viens vous parler d’un fait réel dont j’ai été témoin en parcourant les sujets sur le Site du Zéro, et qui prouve combien la règle du « payant = qualité » n’a aucun sens dans le monde logiciel.

Ce cas est celui d’un homme, qui a acheté le logiciel « Web Creator » pour faire le site-vitrine pour un proche qui fait de la reproduction sur toile déco. Mais bien vite, il s’est rendu compte, par les retours de sa clientèle, que le code généré est bordélique et lourd, bourré de scripts, avec du texte converti en images et tout ça, pour une page lourde à charger, ce qui ne remplissait pas du tout l’objectif d’un site simple, efficace et rapide. Vous pouvez d’ailleurs lire son commentaire sur ce lien

Même si le monsieur a retiré le lien de son post, j’ai pu finalement récupérer l’adresse du site grâce au cache de Google après avoir lancé la recherche avec le titre complet du sujet.

Voici donc l’adresse du site (Note : Le site a été totalement refait depuis)

Ce que vous voyez en premier n’est que l’intro. Allez plus loin et vous verrez combien ça se gâte vite !

Mais puisque le site sera bientôt refait par quelqu’un qui refera le site avec du code valide, j’ai pris des captures et récupéré les codes HTML pour les mettre dans des fichiers .txt afin de pouvoir continuer à vous montrer les arguments pour éviter Web Creator. Je prends aussi à l’avance le poids de chacune des pages examinées, pendant que la version actuelle du site est présente.

D’abord, on commence par la page d’accueil, sur laquelle on arrive après avoir passé l’intro

Mais avant de continuer, je vais vous montrer deux captures pour vous montrer l’absurdité du code généré par Web Creator.

La page, avec Javascript désactivé : Lien
La même page, avec Javascript activé : Lien

Première constatation : Ça requiert que Javascript soit activé pour que la page se centre ! O_O
Pourquoi donc utiliser du Javascript pour centrer une page, alors qu’on peut le faire avec margin:auto; en CSS et qu’il existe des hacks CSS pour les versions de navigateurs ne reconnaissant pas la propriété ? C’est des kilo-octets pour rien, en plus d’être à l’encontre des règles de bonnes pratiques qui déconseillent l’abus de Javascript, ainsi qu’une utilisation intrusive (en remplacement plutôt qu’en surcouche) ! De plus, le fait de mettre la page à gauche est fatiguant pour ceux qui ont une grosse résolution ou un écran large !

Maintenant, préparez vos Gravol, car on va maintenant regarder le code !
Voici le .txt du code de la page d’accueil : Voir le code

Imbuvable, n’est-ce pas ? On peut déjà faire les constatations suivantes :

• Le code est bourré de code Javascript qui aurait pu facilement être évité
• Il n’y a aucune feuille CSS externe, tout est imbriqué à même les éléments HTML avec l’attribut style où l’on voit du positionnement absolu à profusions, en plus des balises de mise en forme !
• Il n’y a quasiment pas de balises sémantiques ! En débranchant le CSS, on remarque encore plus le bordel, en voyant la page arrangée dans un ordre complètement illogique, ainsi que la quantité inutile d’images, en particulier pour le fond de page ! D’ailleurs, je viens de prendre deux captures pour vous le montrer : capture partie 1 – capture partie 2
• Aucun attribut alt dans les images, pour les textes de remplacement, pour ceux qui ne peuvent voir les images, dont les non-voyants ou les robots de référencement ! Ceci est encore plus catastrophique quand il s’agit d’images porteuses de contenu ou servant de support de lien !

Et avec un tel code généré, la page d’accueil fait plus de 700 Kilo-octets, ce qui est extrêmement lourd pour une simple page d’accueil ! La même page, codée selon les normes du W3C (feuille externe, pas de javascript inutile, nombre d’images au minimum, et celles-ci optimisées), aurait pesé plus de 7 fois moins ! Pour un hébergement ayant une limite de bande passante, ça fait une énorme différence, car si la page d’accueil, dans son état actuel était visitée 1000 fois, la bande passante utilisée serait aussi grosse que la capacité d’un CD et aurait donc approché le giga-octet ! La même page, aux normes avec son petit 100Ko, n’aurait, en 1000 visite, généré que 100 Mo, soit 600 Mo de moins qu’avec la page actuelle !

Maintenant, passons à l’analyse de la page suivante : la page de présentation.

Comme avec la page d’accueil, je vous montre la capture avec le style activé

Sur la capture, le texte paraît être du texte brut, mais attention ! Ce que vous allez voir, dans la capture suivante va troubler tout bon webmaster respectueux des standards : Partie 2 de la page, sans style

Le bloc avec le texte que vous avez donc vu est une image ! Et le texte réel est caché !

Et je ne ferai pas de surprise en montrant le code, tout aussi bordélique et lourd : Voir le code

Et je ne vous ferai pas de surprise non plus sur le poids par rapport à l’optimisation possible : 383 Ko ! Aux normes, elle aurait pu faire moins de 80 Ko, voire même moins de 50 Ko !

La page de contact est sensiblement pareille à la page de présentation (texte-image inutile), donc je passe à la dernière page à analyser, qui contient un formulaire : la page pour les clients, dont voici sans tarder la capture d’écran

Première constatation : On ne voit aucun label, ces étiquettes que l’on met avant chaque champ de formulaire et qui, par souci d’accessibilité, doit être lié à son champ ! Les « étiquettes » sont écrites à même les champs de formulaire !

Et maintenant, on débranche le CSS : Page client sans CSS

Vous pouvez constater, encore une fois, l’incohérence de la structure de la page générée : le champ multiligne se trouve après le bouton « Envoyer » et en plus, le texte qui s’affiche avant le formulaire avec le CSS activé, se trouve placé après le formulaire une fois le style désactivé !

Vous pouvez d’ailleurs constater l’absence d’éléments label et l’incohérence de la structure en voyant le code de la page

Et on remarque alors que le bouton « Envoyer » est inutilisable si Javascript est désactivé !

Et on finit avec, encore une fois, l’analyse du poids de la page qui nous donne 223 Ko cette fois-ci et qui, encore une fois, aurait pu être largement optimisé en respectant les normes, ce qui fait que la page aurait pu faire facilement moins de 50 Ko !

Conclusion

À partir des trois pages analysées, j’ai pu vous montrer combien un logiciel payant n’est pas nécessairement meilleur que les alternatives libres comme KompoZer qui respectent mieux les standards du Web. Et croyez-moi, ce n’est pas le premier site « WeCreator-made » que j’ai vu. Les autres sites que j’ai vus et qui ont été générés avec le même logiciel, soit le site-vitrine de Help-On-Line.org (qui n’existe plus), ainsi que le site de la v1 de Host-on-line.org (qui n’existe plus non plus, et qui appartenait à Help-on-line.org), et le code de ces deux sites était aussi horrible. De plus, j’ai même vu, via ce sujet, un site généré avec ce logiciel, dont les javascripts ne fonctionnaient même pas sous les autres navigateurs mise à part Internet Explorer et Netscape Communicator ! Oui, vous avez bien lu, NETSCAPE COMMUNICATOR ! Un vieux navigateur qui date d’aussi loin que mes premières années sur le Web, soit il y a près de 10 ans !

Ma recommandation

Que ce soit pour un petit site persos ou pour un gros site d’envergure, ne jetez pas vos euros ou dollars par la fenêtre et, autant que possible, tournez-vous vers ces alternatives qui ne vous coûteront pas un sou, mais qui auront un résultat bien plus satisfaisant :

• Écrire votre site de A à Z. De cette façon, votre code sera éditable à volonté, et vous pourrez y intégrer du PHP par la suite, sans problème. Vous pourrez apprendre les bases sur le Site du Zéro
• Utiliser un système de gestion de contenu : Les choix de scripts libres ou freeware (gratuit et non-libre) ne manquent pas, que ce soit Joomla!, XOOPS, SPIP, Drupal, GuppY ou CMS Made Simple pour les sites complets, phpBB, PunBB, FluxBB, Connectix Boards, MyBB, SMF, FSB ou XMB pour les forums, ou bien WordPress, Dotclear ou PluXml pour les blogs, pour vous permettre de monter votre projet rapidement si vous n’avez pas le temps de le coder vous-même. De plus, la plupart de ces scripts sont respectueux des standards du Web et pas trop lourds pour la bande passante (mais après, ça dépend du template).
• Ou à la limite, utiliser un éditeur HTML libre comme KompoZer qui s’appuie sur le moteur de rendu Gecko (le même que celui utilisé par Mozilla Firefox) qui est, déjà au départ, respectueux des standards. Mais cette option est plus limitée que les deux premières et je ne vous conseille pas de vous reposer uniquement sur l’aspect visuel.

Alors, bon webmastering sur le chemin de la lumière, avec l’esprit serein à l’idée d’avoir gardé vos sous pour acheter autre chose… comme par exemple un cadeau pour l’être aimé !

Déjà que les articles en général ne sont pas ce qu’on pourrait appeler des articles de qualité, mais là, ça « fesse dans l’dash » quand je vois deux erreurs aussi énormes que celles dans cet article !

Oui, je sais, il y a deux pays africains dont le nom n’a comme différence que les trois lettres à la fin que l’un a, mais que l’autre n’a pas, mais quand même, ça prend pas la tête à Papineau pour vérifier le gentilé dans un dictionnaire, ou même sur Wikipédia qui, malgré les critiques, n’est pas à barrer définitivement pour autant, faut juste éviter « l’absolutisme », bon Yeu ! C’est pas dur ça une tite recherche pour vérifier : Fichier > Nouvel onglet. Pis tu tapes « fr.wikipedia.org », puis dans la boîte de recherche, tu tapes « Nigéria » !
D’ailleurs, voici le lien !

Ensuite, une deuxième erreur qui m’a deux fois plus frappé : dire « animaliste » au lieu de « animiste » !
Scuze là, mais tout ce que « animaliste » me fait penser, c’est les militants vénérant Saint-Brigitte Bardot qui viennent gueuler contre la chasse au phoque une fois par année ou qui passent proche de vouloir faire brûler au bûcher tous ceux qui ont moindrement un ti-bout de fourrure (même de la fausse !). En gros, c’est ceux qui font de la défense animale (Voir l’article Wikipédia sur l’animalisme) !
Bon, désolée pour la caricature grossière, mais vous comprendriez mieux si vous lisiez mon background que j’ai postée sur Phobies-Zéro concernant ma phobie de la défense animale !

Pour revenir au sujet, tous ceux qui se souviennent moindrement de leurs cours de géo/histoire doivent normalement savoir que quand on parle des religions et cultes traditionnelles des peuples indigènes, on appelle ça « animisme » (Voir l’article Wikipédia sur l’animisme) !

Or, je me demande bien combien ce journaliste a eu comme résultat en géo/histoire au secondaire, pour avoir commis deux erreurs aussi frappantes dont je me demande même si ces erreurs auraient passé dans le Journal de Québec/Montréal ! Un journaliste digne de son métier se doit d’avoir une bonne connaissance en géographie et en histoire ! Mais là, à voir ça, je me demande si de 1) ces matières sont bel et bien des prérequis quand on veut étudier en journalisme et si de 2), celui qui a écrit l’article a bel et bien fait des études dans ce domaine…

Alors que je m’attendais à une news écrite en dur comme sur ce blog, voici ce dont j’ai eu droit : Voir la capture de la page (tous les scripts ont été autorisés).

J’ai beau avoir une connexion de 12 mégas, mais bâtard, il faut pas charrier sur la grosseur de l’image !! Elle est tellement énorme qu’elle s’affiche toute distordue sur Firefox ! À preuve, je vous donne le lien direct de l’image et ensuite, sous Firefox, cliquez-droit dessus et allez dans « Informations sur l’image ». Voici ce que ça donne :

l’image est tellement lourde que ça a même foiré l’affichage de la fenêtre lors de la prise de la capture…-_-

Près de 3500 pixels de haut et plus de 2500 de large pour 110 Ko !!! 800 pixels de large aurait largement suffi et l’image aurait été beaucoup plus lisible déjà pour ceux qui peuvent voir ou charger les images, mais cela reste un gros problème d’accessibilité, car du coup, cela pénalise ceux qui justement ne peuvent pas voir le texte, comme les non-voyants et ceux qui bloquent les images pour des raisons de petite connexion, ou encore les moteurs de recherche qui ne peuvent donc pas indexer le contenu ! Et n’en parlons pas de ceux qui essaient de lire la news avec leur smartphone !

À cause de ces dimensions gargantuesques, j’ai été obligée d’enregistrer l’image sur mon disque dur pour pouvoir lire le contenu en ouvrant l’image avec le visionneur d’Ubuntu ! Le faire en PDF ou encore mieux, le retranscrire en texte brut aurait été beaucoup plus sensée !

Ces deux liens illustrent bien combien certaines compagnies peuvent aller loin dans leur chasse aux sorcières pour protéger leur marque et leur image !

Où s’arrêteront-ils ?

S’ils commencent à revendiquer l’exclusivité des mots « face » et « book » en prétextant que c’est une marque distinctive, qu’est ce qui dit qu’ils ne vont pas commencer à s’attaquer à des sites qui n’ont AUCUN RAPPORT avec les réseaux sociaux, comme Face Your Manga, le célèbre générateur d’avatars manga dont Alsacréations.fr s’est servi pour la version actuelle de leur site, ou bien encore Framabook, l’éditeur de livres libres du réseau Framasoft qui est très connu dans le monde du libre ? Et tous ces autres sites qui ont soit book ou face dans leur adresse ou comme nom ou acronyme ??

Ce cas de figure me rappelle ce billet de Framablog, publié il y a quatre ans, où le président de l’association derrière Framasoft a fait face à une lettre recommandée de la part d’une compagnie éditrice d’un logicieil propriétaire qui détient la propriété sur le nom « Sage », qui est aussi le nom d’une extension Firefox qui est indexée dans l’annuaire de Framasoft ! Oui, je dis bien indexé et rien de plus, puisque Framasoft n’est pas l’éditeur de ladite extension ! Mais juste la présence de ce nom était suffisant pour qu’on fasse un caca nerveux !

Notre vocabulaire en otage

Alors, si on se met à déposer les mots du vocabulaire aussi courants que « face », « book » et « sage », et à en interdire l’utilisation, va-t-on se retrouver à être obligé à parler en klingon ou en elfique pour éviter tout problème juridique ???

Du coup, parti comme c’est là, j’ai ce pressentiment que Connectix Boards risque un jour d’être obligé de changer de nom parce que « Connectix » est aussi une marque de webcams, et que le groupe de symphonic metal épique Rhapsody of Fire sera quand même obligé de re-changer encore de nom même s’ils ont déjà ajouté le « of fire » suite justement à un problème juridique potentiel lié justement à une marque déposée !

Sérieux, ça craint grave, comme le disent nos cousins Européens… En attendant, j’ai envoyé un mail à Framablog pour leur transmettre les deux liens sur l’affaire Stupidbook. Espérons qu’un billet sur le sujet ne tardera pas à être publié.

Malgré mes déboires passées sur Ubuntu-Fr, plus ça va, plus je deviens pro-libre en voyant des cas pareils !

Je vous montre la capture du message en question, vous n’avez qu’à cliquer pour l’agrandir

Vous pouvez constater que la traduction est assez boiteuse. Juste dans le titre, on peut voir un accent oublié dans le mot « Protéger ». Ensuite, dans le corps du message, une faute d’accord de nombre qui me saute aux yeux : « Notre équipe de sécurité ont constaté ».
Tout de suite après, dans la même phrase, une mauvaise traduction et une faute d’accord du genre : que votre carte a été toujours utilisé sans votre permission »
Dans la phrase après, une double faute de ponctuation, un verbe mal conjugué puis encore un accent oublié : « Ainsi, il est verrouillé, Nous attend votre reponse
On pourrait aussi y compter une autres faute d’accord du nombre dans la première partie, dépendamment si on parle du compte (masculin) ou de la carte (féminin).

Juste ces fautes que j’ai relevées sont assez éloquentes et trahissent assez vite l’arnaque derrière ce message ! Mais malheureusement, il y en a qui ont visiblement tellement la tête en l’air qu’ils se font quand même avoir !

De plus, les pirates ont bien pris soin de cacher la véritable adresse derrière un texte.
Voici d’ailleurs l’adresse mise à nu : http://user27557.vs.easily.co.uk/Verified.Par.Visa/fr/SSLsecure/0x2er___/index/

Comment j’ai fait ?

Si vous utilisez un navigateur autre que Firefox, ou que vous utilisez une version de Firefox antérieure à 3.6, vous n’avez qu’à cliquer droit sur le lien > Propriétés et voilà l’adresse pirate trahie dans la fenêtre qui s’ouvre ! Si vous utilisez Firefox 3.6, soit vous installez l’extension Element Properties, soit vous cliquez-droit > Copier l’adresse du lien, pour ensuite la coller dans le bloc-notes pour découvrir le pot aux roses dont il est fortement probable qu’il s’agisse d’un site légitime qui a été piraté à des fins d’activités frauduleuses !

Je vous rappelle que quelle que soit l’institution bancaire, elles possèdent déjà vos coordonnées et elles ne vous les demanderont jamais par courriel !. On ne le dit jamais assez, puisque les vols d’identité continuent de progresser, et il faut donc continuer à sensibiliser les internautes pour ne pas qu’ils se retrouvent avec une très mauvaise surprise à l’aube de leurs vacances ou de la rentrée, ou des Fêtes !

Je termine ce billet en vous invitant à aller lire ces liens en rapport avec la sécurité de vos données sur les deux blogues que je suis régulièrement, pour en connaître davantage sur les dangers qui guettent l’internaute, quel que soit son OS :

• Blogue de Pascal Forget – Devenez un pare-feu humain
• Blogue de Pascal Forget – Étranges pourriels d’Hotmail
• Blogue de Pascal Forget – Les mots de passe, c’est comme les sous-vêtements
• Blogue de Pascal Forget – Votre ordinateur fait-il partie d’un botnet ?
• Blogue de Pascal Forget – Vous voulez savoir qui visite votre profil Facebook ? Embêtez vos amis !
• Blogue de Pascal Forget – Découvre qui te bloque sur MSN (en donnant ton mot de passe à des fraudeurs)
• Blogue de Nelson Dumais – Voler, bible à la main
• Blogue de Nelson Dumais – Antihameçonnage 101
• Blogue de Nelson Dumais – Plus fort que moi
• Blogue de Nelson Dumais – Le ministre Jean-Pierre Blackburn et moi victimes de hameçonnage
• Blogue de Nelson Dumais – Main gauche, main droite
• Blogue de Nelson Dumais – Un petit séjour en Iraq, via le Nigéria ?
• Blogue de Nelson Dumais – L’arnaque du jour
• Blogue de Nelson Dumais – Sachant que le pire est à venir
• Blogue de Nelson Dumais – Méfiez-vous d’Antivirus 2008

MAJ le 08/08/10 : Un tutoriel « à partir de zéro » vient d’être publié sur le Site du zéro, où tout est expliqué au sujet du phishing, je vous recommande donc fortement de le lire !
» Ne pas se laisser avoir par le phishing