Mais bref, pour être sûr et certain, on va utiliser plusieurs méthodes qui s’assurent que ça fonctionne bien sous tous les navigateurs.

Bloquer onPaste avec JQuery

Une solution est fournie là (et la même est redonnée là). J’ai testé, ça fonctionne niquel : que ce soit le Ctrl+V, le clic droit + coller, bref, ça bloque tout. J’ai retenu cette solution.

<script type="text/javascript">
   $(document).ready(function () {
      $('#id_of_textbox').bind('paste', function (e) {
         e.preventDefault();
      });
   });
</script>

Sachant que si on veut bloquer le Copier/Couper, on peut rajouter cut et copy dans le bind(‘paste’, ce qui donnera bind(‘cut copy paste’

Bloquer le onPaste sans JQuery

J’ai trouvé sur le web deux solutions pour rajouter manuellement le onPaste dans le navigateur, et ce sans utiliser JQuery.

La première solution, trouvée sur StackOverflow :

<script type="text/javascript">
// Register onpaste on inputs and textareas in browsers that don't
// natively support it.
(function () {
    var onload = window.onload;

    window.onload = function () {
        if (typeof onload == "function") {
            onload.apply(this, arguments);
        }

        var fields = [];
        var inputs = document.getElementsByTagName("input");
        var textareas = document.getElementsByTagName("textarea");

        for (var i = 0; i < inputs.length; i++) {
            fields.push(inputs[i]);
        }

        for (var i = 0; i < textareas.length; i++) {
            fields.push(textareas[i]);
        }

        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];

            if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
                field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
            }

            if (typeof field.onpaste == "function") {
                var oninput = field.oninput;

                field.oninput = function () {
                    if (typeof oninput == "function") {
                        oninput.apply(this, arguments);
                    }

                    if (typeof this.previousValue == "undefined") {
                        this.previousValue = this.value;
                    }

                    var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");

                    if (pasted && !this.onpaste.apply(this, arguments)) {
                        this.value = this.previousValue;
                    }

                    this.previousValue = this.value;
                };

                if (field.addEventListener) {
                    field.addEventListener("input", field.oninput, false);
                } else if (field.attachEvent) {
                    field.attachEvent("oninput", field.oninput);
                }
            }
        }
    }
})();
</script>

En utilisant directement le onPaste

On peut de toute façon utiliser le onPaste, en oubliant les utilisateurs sous Opera, en utilisant ça, tout simplement :

<input type="text" onpaste="return false;" />

AbriCoCotier.fr, 2011. | Permalien | 2 commentaires | Plugin Better Feed, par Ozh
Rangé dans : JavaScript, Programmation, Tutoriel

Si vous avez déjà utilisé Flash auparavant, alors vous ne devriez pas avoir de soucis avec Animator. C’est un outil permettant de créer des animations en CSS3, qui fonctionneront sur les navigateurs WebKit. Et puis (contrairement à Flash) ces animations ont l’avantage de tourner sur iOS, tout comme sur Android, BlackBerry ou tout autre OS qui supporte WebKit. Faisons maintenant un petit tour du produit, ou tout du moins de la présentation donné par Sencha.

Sencha Animator vous permet de d’animer des objets (textes, formes et images) après configuration de leurs propriétés. Vous pouvez les déplacer, les redimensionner, les avoir en 2D comme en 3D… Avec Sencha Animator, vous tirez avantage du CSS3 en exploitant les flous, les ombres et les reflets, vous créez facilement et rapidement vos animations. Autre gros avantage de Sencha Animator, le code issu de vos créations est du pur CSS3, ce qui signifie une excellente fluidité sur iOS, mais aussi une compatibilité pleine et entière avec toutes les librairies Javascript et pas seulement Sencha.

L’application est disponible sur Mac, Windows et Linux. Aujourd’hui, l’outil est encore brut de décoffrage, il ne s’agit que d’une version Bêta, mais d’autres fonctionnalités, comme le gradient, sont encore en préparation, et arriveront donc d’ici à court ou moyen terme. Pour les animations de démo, c’est ici. Une version standard d’Animator sera vendu à moins de 100 dollars.

Il faut par ailleurs noter que Sencha n’est pas la seule entreprise a concevoir des outils de développement HTML/CSS3, puisqu’Adobe travaille très fort de son côté pour intégrer à ses produits un outil d’édition d’HTML5, appelé Edge. Et puis on a aussi Sprout qui propose Advine, un outil d’édition de publicités qui supporte à la fois le HTML5 et Flash.

AbriCoCotier.fr, 2010. | Permalien | 1 commentaire | Plugin Better Feed, par Ozh
Rangé dans : Adobe, JavaScript

La « home-page » du Site-Checker (une fois qu’on a entré une URL valide)

Plusieurs réflexions, donc :

J’ai eu des problèmes au début pour savoir quelle librairie de parsing utiliser (j’avais commencé par minidom, ce qui fut un fiasco, mais j’ai vite arrété dû au fait qu’une page web n’est pas forcément aussi strictement faite qu’un XML parfait), puis j’ai eu l’aide de mon collègue Ali S-O (Ali, je t’ai promis de te citer ) pour démarrer sur BeautifulSoup (que j’avais testé assez lamentablement il y a quelques mois), et je dois avouer que la librairie est sympa. Avec l’expérience qu’avait Ali, j’ai passé très rapidement les étapes de parsing, et quand il s’agit d’analyser une page web, autant dire que ça fait déjà une grosse partie du travail qui est abattue.

Pour ceux qui me demandent « pourquoi refaire ce qui existe déjà ? », je leur répondrais que je pense qu’il n’est pas très simple de faire mieux que l’existant si on n’est même pas capable de faire ce qui existe. Et pour être capable de faire ce qui existe, le mieux est de le faire soi-même.

J’admet au passage avoir toujours des problèmes d’encodage avec la balise Title (en utf-8 ou ISO), mais j’espère trouver comment régler ça, ce qui doit être possible vu que le gars de URL-info le fait.

Comme je le disais, je suis partit pour refaire au moins aussi bien que URL-info. Ça tombe bien, cet outil est également sur GAE, et en python, mais pour ma part je n’ai pas utilisé jQuery (j’ai préféré le JS home-made : cela m’entraine à en faire).

Au début j’avais mis la barre d’input de l’URL en bas, mais en fait je crois que le plus pratique est bien de la mettre en haut. C’est plus pratique, ça « résume » ce sur quoi porte l’analyse en dessous.

Je ne suis pas vraiment content de moi pour la preview des images : je n’arrive pas à faire un truc m’affichant des images ayant une max-height de 100px. Donc là, j’ai fait comme le gars de URL-info, à savoir height=100px (« forcé »), mais ça ne me convient pas : dès qu’une image est plus petite (hauteur plus faible que 100px), ça la grossit de façon assez peu jolie. A ce niveau là, il y aurait donc moyen de faire mieux.

Pas réussi non-plus à implémenter proprement les onglets. En soit, ce n’était pas mon but, mais j’aurais voulu pouvoir mettre un fond différent en fonction de l’onglet sur lequel on est, afin que l’utilisateur voit où il a cliqué et ce qui est enclenché. Pour l’instant, à la place, il y a un gros titre en <H2>, mais j’aimerais quand même un « onglet » ou un truc similaire.

Pour ce qui est des expand/collapse des listes, je l’ai fait en Javascript ‘à la main’, dans la mesure où je n’avais pas envie de mettre le fadding (que lui utilise via jQuery, et que je supporte pas). Je suis contre le fadding dans la mesure où, même si l’effet est sympa, il est rapidement lourd quand on utilise l’outil tous les jours.

Je ne suis pas sûr qu’il utilise la même fonction que moi pour le calcul du temps de téléchargement. Pour ma part, je fais juste un différentiel du temps pris avant et après l’appel de l’URL par la fonction urlfetch. Normalement, comme les deux sites fonctionnent sur GAE (et donc utilisent urlfetch, puisque c’est la seule librairie autorisée pour faire des requêtes HTTP), les temps devraient être exactement les même, mais bon…

De même, j’ai mis pas mal de temps à comprendre comment il calculait la taille en Kb du fichier. Je ne comprenais pas vraiment comment il pouvait faire, vu que GAE ne permet pas vraiment d’écrire des fichiers puis de voir la taille via os.environ.getSize()… En fait, et après quelques comparaisons, j’ai fini par comprendre qu’il prenait la longueur du fichier, il la divisait par 1024 et il tronquait le tout (pour obtenir un Int). En tout cas, en faisant comme ça, j’obtiens étonnamment les mêmes résultats que lui…

Pour parler du graphique des liens internes/externes/javascript : je ne sais pas exactement ce qu’il arrive à aller chercher pour les « liens Javascript » (d’après ce que j’ai vu, il prends au moins les popups), mais comme je ne suis en aucun cas sûr de fournir quelque chose de proche de la réalité en parlant de lien « javascript », je préfère ne pas du tout les mettre, et me limiter aux balises a href. De plus, c’est la première fois que j’utilisais Google Visualisations API, et je dois reconnaitre que la façon utilisée est extrêmement simple, même si c’est pas celle sur laquelle j’étais tombé via les tutoriels de débutant disponible chez Google, où il fallait importer pas mal de librairies JavaScript… Non, là, une simple URL d’image un peu trafiquée et on a l’image qu’on veut. Parfait

Enfin, j’ai utilisé le DataStore de Google AppEngine (pour la première fois a ce niveau là, même si c’est juste une base), afin de voir ce qui a été vu les dernières fois et pour que Google référence un peu plus de choses. Ça devrait un peu plus aider au développement du site.

Edit : Quelques ajouts sur les réflexions.

• La meilleure des choses serait en fait de faire télécharger au visiteur un programme en javascript ayant les même fonctionnalités. Cela allègerait le serveur en traitements, MAIS cela ne mettrait pas les calculs de temps de chargement au même niveau (puisque la requête serait faite chez le client, et donc dépendrait de sa connexion internet) : l’avantage quand la requête est faite chez Google AppEngine, c’est qu’on bénéficie d’une connexion fibrée et égale sur la durée, donc on peut comparer les temps à partir d’une base correcte).
• J’avais au début une largeur de 1000px, mais j’ai réduis à 800px, cela me semble plus joli comme ça.
• Pour ce qui est de la rubrique « Infos », les informations collectées le sont grâce à la fonction urlparse (chez moi). Je pense que le gars de URLinfo utilise la même fonction, étant donné la proximité de nos résultats. A la différence que moi, je n’affiche que les champs non-vides, lui semble afficher tout.

Voilà. Maintenant quelques écrans.

Les headers (où on voit que AbriCoCotier tourne sur Nginx )

Les images

Les liens, avec le collapse, et le graphe en Float à droite.

Comme d’habitude, si vous avez des feedbacks, repérez des bugs, n’hésitez pas !

AbriCoCotier.fr, 2010. | Permalien | 13 commentaires | Plugin Better Feed, par Ozh
Rangé dans : AppEngine, JavaScript, Programmation, Python (et Django)

Plusieurs choses :

Je voulais d’abord me limiter à une règle entourant la page (parce que je ne pensais pas avoir la possibilité technique d’aller plus loin), celle que l’on voit en jaune, qui est utilisable notamment en redimmensionant votre page web. C’était bien, mais déjà pas forcément très simple à gérer. En fait, j’aurais voulu que la partie centrale du tableau (celle qui contient la page web cible) aille jusqu’au bas de la page, mais je ne voyais pas comment faire ça (les conseils donné un peu partout sur le web de mettre un html,body{hright:100%;} n’ont pas fait grand chose pour améliorer ma situation). Donc au final j’ai choisis l’option de mettre une taille de départ (600px de haut pour la table) avec la possibilité, en haut à droite de la table, d’augmenter cette taille ou de la réduire pour pouvoir travailler sur une zone adaptée à chacun.

Ceci fait, je me suis dit qu’il pourrait vraiment être sympa de faire une règle en « drag and drop » au dessus de l’iframe, parce que cela permettrait vraiment d’avoir un comportement proche de ce que l’on a quand on utilise une règle à pixel sur son PC. A ma grande surprise, je n’ai quasiment pas eu de problème pour la réaliser. J’ai pris le code fournis par Oli-web, qui a eu le mérite de fonctionner assez rapidement chez moi (pour ceux qui ne connaissent pas le principe, le voici : c’est juste un élément flottant dans la page, qu’on fait bouger en modifiant en direct les valeurs de positionnement grâce au javascript).

L’évolution suivante a été d’implémenter le choix de l’unité de mesure au sein même de la règle. Avec un peu de Javascript changeant la propriété CSS de background, et un background différent par unité de mesure, ce problème a été réglé (bon, et un peu de KolourPaint pour adapter les règles horizontales à la verticale, mais c’est négligeable). Pour une meilleure lisibilité des différentes unités de mesure, j’ai rajouté un PNG un peu transparent permettant de rendre plus sombre le derrière des unités de mesure, et donc d’y voir plus clair.

Par contre, je n’ai toujours pas trouvé la façon dont je pourrais réaliser proprement un tour de 90° de la règle, parce que le code Javascript que j’essayais ne fonctionnait pas. En effet, pour implémenter les nouvelles valeurs de CSS (notamment pour le changement du background, ainsi que pour le changement de valeurs entre la hauteur et la largeur), il fallait récupérer celles en place, mais je n’arrivais pas à les récupérer proprement et à faire un tri à partir de ça.

Enfin, j’ai rajouté un lien permettant de rafraichir l’iframe en place, car celà permettait de travailler sur un même document avec les règles correctement positionnées, ce qui ne serait pas possible dans le cas d’un rechargement complet d’une page (car dans ce cas, les règles se remettent dans leur position d’origine).

Pour ceux qui ont la flemme d’aller tester l’outil, voici encadrés les éléments les plus importants :

Pour ce qui est du test de compatibilité, j’ai testé pour Chrome 5 et 6, ainsi que Firefox 3.6, mais rien de plus. Si vous avez d’autres navigateurs « acceptable » (Opera, Safari, Internet Explorer 7+), je suis preneur de feedbacks.

La règle à pixels est là.

AbriCoCotier.fr, 2010. | Permalien | 16 commentaires | Plugin Better Feed, par Ozh
Rangé dans : AppEngine, JavaScript, Programmation

Comment ce générateur fonctionne ?

De la même façon que le générateur PHP, ce générateur en Javascript génère en fonction de ce qui a été choisit pour créer le mot de passe : longueur et choix des différents caractères, les minuscules étant obligatoirement intégrées.

Ensuite, et sur le modèle du code trouvé sur Blazonry, j’ai adopté l’idée de calquer le chiffre généré aléatoirement sur les codes de données/valeur de l’Ascii. Sur Blazonry, seul l’inclusion de caractères spéciaux ou non est gérée, mais j’ai préféré découper cela dans les différents types de caractères.

En terme de performances, ce qui est pas mal, c’est que tout se passe sur l’ordinateur du client, donc celui-ci n’a plus besoin du serveur une fois qu’il a téléchargé la page web et son fichier javascript associé. Donc pas de problème si l’utilisateur veut regénérer 15 fois un nouveau password (si celui-ci ne lui plait pas). Et cela implique moins de coût de processeur/bande passante a priori (même si en terme de bande passante, le coût est supérieur pour un seul téléchargement vu qu’il faut compter le coût associé au fichier JS. Je pense que le point d’égalité en terme de coût est situé pour 2 mots de passes générés). Bon, évidemment, en fait tout cela est négligeable, je doute que beaucoup de monde ait des problèmes de bande passante pour envoyer un pauvre fichier Javascript, mais disons que j’aurais pu être critiqué si je ne l’avais pas précisé.

Ce générateur est mis sur le domaine AbriCoCotier Application.

Ci-dessous, le code du fichier JS :

function GeneratePassword() {

    if (parseInt(navigator.appVersion) <= 3) {
        alert("Sorry this only works in 4.0+ browsers");
        return true;
    }

    var length=12;
    var sPassword = "";
    length = document.aForm.charLen.options[document.aForm.charLen.selectedIndex].value;

    var lowercase = 1;
    var uppercase = (document.aForm.uppercase.checked);
    var figures = (document.aForm.figures.checked);
    var punction = (document.aForm.punctuation.checked);            

    for (i=1; i <= length; i++) {

        numI = getRandomNum();
        if ((punction == 0 && checkPunc(numI)) || (figures == 0 && checkFigures(numI)) ||(uppercase == 0 && checkUppercase(numI))) {i -= 1;}
        else {sPassword = sPassword + String.fromCharCode(numI);}
    }

    document.aForm.passField.value = sPassword

    return true;
}

function getRandomNum() {
    // between 0 - 1
    var rndNum = Math.random()
    // rndNum from 0 - 1000
    rndNum = parseInt(rndNum * 1000);
    // rndNum from 33 - 127
    rndNum = (rndNum % 94) + 33;
    return rndNum;
}

function checkPunc(num) {
    if (((num >=33) && (num <=47)) || ((num >=58) && (num <=64))) { return true; }
    if (((num >=91) && (num <=96)) || ((num >=123) && (num <=126))) { return true; }
    return false;
}

function checkFigures(num) {
    if ((num >=48) && (num <=57)) { return true; }
    else { return false; }
}

function checkUppercase(num) {
    if ((num >=65) && (num <=90)) { return true; }
    else { return false; }
}

AbriCoCotier.fr, 2010. | Permalien | 11 commentaires | Plugin Better Feed, par Ozh
Rangé dans : JavaScript

J’ai donc réfléchis au début à faire quelque chose juste en HTTP/CSS, mais je dois avouer que j’ai vraiment eu du mal. Je voulais depuis le début baser le tout sur un compte AppEngine, donc il fallait que ce que je développe soit compatible avec leur plateforme, ce qui n’a pas été le cas pour les premiers essais que j’ai fait avec leur librairie Analytics (que j’ai testé au début) présente au sein de la Gdata Python. Bref (en fait, leur librairie Gdata Python / Analytics fonctionne très bien, mais elle ne fonctionne par sur le dev_appserver de AppEngine). Entre temps, comme je l’expliquais plus haut, j’ai changé de smartphone, et le nouveau s’est révélé tout à fait capable de supporter le Javascript, donc je suis passé sur le client Javascript fournit sur la doc de Google.

Comme d’habitude, je le répète, loin de moi l’idée de me vanter ici : je ne fais ce genre d’application que pour me prouver que je suis capable de les faire, ayant l’impression perpétuelle d’être mauvais en programmation. Et puis au passage, je mets le service à dispo pour tout le monde, parce que ça ne coûte rien et que ça peut servir.

Sur le coup, le but était multiple : au début, il fallait que je créée un client Analytics en HTTP/CSS/JS qui fournirait les infos que je vais voir le plus souvent sur Analytics (les pages les plus vues de la journée en cours, ainsi que le nombre de visiteurs uniques/pages vues de la journée en cours). Par la suite, j’ai eu l’opportunité de rajouter des graphiques dessus, ce qui m’a permit de « valider » une promesse que je m’étais faite au début de l’année.

Donc en terme de technologies utilisées, il y a une base de pages simples en python sur AppEngine (ce qui permet d’avoir un coût d’hébergement égal à zéro), avec une base de Javascript via la doc pour JavaScript donnée par Google, avec une surcouche de JavaScript via la librairie JSCharts qui créée des graphiques via des balises <canvas> (c’est donc du HTML5, mais mon smartphone supporte ça très bien). J’ai utilisé les graphiques en bâtons et en courbes.

Les écrans de l’application

Je ne vais pas y aller par quatre chemins. D’abord et avant tout, plutôt qu’un long discours, l’application est disponible ici.

Pour le reste, l’application fonctionne comme suis : (J’ai gardé l’interface de base du client Javascript fourni par Google, et j’ai rajouté/compilé/adapté quelques fonctionnalités.)

Après vous être loggué chez Google (l’application ne retient aucun mot de passe, tout se passe chez vous), vous arrivez sur un écran. Cliquez sur le bouton « Get Account Data », et vous obtiendrez laliste des comptes que vous avez chez Analytics. A droite de chaque compte, un bouton « Choose » qui met dans le champ le code correspondant au compte sélectionné.

Ne vous reste plus ensuite qu’à cliquer sur le bouton « Get PageWiewed » pour obtenir la liste des pages les plus vues sur la journée (par contre, je n’ai pas encore réussi à résoudre le problème d’encodage) :

Ou bien vous pouvez également cliquer sur le bouton « Get Visits » pour obtenir la liste des visites uniques, nombre de pages vues et ratio sur les 14 derniers jours. Les données affichées sont exactement les mêmes que celles que vous aurez en allant sur votre compte Analytics (si si, vérifiez, si vous ne le croyez pas).

Je compte améliorer le client, histoire de rajouter les fonctionnalités de listing des mots clefs/sites référents sur la dernière journée, mais aussi  des visiteurs (navigateurs, système d’exploitation, etc) sur les 14 derniers jours, sur les modèles des pages existants déjà.

Pour ce qui est du support des différents navigateurs, je sais que cela fonctionne sur Firefox 3.6.x, Chrome 5 et 6, et même Internet Explorer 7 (pour ceux qui seraient dessus…) (oui, ce sont les navigateurs testés ; je n’ai pas les autres sous la main).

Vous remarquerez également que le compte AbriCoCotier Application contient :

• Un outil de Whois (qui passe par l’API de WhoisXMLAPI en HTTP car AppEngine n’autorise que ce port là)
• Un outil pour vous donner votre IP
• Un compteur de mots
• Je compte rajouter d’autres applications, me permettant d’aller me frotter à d’autres API de Google, ou autres.

Je suis bien sûr au courant que ces petits outils existent déjà, mais ils font partie de ma volonté de « les avoir fait moi-même ».

Si vous avez un commentaire là dessus, ou souhaitez rapporter un bug, une faute d’orthographe, n’hésitez pas, les commentaires sont faits pour ça.

AbriCoCotier.fr, 2010. | Permalien | 3 commentaires | Plugin Better Feed, par Ozh
Rangé dans : AppEngine, Google, JavaScript, Programmation, Python (et Django)