SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 208 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > Repères > Plugin Repères - Vos thèmes au pixel près !

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

18 mars 2011 – par Cyril Marion, Matthieu Marcillaud – commentaires

7 votes

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.

Zip - 8 ko
Version 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 »).

PNG - 31.3 ko

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

PNG - 31.6 ko

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.

PNG - 4.4 ko

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.

PNG - 122.1 ko

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

Voir en ligne : http://plugins.spip.net/reperes

P.-S.

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

Dernière modification de cette page le 11 juin 2012

Retour en haut de la page

Vos commentaires

  • Le 19 mars 2011 à 17:59, par Billou En réponse à : Plugin Repères - Vos thèmes au pixel près !

    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.

    • Le 19 mars 2011 à 18:29, par Matthieu Marcillaud En réponse à : Plugin Repères - Vos thèmes au pixel près !

      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 ?

    • Le 19 mars 2011 à 21:05, par Billou En réponse à : Plugin Repères - Vos thèmes au pixel près !

      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

  • Le 19 mars 2011 à 12:35, par Matthieu Marcillaud En réponse à : Plugin Repères - Des squelettes au pixel près !

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

    Répondre à ce message

  • Le 19 mars 2011 à 12:33, par Matthieu Marcillaud En réponse à : Plugin Repères - Des squelettes au pixel près !

    héhé, merci Cyril ^^

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Acces Restreint 3.0

    11 décembre 2008 – 784 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Champs Extras 3

    16 janvier 2012 – 538 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Réservation d’événements

    16 mars 2015 – 190 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Les crayons

    23 avril 2008 – 815 commentaires

    Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 43 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

Ça spipe par là