Hello, je me suis amusé à faire un site de sondage pour les élections, c'est pas que ça me passionne tant que ça, mais au moins, ça m'aura donné quelque chose à faire :)

Venez voter! (et me dire si ya des bugs ;) )

Enfin ça serait sympa!

www.sondage-elections.fr

Je viens vers la communauté des développeurs sur Internet en priorité, comme ça je saurais peut être si mon site a des bugs, et j'aurais sans doute des avis constructifs! J'espère.
Voilà ben si vous avez des commentaires, des avis ou trouvez que c'est inutile aussi (c'est possible), vous pouvez me le dire :)
Bref du feedback svp! :)

14 réponses


Premiere critique, ton site est pété sur mobile.

apres manger j´irai sur mon ordi et je ferait un retour sur un environement classique

maroufle
Auteur

Salut, merci pour le retour, tu utilises quoi comme navigateur mobile?
Celui par défaut sur android impossible de lui faire faire accepter les DOMLoaded ou onload, ou rien, il prend pas les addEventListener, mais avec chrome ça fonctionne.
J'aimerais avoir des retours sur iphone parce que 'jen ai pas :(
C'est peut être pété sur iphone, j'ai juste utilisé l'émulateur de l'inspecteur de chrome pour tester.

C'est justement sur iphone que c'est pété

maroufle
Auteur

C'était le visuel ou l'utilisation? pour le visuel je n'avais pas géré l'overflow, chose que j'ai faite depuis hier.
Pour l'utilisation, je me base sur l'événement DOMContentLoaded javascript, le site est en javascript pur, il n'y a pas de fallback à ce niveau, j'aurais sans doute dû utiliser JQuery pour avoir des fallbacks, mais par soucis de rapidité, j'ai opté pour du JS pur et le minimum de dépendances.

il y a un énorme scroll horizontale, la page n'est pas du tous responsive

maroufle
Auteur

la page est responsive, mais j'ai pas d'iphone pour tester son comportement ;)
à vrai dire sur l'émulateur de google chrome ça passe, après le responsive et ses limitations, c'est pas facile! Surtout en gérant aussi les cas d'utilisation de MSIE/Edge qui demandent des règles spécifiques aussi :/ je vais voir ce que je peux faire pour ce scroll horizontal, mais la zone est assez petite, il va sans doute falloir que j'empile les éléments, chose que j'aurais voulu éviter.

maroufle
Auteur

Bon un grand merci pour ton aide, j'ai rectifié pas mal de choses, il reste un très léger scroll parce que le bouton dépasse légèrement sur la droite. En tout cas si l'émulateur d'iphone que j'ai utilisé fonctionne correctement :)

Sur mobile c'est pas top, on descend pour voir les sondages, on clique, et on ne sait pas qu'il faut remonter pour "donner son intention de vote", au passage les données sont toujours à 0 sur mobile.

Sinon sur desktop c'est simple et efficace.

maroufle
Auteur

Oui parce que j'ai changé la disposition, c'est pour ça qu'à la base je ne voulais pas empiler les éléments, mais actuellement, vu le peu d'espace dispo et les problèmes sur certains navigateurs mobile, j'ai fait ce choix, pour que ça soit moins crade, mais c'est vrai c'est pas pratique du tout!
Pour changer ça il faudrait une refonte complète pour faire des accordeons à la place d'une zone d'informations.
Et si les données restent à 0 c'est qu'il n'arrive pas à faire la requête ajax, sans doute un problème javascript, parce que s'il arrive pas à créer l'objet XMLHTTP normalement il ouvre un alert.
J'utilise cette fonction.

function getXMLHttpRequest() {
    var xhr = null;
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest(); 
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    return xhr;
}
maroufle
Auteur

Un autre cause possible de la non réponse aux requêtes Ajax peut être que mes scripts ne répondent qu'au domaine www.sondage-elections.fr pas à celles sans le www.
Je tente de trouver une solution pour ça avec le serveur en bois qu'il y a sur le serveur mutualisé, mais pour l'instant j'ai pas envie de réécrire le code pour changer les entêtes de réponse alors qu'une simple réécriture des url pourrait suffire...Faut que j'attende la réponse du service client parce qu'actuellement rien n'est utilisable dans les .htaccess et j'ai aucune info sur le serveur autre que 'apache' ;)

maroufle
Auteur

Oui je suis d'accord c'est très moche..Je changerais ça un de ces 4, avec un framework ou un template peut être, pour faire des accordéons, et styliser les modals qui sont sur un js/css à part.
En tout cas niveau conversion ça convertit! Très bien même...Du coup des fois la simplicité a du bon, même si je suis bloqué par la légalité de devoir demander l'acceptation des cookies avant de pouvoir voter, vu que tout est sur la même page.
Il faudra aussi sans doute que j'inclus JQuery, j'ai voulu démarrer avec le strict minimum, mais vu le casse tête que c'est pour avoir un maximum de navigateurs compatibles, mieux vaut intégrer JQuery.

Mon soucis principal à la base c'était la sécurité, et pour l'instant ça a l'air de tenir bon, malgré les robots attackers du web :)

Salut,

Il est très facile de fausser les votes avec un script puisque tu te base sur les cookies.
Hors tu ne peux pas croire les cookies. J'ai pu voter 2x en supprimant mon cookie.

En revanche si tu te bases sur un fingerprint du navigateur, ça sera beaucoup plus difficile de tricher.
Voici une lib qui fera très bien le boulot https://github.com/Valve/fingerprintjs2

maroufle
Auteur

Salut, ça m'étonne parce que je regarde aussi l'IP
Mais bon, ça va rester comme ça pour l'instant, je peux voir un flood de vote et les effacer après...C'est pas un fingerprint mais un peu plus d'infos logguées que juste un cookie.
Je vais regarder ta solution par curiosité par contre :)

maroufle
Auteur

Bon je vois à peu près comment ça fonctionne.
J'ai voulu pour mon site partir de 0 pour une fois, sans librairies externe, rien que mon code et pas plus, pour ma formation personnelle, alors c'est sûr c'est plein de défauts, à commencer par la mocheté, et la fiabilité, mais au moins j'apprend de mes erreurs et c'est plus formateur je trouve.
J'ai juste sous traité les modals, pas plus, parce que j'avais la flemme de gérer ça en plus et que je voulais le sortir au plus vite.

En gros le fingerprint permet d'identifier un device, et encore, pas un robot qui serait là pour détruire mon site, parce qu'il suffit de changer une info et le fingerprint change aussi.
Un de ces paramètres: (ça me fait penser aux scripts pour détecter un adblocker, on change d'adblocker et on a plus de problème :) )
edit: mais je penserais à cette solution pour une prochaine fois ! Au moins pour bloquer les pti malins qui voudraient passer par des VPN.

UserAgent
Language
Color Depth
Screen Resolution
Timezone
Has session storage or not
Has local storage or not
Has indexed DB
Has IE specific 'AddBehavior'
Has open DB
CPU class
Platform
DoNotTrack or not
Full list of installed fonts (maintaining their order, which increases the entropy), implemented with Flash.
A list of installed fonts, detected with JS/CSS (side-channel technique) - can detect up to 500 installed fonts without flash
Canvas fingerprinting
WebGL fingerprinting
Plugins (IE included)
Is AdBlock installed or not
Has the user tampered with its languages 1
Has the user tampered with its screen resolution 1
Has the user tampered with its OS 1
Has the user tampered with its browser 1
Touch screen detection and capabilities
Pixel Ratio
System's total number of logical processors available to the user agent.