Je continue ma route dans la créations d’applications en python/javascript sur AppEngine avec maintenant une application de règle en ligne pour le développement Web et le graphisme. Là, l’idée était de ne pas avoir à installer une règle à pixel à chaque fois que l’on change d’ordinateur, mais d’en retrouver une sur le web où que l’on soit et que l’on aille. Malheureusement, ma recherche d’applications similaires sur le web s’étant révélée infructueuse, je me suis rendu à l’évidence qu’il fallait que j’en développe une moi-même (why not, après tout). C’est donc ce que j’ai fait. (Edit : d’ailleurs, grand bien m’en a pris, parce que Smashing Magazine m’avait fait un joli lien à l’époque).

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