HOME > RSS > BLOGS France > [SPIP - contrib]

R S S : [SPIP - contrib]


PageRank : 1 %

VoteRank :
(0 - 0 vote)





tagsTags: , , , , ,


Français - French

RSS FEED READER



Personnaliser Tiny Typo via CSS

6 November, by tetue[ —]

Tiny Typo est installée dans votre site. C'est bien, mais un peu fade… Comment personnaliser ?

Pour faciliter la personnalisation, très peu de couleurs et polices sont déclarées dans la base Tiny Typo. À vous de compléter avec vos couleurs et polices, dans votre propre feuille de style.

  1. Affichez la page de test en ajoutant « /squelettes/tinytypo.html » à l'adresse de votre site, par exemple :
    http://www.monsite.net/squelettes/tinytypo.html
  2. Écrivez vos personnalisations dans votre fichier CSS, nommé par exemple custom.css ou perso.css. Si ce fichier n'existe pas, créez-le et déposez-le dans votre dossier squelettes. Inspirez-vous du fichier custom.css donné en exemple.

Personnalisations principales

Ces premières personnalisations doivent se trouver au début de votre fichier CSS. Procédez dans l'ordre :

1. Choisissez vos couleurs

Couleur de fond et de texte se définissent en une fois sur body. Par exemple :

  1. body { background: #F8F8F8; color: #222222; }

N'hésitez pas à choisir un contraste négatif (blanc sur noir) si vous préférez : Tiny Typo s'adaptera automatiquement. Utilisez éventuellement un motif de fond, déposé dans /css/img et appelé comme suit :

background.png) repeat; color: #EEE; }>
  1. body { background: #333 url(img/background.png) repeat; color: #EEE; }

2. Choisissez vos fontes

Le choix d'une police de caractères est déterminant : c'est ce qui donnera une personnalité à votre site. Celle-ci se définit en une fois sur body. Par exemple :

  1. body,
  2. .font1 { font-family: Georgia, Times New Roman, serif; }

Télécharger

Vous pouvez choisir une autre police de caractères pour vos titres (facultatif). Si vous le faites, n'en oubliez pas :

  1. h1, .h1,
  2. h2, .h2,
  3. h3, .h3,
  4. h4, .h4,
  5. h5, .h5,
  6. h6, .h6,
  7. .font2 { font-family: Helvetica, Arial, sans-serif; }

Télécharger

Vous pouvez aussi personnaliser la fonte affichant le code (facultatif). Si vous le faites, n'oubliez pas les sélecteurs propres à SPIP :

  1. pre, code, var, samp, kbd, tt, .tt,
  2. .spip_code, .spip_cadre,
  3. .font3 { font-family: Courier New, Courier, monospace; }

Télécharger

Astuce : vous pouvez ensuite utiliser les sélecteurs .font1, .font2, etc. dans vos squelettes, partout où vous souhaitez appliquer l'une ou l'autre de ces fontes.

3. Ajustez la taille du texte (facultatif)

Avec Tiny Typo, la taille du texte est à 100 %. Cela signifie que le texte s'affichera à la taille adaptée à l'écran utilisé, généralement 16px sur écran de bureau, 14px sur smartphone, etc. Si vous souhaitez grossir la taille de texte de votre site (pour le confort de lecture de vos internautes, évitez de la réduire), cela se définit en une fois, sur body. Par exemple :

  1. body { font-size: 110%; }

Remarque : si vous touchez à la taille du texte, exprimez-la en unité relative (%em ou rem) afin d'assurer la lisibilité en cas de zoom du texte par l'internaute.

Utilisez ensuite les class .small et .big dans vos squelettes, là où vous souhaitez que le texte soit plus petit ou plus gros.

4. Ajustez l'interlignage (facultatif)

L'interlignage (espace entre les lignes de texte) se définit sur body, une fois pour toutes. Par exemple :

  1. body { line-height: 1.8; }

Remarque : la valeur minimale recommandée est de 1.5 : pour le confort de lecture de vos internautes, évitez de descendre en deçà.

5. Ajustez vos titres

Ce n'est pas tout d'avoir une belle police, il faut aussi que les différents textes (titres, sous-titres, texte principal, etc.) aient des proportions différentes mais agréables à l'œil pour faciliter la lecture.

Chaque site utilise une échelle de titres différente et c'est plus délicat à définir. Aidez-vous d'un calculateur d'échelle typo, comme type-scale.com ou modularscale.com. Écrivez ensuite les règles CSS correspondantes dans votre fichier, par exemple :

  1. h1, .h1,
  2. h2, .h2,
  3. h3, .h3,
  4. h4, .h4 { margin: 1.414em 0 0.5em; color: #AA0000; }
  5. h1, .h1 { margin-top: 0; font-size: 3.998em; }
  6. h2, .h2 { font-size: 2.827em; }
  7. h3, .h3 { font-size: 1.999em; }
  8. h4, .h4 { font-size: 1.414em; }

Télécharger

Astuce : vous pouvez ensuite utiliser les sélecteurs .h1, .h2, .h3, etc. dans vos squelettes, pour appliquer le style de l'un ou l'autre de ces titres, partout où vous le souhaitez.

Personnalisations secondaires

Vous pouvez vous arrêter là, car Tiny Typo fait le reste. Mais vous pouvez aussi souhaiter d'autres ajustements.

Liens

Bien que ce ne soit pas nécessaire avec Tiny Typo, il est courant de souhaiter personnaliser les liens. Par exemple, pour les souligner plus délicatement :

  1. a {
  2. text-decoration: none;
  3. border-bottom: 1px solid;
  4. }

Télécharger

Pour modifier leur apparence lors des interactions, définissez dans l'ordre :focus, :hover et :active. Par exemple pour modifier leur couleur lors des interactions :

  1. a:focus,
  2. a:hover,
  3. a:active {
  4. color: #0000ff;
  5. }

Télécharger

Tiny Typo renforce le style du focus, pour aider les internautes naviguant au clavier. Mais si cela est trop gênant, annulez comme suit :

  1. a:focus {
  2. background: transparent !important;
  3. border-color: transparent !important;
  4. }

Télécharger

Autres personnalisations

Amusez-vous bien et n'hésitez pas à poser vos questions dans le forum ci-dessous !

Pour en savoir plus, lire : Améliorer la lisibilité typographique


Coup de balai

20 October, by Romain[ —]

Ce plugin permet de nettoyer un site qui, avec les années, s'est encombré de nombreux articles et rubriques obsolètes. Les administrateurs choisissent quels articles et quelles rubriques doivent être conservés. Le coup de balai met les articles non sélectionnés à la poubelle et supprime les rubriques non choisies.

Installation

Rien de particulier à signaler, le plugin s'installe comme tous les autres plugins.

Principe

L'idée est d'avertir les administrateurs qu'un coup de balai sera donné à une certaine date et qu'ils doivent, avant celle-ci, « protéger » les contenus qu'ils souhaitent conserver. On peut protéger un article ou une rubrique : dans ce dernier cas, tout le contenu de la rubrique est protégé. Aucun automatisme quant à l'application du coup de balai n'est prévu, pour des raisons évidentes de sécurité : c'est un webmestre qui le déclenchera manuellement. Le procédé étant quelque peu radical, une sage précaution peut être de constituer préalablement une copie du site, où les administrateurs négligents pourront récupérer les contenus qu'ils auraient omis de protéger.

Mode d'emploi

Une fois le plugin installé, on voit apparaître :
- Dans le menu Edition, un item Coup de balai. En cliquant dessus, on est conduit à une page qui présente l'arborescence du site.
 Chaque item apparaît avec un code couleur fonction de son statut : vert pour un item explicitement protégé du coup de balai, bleu pour un item contenu dans une rubrique protégée (donc protégé par héritage), orange pour une rubrique qui contient au moins un item protégé (elle ne sera donc pas emportée par le coup de balai afin de conserver la cohérence du site), rouge pour un item non protégé. Les articles/rubriques qui apparaissent en rouge seront éliminés par le coup de balai.
- Dans la colonne de gauche de la page d'un article ou d'une rubrique, une boîte indiquant le statut de l'article/rubrique (ie protégé(e) ou non protégé(e)) et permettant, si l'on a le droit de modifier l'objet, de le changer.
Le lien Détail permet de mieux appréhender la situation puisqu'il renvoie à l'arborescence, déployée pour faire apparaître l'item concerné.
- Dans le menu Maintenance, pour un webmestre, un item Balayer ! menant à une page qui permet de lancer le coup de balai. Il est évidemment indispensable de réaliser une sauvegarde de précaution de la base de donnée avant de l'appliquer.

Le coup de balai

L'effet du coup de balai est exactement celui qu'aurait une suppression manuelle des articles et des rubriques non protégés : les articles sont mis à la poubelle et les rubriques supprimées, le tout via les fonctions spip afférentes (article_instituer et supprimer_rubrique). Si vous avez installé le plugin Corbeille, tous les articles mis à la poubelle s'y retrouveront (mais les rubriques sont bel et bien supprimées).

Après le coup de balai

Après le coup de balai, il est naturel de désactiver le plugin. Cela n'effacera pas la table des articles/rubriques protégés et l'on retrouvera donc les mêmes items protégés lors de la réactivation du plugin. Pour effacer cette table (en fait la supprimer), il suffit de désinstaller le plugin.


Un bloc contact amélioré dans SoyezCréateurs

19 October, by RealET[ —]

Dans la configuration de SoyezCréateurs, le bandeau de contact permet aussi d'utiliser un HTML enrichi pour une présentation plus agréable

Configuration

Depuis la page ecrire/ ?exec=configurer_soyezcreateurs&cfg=soyezcreateurs (Configuration, Configurer SoyezCréateurs), zone : Texte du bandeau de contact du site

Au lieu de mettre un texte simple, vous pouvez mettre ce code HTML

Remarque : il faut que le paramétrage suivant (Mode d'affichage du bandeau de contact) soit positionné sur : Dans le pied de page

  1. <div id=informations class=row>
  2. <div id=coordonnees class=avec-padding>
  3. <div class=adresse flexbox-flex>
  4. <span class=icon-location icon-lg icon-fw texte-blanc></span>
  5. <p>
  6. Rue du bonheur<br />
  7. 01777 - SoyezCréateurs
  8. </p>
  9. </div>
  10. <div class=telephone flexbox-flex>
  11. <span class=icon-phone icon-lg icon-fw texte-blanc></span>
  12. <p>
  13. [01~23~45~67~89->tel:+33.123456789]
  14. </p>
  15. </div>
  16. <div class=accueil flexbox-flex>
  17. <span class=icon-information icon-lg icon-fw texte-blanc></span>
  18. <p>
  19. Information complémentaires.<br />
  20. </p>
  21. </div>
  22. <p><a class=button triadeC texte-blanc float-center avec-margin href=/1><span class=icon-envelope icon-lg avec-padding-right05></span>Nous écrire</a></p>
  23. </div>
  24. <div id=carte class=avec-padding>
  25. <iframe src=https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d365312.326488903!2d-1.5056982671874777!3d44.33045219999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd5380bbec6fa8d3%3A0x2cd88d7991f88ca4!2sPerdu..!5e0!3m2!1sfr!2sfr!4v1508413717844 width=600 height=450 frameborder=0 style=border:0 allowfullscreen></iframe>
  26. </div>
  27. </div>

Télécharger

Quelques variantes

Lien Nous écrire

Le lien vers /1 est un lien vers l'article 1 du site.

Dans le cadre d'un site multilingue, on peut utiliser la syntaxe des multi :
[fr]/1[en]/2

Cartographie

Si le plugin GIS est installé, on peut mettre un appel à une carte GIS à la place de l'iframe de cartographie.

  1. |id_gis=1|zoom=10|limit=1|scale=oui|height=450px|fullscreen = oui|overview = oui|autocenterandzoom = oui|zoom_molette = non>

On peut aussi mettre une image ou un texte à la place.


Proposition de rubriques pour les traduction

https://contrib.spip.net/Proposition-de-rubriques-pour-les-traduction-1922play episode download
19 October, by kent1[ —]

Ce plugin est un complément au plugin « Traduction de rubriques ».

Lorsque les rubriques sont traduites systématiquement ou fréquemment, il affiche, lors de la création de traductions d'articles ou sous-rubriques des propositions d'emplacement où stocker ces nouvelles traduction.

Introduction

Il est souvent difficile, dans les rubriques avec arborescence profonde par exemple, de retrouver la rubrique de destination d'une nouvelle traduction d'article ou de rubrique.

Si vous utilisez le plugin « Traduction de rubriques » et que vous traduisez systématiquement vos rubriques, ce plugin permet de retrouver rapidement l'emplacement idéal, à savoir la traduction de la rubrique parente de l'objet à traduire.

La solution

Pour ce faire, ce plugin affiche une liste de boutons de raccourcis, au niveau du choix de la rubrique dans la création de la nouvelle traduction d'article ou de rubrique, composée d'un bouton par traduction de la rubrique parente de l'objet original.



Dans cet exemple, nous souhaitons créer une traduction de la rubrique « Afghanistan », le plugin liste l'ensemble des traductions de sa rubrique parente, à savoir trois choix possibles.

Le clic sur l'un de ces 3 boutons sélectionnera automatiquement la bonne rubrique. On évite ainsi les méandres du sélecteur de rubriques habituel.

La configuration

Le plugin offre deux options de configuration permettant de limiter certaines possibilités :

  • L'interdiction de créer deux traductions d'un même objet dans la même rubrique ;
  • L'interdiction de créer deux traductions d'un même objet dans le même secteur (particulièrement utile pour le multilinguisme par secteur) ;




th, SPIP 3.2 is available!">Bingo for Friday the 13th, SPIP 3.2 is available!

14 October, by Jacques[ —]

Following the Toulouse meeting in May, SPIP 3.2 was in the starting blocks.Many websites use it daily on-line, now it's time to offer it to you!

SPIP 3.2 is an improved version of SPIP 3.1, which includes:
- * an update of the embedded JavaScript libraries
- * better ergonomics of the private area
- * security patches on XSS attacks
- * many improvements.

As good news never arrive alone, for this major version release, SPIP is adorned with a new logo and the site SPIP.net adopts a new design.

Many thanks to all who participated.

As usual, do not hesitate to make feedbacks or propose improvements :)

PS For those who remain with SPIP 3.1 and who do not wish to upgrade to SPIP 3.2, we also propose a new SPIP 3.1.7

— The team

Complete news and details
https://blog.spip.net/807


 !">Bingo pour le vendredi 13, SPIP 3.2 est dispo !

13 October, by L'équipe de SPIP-Contrib[ —]

Suite aux rencontres de Toulouse en mai, la version SPIP 3.2 était dans les starting-blocks.
De nombreux sites l'utilisent quotidiennement en ligne, il est temps maintenant de vous la proposer !

SPIP 3.2 est une version améliorée de SPIP 3.1, qui comprend :

  • une mise à jour des bibliothèques JavaScript embarquées
  • une meilleure ergonomie de l'espace privé
  • des correctifs de sécurité sur les attaques de type XSS
  • de nombreuses améliorations.

Une bonne nouvelle n'arrivant jamais seule, pour cette sortie de version majeure, SPIP se pare d'un nouveau logo et le site SPIP.net adopte un nouveau design.

Un grand merci à toutes celles et ceux qui ont participé.

Comme d'habitude, n'hésitez pas à faire des retours ou à proposer des améliorations :)

P.-S. Pour celles et ceux restés en SPIP 3.1 et qui ne souhaitent pas évoluer de suite vers SPIP 3.2, nous proposons aussi une version SPIP 3.1.7

— L'équipe

Annonce complète et détails
https://blog.spip.net/807


odt2spip v3+ : création d'articles à partir de fichiers textes

11 October, by Matthieu Marcillaud[ —]

Ce plugin permet de générer des articles SPIP à partir du téléversement de fichiers au format .ODT (OpenOffice ou LibreOffice Writer). Il gère la majorité des raccourcis typographiques, détecte les différents niveaux de titre et fait l'intégration des images automatiquement.

Également, avec un serveur préalablement configuré, les fichiers .DOC, .DOCX ou .HTML peuvent aussi être utilisés.

Important :
L'analyse des fichiers impose que l'extension XSL de PHP soit active sur le serveur web

Historique

La version 3 du plugin apporte la possibilité de convertir automatiquement des documents Word ou HTML. Le reste de la documentation est inchangé.

Installation

  • téléchargez le zip du plugin correspondant à votre version de SPIP
  • pour l'installation et l'activation, suivez la procédure standard : cf la documentation officielle

De base, le plugin saura traiter les documents ODT.

Conversion de documents (Word, HTML) vers le format ODT

Le plugin peut aussi convertir à la volée des documents Word (DOC, DOCX) ou HTML vers le format ODT et être ainsi traité pour créer un article dans SPIP. Il faut cependant une configuration particulière. Vous pouvez aussi convertir manuellement les documents Word sur votre ordinateur.

A. Conversion automatique des documents Word

Deux possibilités :

1. Disposer de l'application libreoffice sur le serveur

Le serveur sur lequel le site est installé doit disposer de l'application libreoffice. Sur des serveurs à base de Debian, cela s'installe généralement avec la commande apt-get install libreoffice (prévoir 1Go d'espace disque tout de même).

Un site SPIP ayant accès à l'application libreoffice peut servir de serveur de conversion pour d'autres sites SPIP, en le configurant de la sorte sur sa configuration (?exec=configurer_odt2spip).

2. Disposer d'un site SPIP « serveur de conversion »

En configuration (?exec=configurer_odt2spip), un serveur de conversion peut être indiqué, ainsi qu'une clé d'API.

Un serveur de conversion est simplement donc un site SPIP sur lequel est activé ce plugin avec l'application libreoffice présente sur son serveur.

B. Conversion manuelle des documents Word

Pour passer d'un fichier Word (format .doc ou .docx) à un fichier .odt utilisable par ce plugin, il est conseillé de faire la conversion (« enregistrer sous... » au format ODT) dans LibreOffice (ou OpenOffice) et non pas dans Word.

Utilisation

Une fois le plugin activé, dans la page de gestion d'une rubrique vous trouverez une boite de dialogue qui permet de choisir le fichier à télécharger depuis votre ordinateur : Créer un article à partir d'un fichier.

Formulaire de création d'un article depuis un document ODT
Le formulaire propose d'attacher automatiquement le document à l'article.
Formulaire de création d'un article depuis un document texte
- Lorsque le plugin odt2spip sait traiter les documents Word, les fichiers aux extensions DOC, DOCX et HTML seront acceptés.
- Lorsque le site est multilingue, un sélecteur de langue est présent.
- Lorsque le plugin Bigup est présent, on peut glisser le fichier.

Une fois validé l'article est automatiquement créé avec le statut proposé à la publication, si nécessaire le fichier ODT original est attaché comme document à l'article et le plugin vous bascule sur la page de cet article.

La transformation opérée par le plugin

Ce plugin ne fait qu'une transformation du contenu du fichier en code SPIP : il n'assure aucun miracle si votre fichier initial est construit de façon non-conforme aux règles de l'utilisation d'un traitement de texte et ne fera rien que vous ne puissiez reproduire avec les raccourcis typographiques de SPIP...

Un exemple de page générée à partir d'un fichier type : http://tice.espe.univ-amu.fr/demo/s...

Plus de précisions :

  • il est nécessaire d'avoir utilisé les styles pour définir les titres dans le fichier OpenOffice si vous voulez que le plugin les détecte. La conversion se fait selon les règles suivante (que les puristes passent leur chemin, il n'y a ici aucun respect des aspects sémantiques habituellement liés à l'utilisation des raccourcis typographiques !) :
    • si il existe au moins un paragraphe avec le style Titre, son contenu est utilisé pour générer le titre de l'article. Sinon c'est le Titre de niveau le plus important qui est utilisé : Titre 1 > Titre 2 > Titre 3... .
    • Le premier niveau de Titres est transformé en intertitres SPIP {{{Titre niveau 1 intertitre}}}(si Titre 1 n'existe pas, Titre 2 est utilisé à sa place, Titre 3 à la place de Titre 2, et ainsi de suite)
    • le deuxième niveau est mis en gras et séparé du restant par des sauts de lignes {{Titre niveau 2 en gras}}
    • tous les autres niveaux de titre sont passés en italique et séparés par des sauts de ligne {Titres de niveau 3, 4, 5... en italique}
  • si d'aventure vous aviez décidé d'utiliser le plugin Enluminure typographique ou le plugin Intertitres hiérarchisés qui définissent et utilisent des niveaux de titres supplémentaires (vade retro satanas !), odt2spip détecte leur présence et, automatiquement, utilise les raccourcis enrichis tels que {2{titre niveau deux}2} ou {4{titre niveau quatre}4} (ces raccourcis sont interprétés par ces 2 plugins).
  • Le plugin récupère les images intégrées dans le fichier d'origine à condition qu'elles soient au format jpg ou png ou gif (n'espérez rien si vous avez des fichier BMP ou TIFF intégrés !), les retaille pour approximer du mieux possible la taille qu'elles avaient dans le texte, les intègre comme documents SPIP et les place avec un raccourci de la forme ou ou en fonction de la position à laquelle se trouvait l'image dans le texte d'origine.
    Attention ! pour que cette fonctionnalité soit opérationnelle, il faut que les images aient été intégrées dans le texte en utilisant les fonctions d'insertion d'image (menu Insertion > Image > A partir d'un fichier...) et non pas via un copié/collé du contenu de l'image dans le texte (qui génère un bitmap non récupérable).
  • Les formules mathématiques (rédigées à l'aide de l'éditeur d'équation natif d'OOo Writer ou des outils complémentaires tels l'excellent Cmath) sont en principe complètement gérées : le plugin génère le code LateX et le place dans une balise math : $\frac{\sqrt{2x+9}}{4y-6}=\frac{\alpha 3}{\beta 2}$
  • Les notes de bas de page sont gérées sans problèmes ni restrictions.
  • Pour les tableaux, pas de problème tant que vous n'essayez pas de faire des tableaux imbriqués (c'est à dire un tableau dans une cellule de tableau) : les fusions de cellules horizontales et verticales sont gérées en principe correctement.
  • Les listes à puce et numérotées, imbriquées ou non, sont en principe correctement gérées tant qu'elles ne sont pas interrompues par d'autres éléments (donc pas de reprise de numérotation d'une liste à la suivante).

Eléments non-gérés ou supprimés

  • Pour les tableaux et les listes le plugin ne gère pas les contenus ayant un style de Titre.
  • Les fioritures de style de texte sont limitées à celles autorisées par les raccourcis typographiques : gras et italique donc pas de texte de couleur ni avec des fonds colorés (beurk !), pas de variations de police ni de taille de texte (ce qui évitera que les rédacteurs pourrissent la charte graphique du site !)
  • Les en-têtes, pieds de page, index ou table des matières sont purement et simplement supprimés.
  • Les dessins (flèches, bulles et autres formes crées avec l'outil de dessin d'OOo Writer) ne sont pas (encore ?) supportés.

TO DO

  • Comme d'habitude, piètre graphiste que je suis, si quelqu'un avait le courage de faire un logo moins crasseux, il est le bienvenu ! Merci popojcb !
  • Ajouter la gestion des dessins SVG intégrés dans le fichier texte (avec une version jpg obtenue par conversion automatique pour les navigateurs qui supportent pas svg..)
  • Ajouter la gestion des équations mathématiques qui sont en MathML dans le fichier texte (si vous connaissez un convertisseur MathML -> LaTeX écrit en PHP et open-source, merci de me prévenir !) Merci Amaury Adon pour m'avoir trouvé la référence de la librairie XSLT MathML 2.0 to LaTeX
  • Ajouter une interface de configuration pour rendre paramétrable les conversion imposées pour les niveaux de titre...

Notes techniques

Analyse du fichier ODT
Le moteur de transformation du fichier odt est basé sur une feuille de style XSLT (/odt2spip/inc/odt2spip.xsl) qui opère sur le fichier content.xml extrait du fichier odt envoyé et dézippé dans un répertoire temporaire /tmp/odt2spip/XXX où XXX représente l'id_auteur en cours . Cette transformation permet de produire le titre et le texte de l'article. Les images sont également extraites du fichier dézippé et intégrées comme documents attachés à cet article (après un éventuel redimensionnement). Le répertoire temporaire de l'auteur (/tmp/odt2_spip/XXX) est effacé à la fin de l'opération.

Test local du serveur libreoffice sous macOS
Pour un usage en local de la transformation des documents ODT, sous macOS, il suffit d'installer LibreOffice si ce n'est pas déjà le cas. Ensuite une constante dans mes_options.php est à renseigner avec le chemin à 'soffice' tel que :

Applications/LibreOffice.app/Contents/MacOS/soffice');>
  1. define('_LIBREOFFICE_PATH', '/Applications/LibreOffice.app/Contents/MacOS/soffice');

Plugin Figures

10 October, by tetue[ —]

Modèles d'insertion des documents en HTML5, avec figure et figcaption.

Envie d'utiliser HTML5 sur tout votre site, y compris les modèles d'insertion des documents de SPIP ? Aussitôt installé, ce plugin utilise les éléments HTML5 figure et figcaption pour insérer vos images et documents (sans apporter d'autre nouveauté, par rapport aux squelettes par défaut de SPIP).

Seul changement visible : le champs « crédits » est désormais affiché.

Pour en savoir plus :
- HTML5 : Éléments

et
, Alsacréations, 2012.
- 4.4.11. The figure element, specification HTML 5.1 du W3C.


La page sommaire pour les débutants

9 October, by naga44[ —]

Vous n'êtes pas codeur ?
Vous souhaitez que votre page d'accueil intègre des éléments en plus de ceux qui s'y trouvent ?
Cet article est pour vous !

Introduction

Un sommaire comporte souvent les mêmes éléments d'un site à un autre.

Sur SPIP, pas de souci pour afficher le contenu souhaité pour qui connaît les boucles et les balises !

Seulement, voilà, on peut souhaiter faire un site sans pour autant connaître le code. Apprendre c'est bien et je vous le recommande, mais on n'a pas toujours le temps...

Voici ce que j'ai appris au fur et à mesure de mes cueillettes à droite et à gauche.

sommaire.html

Pour afficher un contenu sur le sommaire, il faut modifier le fichier sommaire.html.

Celui affiché se trouve :

  • Soit dans le dossier du squelette, installé lui-même dans le dossier plugin si on a installé un squelette (qui contient un visuel et des fonctionnalités, sauf pour Zpip et SPIPr-dist qui séparent les deux).
  • Soit dans le dossier squelettes-dist pour le SPIP de base

On peut utiliser l'outil ?var_mode=inclure pour retrouver ce squelette.

Dans les deux cas, on copie celui-ci et on met la copie dans le dossier squelettes qu'il faut créer au même niveau que les dossiers ecrire, squelettes-dist, plugins-dist s'il n'existe pas encore.

En modifiant ce fichier sommaire.html, il prend la priorité sur celui d'origine. Mettre les fichiers modifiés dans le répertoire squelettes est le moyen propre de modifier le code. En effet, si on fait une mise à jour des plugins, les modifications ne sont plus à refaire.

Les structures classiques

Dans les pages sommaires, on retrouve souvent ce genre de structure :

  • Un descriptif du site / les rubriques
  • Un descriptif du site / les derniers articles
  • Un descriptif du site / un diaporama / les derniers articles
  • Un descriptif du site / un diaporama / les rubriques
  • Un descriptif du site / les rubriques et un article si une rubrique ne contient qu'un article

Une présentation du site

Le descriptif du site est un code souvent déjà présent dans sommaire.html.

  1. #DESCRIPTIF_SITE_SPIP

#DESCRIPTIF_SITE_SPIP est la description située dans la partie administration (/ecrire) dans l'onglet configuration / identité du site et dans la partie Identité du site : descriptif rapide.

est le visuel définit dans un autre fichier, mais je n'aborderais pas les éléments visuels ici.
Mettre les rubriques les rubriques

Les rubriques

Le fait que le descriptif du site soit souvent déjà présent nous permet de placer la rubrique à la suite :

  1. span>(RUBRIQUES) {par num titre}>
  2. [(#LOGO_RUBRIQUE{#URL_RUBRIQUE}|image_reduire{150,*})]
  3. [(#INTRODUCTION|couper{200})]

Télécharger

On a tout d'abord

span>(RUBRIQUES) {id_rubrique} {par num titre}> signifie

On boucle (fait le tour) rubriquesommaire (on donne le nom qu'on veut, rubriquesommaire est assez explicite) sur des éléments de types (RUBRIQUES).

Et enfin {par num titre} car souvent quand les rubriques sur le sommaire sont souvent ordonnées de manières choisies.

En l'occurrence ici on nomme le titre : 10. Nom_du_titre_de_rubrique et un numéro, avec un espace avant le titre ne s'affiche pas et permet d'ordonner comme on le veut.

Il existe plein d'autres options autres que num_titre (ordre alphabétique, de date de parution…) que l'on retrouve ici http://www.spip.net/fr_article900.html

Puis

[(#LOGO_RUBRIQUE{#URL_RUBRIQUE}|image_reduire{150,*})]

#LOGO_RUBRIQUE est explicite et est cliquable pour aller sur le lien de la rubrique #URL_RUBRIQUE}|.

image_reduire{150,*} réduit la largeur à 150 pixels, le ratio de l'image étant gardé.

Suivi de #TITRE
qui est un lien vers la rubrique en cliquant sur le titre.

Enfin

on a [(#INTRODUCTION|couper{200})]

Introduction mettra le descriptif de l'article si celui-ci est activé dans la partie administration (/ecrire) dans l'onglet configuration / contenu du site et dans la partie les articles : on coche descriptif.

Si il n'y a pas de descriptif, cela indiquera le début de l'article.

|couper{200} affiche les 200 premiers mots et permet une certaines homogénéités.

sert à fermer la boucle.

Les exclusions

Si on ne veut pas toutes les rubriques…

  • On ne veut que la rubrique 2, on mettra ajoute alors {id_rubrique=2} au lieu de {id_rubrique}
  • On toutes les rubriques sauf la 2 , on mettra ajoute alors {id_rubrique=!2} au lieu de {id_rubrique}
  • On toutes les rubriques sauf la 2 et la 4 , on mettra ajoute alors {id_rubrique !IN 2,4} au lieu de {id_rubrique}
  • Si on souhaite exclure par mot-clés. On active les mots-clés dans la partie administration (/ecrire) dans l'onglet configuration / contenu du site et dans la partie Les mots-clés : on coche utiliser les mots-clés. Puis on créé le mot-clé exclu dans Édition / mots-clés.
    on mettra alors {id_rubrique}{titre_mot=!exclu} au lieu de {id_rubrique}
  • Au contraire si on veut uniquement que certaines rubriques, on crée un mot-clé selection.
    on mettra alors {id_rubrique}{titre_mot=selection} au lieu de {id_rubrique}

Les derniers articles

  1. span>(ARTICLES) {par date}{inverse}>
  2. [(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{150,*})]
  3. [(#INTRODUCTION|couper{200})]

Télécharger

On a

span>(ARTICLES) {par date}{inverse}> qui signifie :

Voir l'explication dans la partie rubrique, car reprend les mêmes principes.

{par date}{inverse} demande d'afficher dans le sens contraire au chronologique, soit les derniers articles en premier

Le reste est identique aux explications indiquées dans les rubriques, y compris pour les exclusions en changeant {id_rubrique} par {id_article}

Les rubriques et un article si une rubrique ne contient qu'un article

  1. span>(RUBRIQUES) {titre_mot=!exclurubrique}{par num titre}>
  2. [(#LOGO_RUBRIQUE{#URL_RUBRIQUE}|image_reduire{150,*})]
  3. [(#INTRODUCTION|couper{200})]

Télécharger

en créant un mot-clé « exclurubrique » et en indiquant à sa création « Les mots-clés de ce groupe peuvent être associés : Rubriques. On le met sur la rubrique qui n'a qu'un article.

Suivi de :

  1. span>(ARTICLES) {titre_mot=articleseul}{par date}{inverse}>
  2. [(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{150,*})]
  3. [(#INTRODUCTION|couper{200})]

Télécharger

en créant un mot-clé « articleseul » et en indiquant à sa création « Les mots-clés de ce groupe peuvent être associés : Articles. On le met sur l'article qui est seul dans la rubrique.

Précision sur [(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{150,*})]

Le seul élément qui change par rapport à l'explication dans la partie rubrique est #LOGO_ARTICLE_RUBRIQUE si il y a un logo à l'article, cela l'affiche, sinon il affichera celui de la rubrique.

Un diaporama

Personnellement, j'aime bien le plugin nivo-slider
http://contrib.spip.net/Nivo-Slider-3747

Sauf que je remplace :

[(#MODELE{nivoslider_doc}{id='4|2|5|7|9'}{controlNav=false}{captionOpacity=0})]

par

[(#MODELE{nivoslider_doc}{titre_mot=diaporama}{controlNav=false}{captionOpacity=0})]

En créant un mot clé diaporama.

SPIP pour tous ?

Vu qu'on est un peu dans le sujet, je me permet cette conclusion.

Je me trompe peut être, merci de me dire ce que vous en pensez à travers le forum.

Personnellement, je pense que SPIP serait plus accessible pour les novices si :

1- Le diaporama était intégré à la base.
2- Si on avait dans l'administration des éléments à cocher pour les article / rubrique / sommaire…

Exemple pour le sommaire :

Configurer votre sommaire

o Insérer la description du site

o Insérer un diaporama (en savoir plus sur les mots clés diaporama)

o Insérer les rubriques

option numéros des rubriques à exclure : (en savoir plus sur les mots clés diaporama)

option si une rubrique ne contient qu'un article afficher l'article

option à cocher ; par date, par num titre…

o Insérer les articles

option numéros des rubriques à exclure :

option à cocher ; par date, par num titre…

=> Avec comme le plugin menu, l'emplacement des éléments à changer avec des flèches.

Bref, un générateur de boucle et balise :)

3-Un générateur WYSIWYG de CSS. Ce qui signifie changer les éléments à travers des icônes genre titre 1, corps de texte… et voir le résultat en direct.

Du coup, plus de FTP et de codes pour les débutants.

Je pense que cela aiderait pas mal à sa notoriété.

Facile à dire pour les propositions, surtout que je serais incapable de faire ça. Mais il y a des gens très compétents sur SPIP.

D'ailleurs, merci à tous ceux qui ont contribuer à faire cet outil génial !


Rang : ordonner une liste par Drag&Drop

https://contrib.spip.net/Rang-ordonner-par-Drag-Drop-1910play episode download
9 October, by nicod_, Peetdu[ —]

Pouvoir ordonner une liste par glisser-déposer. Par exemple la liste des articles d'une rubrique.

Il devient possible d'utiliser le critère {par rang} dans vos squelettes.

Ce plugin est un POC : Proof of concept, permettant de démontrer la faisabilité d'une idée.

Ce qu'il fait déjà

Il gère l'ordonnancement par drag&drop de

  • la liste des articles dans une rubrique ;
  • la liste des mot-clés dans un groupe de mots-clés.



et hop...



Installation et configuration

Il s'installe comme n'importe quel plugin.

Configuration


Choisir les objets
…pour lesquels vous voulez activer le drag&drop.
Ici vous pouvez activer

  • les Articles ;
  • les Mots-clés ;
  • Autres [1].

Ranger les objets
Il s'agit ici de mettre automatiquement une nouvelle instance d'un objet à la fin de la liste.
C'est le cas lorsque l'on publie un article ou lorsque l'on crée un mot-clé (le mot-clé n'ayant pas de statut).

Dans vos squelettes

Il est possible d'utiliser le critère par rang pour les objets activés dans la configuration.

  1. span>(ARTICLES){id_rubrique}{par rang}>
  2. #TITRE

  3. #TEXTE

Télécharger

Désinstallation

La désinstallation supprime les champs 'rang' de tous les objets activés et les choix fait dans la configuration.

Petites notes techniques

a/ Ce plugin se base sur la balise #RANG du core de SPIP [2]

b/ Ce plugin se base aussi sur la notion de « Définir la relation à l‘objet parent dans la déclaration de l‘objet ». Notion introduite dans le ticket https://core.spip.net/issues/3844

c/ Lorsque vous activez un objet dans la config, le plugin va créer un champ 'rang' dans la table de l'objet sélectionné ;

Je veux utiliser ce plugin pour faire du drag&drop sur mon objet éditorial

Pré-requis
Que votre objet soit un enfant direct d'un parent.

  • un article est l'enfant d'une rubrique ;
  • un mot-clé est l'enfant d'un groupe de mot-clés.

Marche à suivre
Vous allez devoir modifier le fichier /objets/liste/objets.html.
Vous pouvez vous inspirer du travail fait dans le fichier rang/prive//objets/liste/articles.html

En résumé, il s'agit d'ajouter les points suivants :

  • activer la fonction drag&drop simplement en ajoutant l'id_objet sur la ligne correspondante du tableau ;
  • ajouter le critère par rang pour le classement du tableau ;
  • afficher le picto drag&drop  ;
  • afficher le rang de l'objet dans le tableau.

…avec comme contrainte de ne rien activer si

  • on est pas dans une page rubrique ;
  • l'objet n'est pas sélectionné dans la configuration du plugin.

Voici quelques explications

  1. [(#ENV{id_rubrique}|et{#VAL{mon_objet}|rang_objet_dans_config}|oui)]
  2. [(#TRI{statut,<:lien_trier_statut|attribut_html:>>#,ajax})],
  3. [(#ENV{id_rubrique}|et{#VAL{mon_objet}|rang_objet_dans_config}|oui)[(#TRI{rang,<:rang:lien_trier_rang|attribut_html:>><:rang:info_rang_abbr:>,ajax})]]
  4. [(#TRI{id_mon_objet,<:rang:info_id:>,ajax})]
  5. span>(MON_OBJET){…}>
  6. #ID_MON_OBJET class=[(#COMPTEUR_BOUCLE|alterner{row_odd,row_even})]>
  7. [(#ENV{id_rubrique}|et{#VAL{mon_objet}|rang_objet_dans_config}|oui)[(#CHEMIN_IMAGE{draggable-16.png}|balise_img)]]
  8. [(#STATUT|puce_statut{article,#ID_MON_OBJET,#ID_RUBRIQUE})]
  9. [(#ENV{id_rubrique}|et{#VAL{mon_objet}|rang_objet_dans_config}|oui)[(#RANG).]]

Télécharger

N.B. : toutes les occurences de 'mon_objet' doivent être remplacé par le type de votre objet.

Dans le head du tableau (thead)
Ligne 3 : ajout de l'entête de colonne pour afficher le picto drag&drop
ligne 5 : ajout de l'entête de colonne pour afficher le rang de l'occurence de l'objet
ligne 7 : on change juste l'intitulé de la colonne présentant l'id. On passe de 'N°' à 'ID'. Ceci pour éviter une confusion avec le N° de rang

Dans le corps du tableau (tbody)
ligne 12 : ajoute d'un identifiant 'id=« id_#ID_MON_OBJET »' indispensable pour le fonctionnement du drag&drop
ligne 13 : ajout de la colonne pour afficher afficher le picto drag&drop
Ligne 15 : ajout de la colonne pour afficher le rang de l'occurence de l'objet


[1] les « Autres » ce sont des objets éditoriaux non historiques, issues de plugins.
Cette option est laissée ouverte pour les développeurs qui font des plugins 'maison' et qui souhaitent tester la fonction Rang.

Un grand merci à Nicod et Marcimat pour leur aide technique.

ATTENTION, si vous utilisez le plugin TAA (Traduction d'Articles Autrement), désactiver l'affichage compact des articles, sinon le drag & drop ne fonctionne pas. La version 1.4.1 du plugin TAA est maintenant entièrement compatible avec rang


0 | 10 | 20










mirPod.com is the best way to tune in to the Web.

Search, discover, enjoy, news, english podcast, radios, webtv, videos. You can find content from the World & USA & UK. Make your own content and share it with your friends.


HOME add podcastADD PODCAST FORUM By Jordi Mir & mirPod since April 2005....
ABOUT US SUPPORT MIRPOD TERMS OF USE BLOG OnlyFamousPeople MIRTWITTER