Plugin Repères - Vos thèmes au pixel près !

Ce plugin est destiné aux développeurs de squelettes et de thèmes, et vise à faciliter l’intégration html/css en affichant des repères verticaux et horizontaux sur les pages en construction. Cela permet en outre de contrôler précisément la position des blocs avec marges et paddings en fonction des navigateurs.

Fonctionnement

Le plugin Repères ajoute à un endroit précis, c’est à dire avant, après ou dans un bloc de votre squelette html, un ou plusieurs blocs div contenant des traits. Le nombre de ces divs, leur orientation (horizontale ou verticale), leur position par rapport au bord, et leur couleur sont paramétrables avec CFG.

Les repères ne sont visibles que des administrateurs du site.

L’insertion du code se produit avec le pipeline « affichage_final » ce qui évite la mise en cache et l’affichage fortuit des repères pour les visiteurs.

Utilité

Il existe des outils similaires d’aide aux intégrateurs html.
Ainsi le plugin « Web Developer » pour FireFox possède la fonctionnalité « Afficher les lignes repères ».
Le plugin Repères pour SPIP présente 2 gros avantages sur le plugin Firefox :
-  il fonctionne avec tous les navigateurs
-  il ne s’efface pas au rechargement de la page.

Le plugin Grille pour SPIP est très proche quant à sa finalité, mais son fonctionnement est différent : quand le plugin « Grille » ajoute une image transparente de grille en fond, avec un choix de différents « pas » de grille, le plugin « Repères » affiche un ou plusieurs traits verticaux ou horizontaux à des endroits précis, « par dessus » les autres blocs du site.

Utilisation

1. Installer le plugin repères
Le plugins s’installe de manière classique : soit avec STEP, soit depuis la page de gestion des plugins de votre site, soit en plaçant les fichiers du plugin dans le dossier /plugins/ de votre site.

Repères (1.0.0)

2. Indiquer où seront placés les repères
Vous devez savoir à quel endroit de votre page web le plugin doit insérer la div de repères. Cela peut être juste après le body, ou dans la div « page », ou à un autre endroit selon vos besoins. Pour indiquer où doit être insérée la div repères, allez dans le menu configuration du site, puis cliquez sur CFG. Indiquez le nom du sélecteur (par exemple la div « #page »), puis la position par rapport à ce sélecteur (par exemple « Avant »).

3. Choisir une couleur pour vos repères
Choisissez une couleur qui contraste avec les couleurs de votre page, grâce à la palette.

4. Placer, déplacer ou supprimer vos repères
Un fois le plugin activé, deux repères arrivent par défaut et sont placés à 100px des bords. Allez sur la partie publique votre site pour les voir. Pour ajouter un repère, cliquez sur l’un des boutons orange et vert. Vous pouvez déplacer les repères à la souris ; pendant le déplacement, la distance par rapport au bord haut (repères horizontaux) ou gauche (repères verticaux) s’affiche.

Et pour supprimer un repère, un double-clic sur le repère ou son label suffit !

5. Utiliser les repères
Utilisez les repères pour construire vos pages, aligner vos blocs, vérifier des distances, et surtout contrôler et comparer le résultat entre plusieurs navigateurs. Les repères sont stockés par le site et seront visibles par tous les admins, depuis tous les navigateurs.

Dépendances

Le plugin repères nécessite les plugins suivants :
-  cfg pour la configuration
-  saisies pour le formulaire de configuration
-  palette pour le choix de la couleur des repères
-  jQueryUI pour les déplacements à la souris

Spécial merci et spéciale dédicace à Marcimat pour son aide nocturne, sa maitrise totale de jQueryUI et des pipelines de SPIP ;-).

Discussion

3 discussions

  • 2

    Bon, aussitôt installé, aussitôt testé, aussitôt désinstallé malheureusement…

    Ca provoque un big bug sur Safari 5, plus aucune page du site ne se charge, j’avais jamais vu ça. Dès qu’on joue un peu avec les repères, si on essaie de recharger la page, ça ne marche plus. Et c’est pareil pour toutes les pages du site sous SPIP. Plus rien ne se charge. Je suis obligé de fermer Safari, de le réouvrir et de désinstaller le plugin.

    Et j’ai vu aussi que les repères passent en-dessous de beaucoup d’éléments, alors que j’ai peu de choses en z-index.

    Dommage, ça semblait utile =(

    PS : Le double-clic pour effacer ne marche pas pour effacer d’ailleurs.

    • C’est la première version... il y a certainement des bugs à corriger.

      As tu testé avec d’autres navigateurs et rencontré les mêmes problèmes ?

      pour le z-index... nous n’en avons pas mis, il s’agit peut être simplement d’en donner un élevé en CSS sur les repères ?

      Le double-clic devrait fonctionner également... donc, toujours le même navigateur ?

    • Sous Chrome c’est presque pareil, j’arrive toujours à ouvrir de nouvelles fenêtres, mais impossible d’effacer en double-cliquant.

      J’arrive à reprendre la main sur le site en fermant les fenêtres incriminées, ou en me déconnectant.

      PS : Tout ça sous OSX, j’ai oublié de le préciser avant.

    Répondre à ce message

  • faut dire qu’il faut un double clic pour effacer un repère !

    Répondre à ce message

  • héhé, merci Cyril ^^

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom