Boîte à outils informatique

jeudi 11 avril 2013
par  JMG
popularité : 11%

























 Les ancres

On aime bien se balader avec des renvois vers des passages du site...

Les ancres sont traitées dans la doc officielles et dans mon tuto rédacteur spip

Dans les descriptifs rapides, en tête des articles, il y a parfois un sommaire et on veut faire renvoyer vers le passage correspondant

C’est pas clair hein ?

Exemple : dans l’article Léo de Marcouville (95) je veux renvoyer vers le poème "La souris" quand je suis dans le sommaire de la page d’accueil du site et que je clique sur "La souris"

Je crée un lien hypertexte vers le mot souris de l’article 177 :

[La souris->art177#souris] dans le sommaire et une ancre [souris<-] au dessus du poème

Pas de quoi casser 3 pattes à ...

doc : http://www.guiderdoni.net/Ancre-nommee-dans-un-article-SPIP.html

 "Recalculer cette page", avec un astérisque

Lorsque le webmestre a activé le "cookie de correspondance", on peut voir tout en haut de la page, à droite l’indication "recalculer cette page"
Lorsqu’il y a en plus un astérisque cela signifie que la page affichée est celle du cache ; il peut être utile de la mettre à jour, de la "recalculer" ...

 Jouer des fichiers distants

Exemple : utilisation sur ce site des fichiers de musique chargés sur celui de l’Ensemble Vocal de Pontoise (éviter d’avoir à les charger sur les deux) :

  • récupérer l’url du fichier : sur le site de l’Ensemble Vocal, clic droit sur le fichier, "Copier l’adresse du lien"
  • joindre la pièce avec cette url sur Le Petit Gou
  • afin d’empêcher les fichiers d’apparaître en pièces jointes, ils sont stockés dans une rubrique masquée et un article créé pour ; le player appelle cet article

  La surcharge de fichiers et plugins

Comme on le sait, les surcharges ne se font pas sur les fichiers de la distribution, faute de quoi il faut recommencer avec les mises à jour.

Il convient de mettre les fichiers corrigés dans le répertoire squelette, cela bien entendu avec son FTP

On peut, s’il y a un sous-directory, mettre le fichier dans la même arborescence recréée dans squelette

A la question :(ref : http://archives.rezo.net/archives/spip.mbox/7CUOQ7HBRUGRGY26464NAP77XDOABRZ7/)

"Si je veux surcharger le fichier sitemap.html du plugin sitemap : - dois-je remplacer le fichier sitemap.html dans plugins/sitemap/ ? - ou bien puis-je recréer un dossier plugins/sitemap/ dans squelettes pour y placer un nouveau sitemap.html qui sera lu à la place de l’original ?"

Marcimat a répondu :

"Simplement un fichier squelettes/sitemap.html Si tu as : /plugins/nom_plugin/arborescence/fichier Tu peux surcharger comme cela : /squelettes/arborescence/fichier"

Merci m’sieur !

PS : ça marche

 La surcharge du plugin "lecteur multimédia"

version 0.77.1 et version et 2.1.2
En particulier, permettre le tri des fichiers par numéro

Le plugin "Lecteur multimédia" permet de faire des affichages avec une grande liberté

En ce qui concerne les playlists, on aimerait bien pouvoir ordonner les titres joués

L’organisation des fichiers dans Spip se fait toujours de la même façon : on fait précéder le titre d’un numéro, suivi d’un point et d’un espace.

C’est vrai pour tout, par exemple les rubriques, les articles etc

En général le nombre et le point n’apparaissent pas

Dans le lecteur multimédia il faut surcharger le modèle playliste.html

Je l’avais fait dans la version 0.66 directement dans le plugin et ça ne fonctionnait plus avec la mise à jour...

D’où l’article sur les surcharges...

Ligne 48 :

  1. <BOUCLE_doc (DOCUMENTS) {id_article ?} {extension==mp3} {fichier==(mp3$)} {par #GET{trierpar}} {!par date}{pagination 15}{0,100}>


Je vire

  1. {par #GET{trierpar}}

qui fait planter lmon tri, je pense que la balise appelle les options prévues si lancement depuis un squelette, à suivre, je regarderai la doc de l’instruction (un jour...)

Je remplace

  1. {!par date}

par

  1. {par num titre}

Noter que le " !" signifie tri récursif

Pour afficher plus que 15 morceaux, on met par exemple 25 dans

  1. {pagination 15}

Ligne 49  :

  1. <li class="play_"><a href="#FICHIER" rel="enclosure">[(#TITRE|sinon{[(#FICHIER|joli_titre|couper{30})]})]</a></li>


Ajouter si besoin le critère de tri supplémentaire "|supprimer_numero" pour enlever les numéros devant les titres (il faut voir d’où vient le filtre joli_titre)

Tout fait, voilà le résultat :

  1. <BOUCLE_doc (DOCUMENTS) {id_article ?} {extension==mp3} {fichier==(mp3$)} {par num titre }{pagination 25}{0,100}>
  2. <li class="play_"><a href="#FICHIER" rel="enclosure">[(#TITRE|supprimer_numero|sinon{[(#FICHIER|joli_titre|couper{30})]})]</a></li>
  3. </BOUCLE_doc>

Télécharger


Rappel : devant le titre, ajouter numéro suivi d’un point et d’un espace

Remarque : le critère de tri initial,

  1. {!par date}

n’est pas idiot et reste pratique (pas besoin de numéroter). Les dates de publication sont faciles à changer

Tester si ça marche en virant simplement le

  1. {par #GET{trierpar}}

Pour que les documents n’apparaissent pas dans le portfolio, je crée un fichier dans ACCUEIL dont je donne le numéro pour la playliste

Sujet en partie traité dans : http://www.mail-archive.com/spip@rezo.net/msg06374.html

 Variations sur le nom du site

Objectif : changer la casse, la fonte, la couleur..du titre

Exemples :
Times New Roman, 36, 415088 à gauche, Arial, 50, f40101 à droite

On va changer "inc_bandeau_haut.html" du fichier d’origine en le surchargeant.

Comme à l’habitude, la surcharge est dans le directory "squelettes" pour permettre les mises à jour sans devoir ré-intervenir dans le code.

On crée "noisettes" et dans "noisettes" "bandeau".

On modifie "inc_bandeau_haut.html" comme ça :

  • Fichier d’origine :
  1. <div class="site_nom">
  2. [(#CONFIG{sarkaspip_bandeau/titre_site, 1}|=={1}|?{' '})
  3. [<h1><a href="#URL_SITE_SPIP" title="<:sarkaspip:accueil_site:>">(#NOM_SITE_SPIP)</a></h1>]
  4. ]
  5. [<h2>(#CONFIG{sarkaspip_bandeau/slogan})</h2>]
  6. </div>

Télécharger

  • Fichier changé :
  1. <div class="site_nom">
  2.  
  3. <a href="#URL_SITE_SPIP" title="<:sarkaspip:accueil_site:>">[(#NOM_SITE_SPIP|image_typo{police=Times New Roman.ttf,taille=36,couleur=415088})]
  4. </a>
  5. <!--dd815d=orange pale et gris !-->
  6. <br/>
  7. [<h2>(#CONFIG{sarkaspip_bandeau/slogan})</h2>]
  8. </div>

Télécharger

La teint du slogan est changée (n’oublions pas que nous sommes sous sarkaspip) dans les styles, bandeau, couleur pour la partie haute, couleur d’avant plan (texte et lien)

 Récupérer du code avec Firebug (sous Firefox)

Parmi les tutos sur firebug "Maîtriser Firebug"

A l’aide de cet outil Firefox, il est facile de récupérer e code qui vous intéresse

A titre d’exemple, trois petites vidéos de formation prises sur le site www.gregorien.com

D’abord le code :

  1. <object width="480" height="385">
  2. <param value="http://www.youtube.com/v/aLC1e8IvSiM?fs=1&hl=en_US" name="movie">
  3. <param value="true" name="allowFullScreen">
  4. <param value="always" name="allowscriptaccess">
  5. <embed width="480" height="385" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/aLC1e8IvSiM?fs=1&hl=en_US">
  6. </object>

Télécharger

Maintenant le résultat, en collant le code bêtement dans son article.

C’est pas orthodoxe [c’est du grégorien ! ! :) ] mais....







 Insérer une carte Google sur son site internet

Vous connaissez tous ces belles cartes de localisation !

Un exemple sur le site de l’Ensemble Vocal

Le tuto d’Eric Bellot

 Les mots-clés de sarkaspip

Lorsqu’il y a beaucoup de mots-clé, pour faire fonctionner une vraie navigation transversale, le plus simple reste de les télécharger avec phpmyadmin

Les données sont mises dans spip_mots, spip_mots_articles, brèves, etc, et les groupes dans spip_groupes_mots, rien de bien difficile mais il faut faire des sauvegardes fréquentes...

On passe par les fichiers .csv d’excel ou open calc, en utf(8) avec le séparateur point virgule pour les champs, et les guillemets anglais pour les valeurs

Je veux juste ici rappeler que pour que ça fonctionne, il ne faut pas oublier de sélectionner les groupes dans sarka, rechercher, simplement en les surlignant et en les validant

 INDEX & EQUIV dans une feuille de calcul

Voila un petit tableau :

Dans la colonne A il y a un "identifiant" auquel correspond une "classification" dans B : "8" est associé "A.1.3." et ainsi de suite.

On remarque ici que les formats sont de type texte mais cela n’a pas d’importance

Un peu plus loin (ou sur une autre feuille, une seconde série d’éléments où ceux de la colonne F sont associées à ceux dans E, les colonnes ne sont pas nécessairement accolées (la colonne G est décorative).

Là encore il y a dans les cellules tous les types d’objets acceptés par le tableur

Mon ambition est de remplir la colonne C avec les valeurs de E en fonction de ce qu’il y a dans B

Pour la première ligne, il y a A.1.3. en B, dans F c’est "7" qui correspond à A.1.3. et je veux donc trouver 7 dans C sur la première ligne

Il existe bien les fonctions RECHERCHEV et H mais elles ont des limites auxquelles échappe la solution ci-après

La fonction EQUIV (élément_recherché ; zone_recherche ; type_correspondance) permet de trouver la ligne où se trouve A.1.3. dans la colonne F (ça marche pareil pour les lignes)

La syntaxe sera EQUIV("A.1.3." ;F1:F8 ;0))

Le 0 est le type de correspondance exacte

La réponse est donc 4 (la première ligne est numérotée 1)

INDEX fait bien des choses mais pour ce qui m’intéresse va renvoyer la valeur de la cellule dans la la ligne de la plage de colonne choisie :

INDEX(E1:E8 ;4) retourne 7

En C1 je demande, avec EQUIV, qu’on me cherche dans F la ligne où il y a la valeur en B1 (ici la ligne 4) , puis avec INDEX la valeur pour cette ligne dans la colonne de mon choix, ici E, résultat 7

La syntaxe complète est :

=INDEX(E$1:E$8 ;EQUIV(B1 ;F$1:F$8 ;0))

L’adressage absolu $ s’impose pour tranquillement faire un copier coller de C1, et voilà le résultat :

Encore une fois, je mets ces choses en ligne avant tout à titre de pense-bête, il faut de toute façon rédiger et classer....

 Piquer les CSS d’une page

Avec Firefox : Outils, Web Developer, CSS, Voir les CSS, tout est là !

 Les fichiers CSV, trois t’ites opérations et puis s’en va

Pour charger la bdd de spip avec phpmyadmin, on peut construire un fichier avec un tableur, type ods avec open calc et l’"enregistrer sous" en extension csv

Attention à bien choisir utf8 et le séparateur de champ " ;" (rappel)

Dans ce tableau il n’y a pas de chiffre mais du texte

On transforme le nombre en texte avec TEXTE(plage de cellules, format)

Le format est 0 pour un nombre entier

Souvent le nombre est le résultat d’une formule par exemple copier coller, il faut s’en débarrasser : sélectionner la plage, coller, la même plage, collage spécial, "sélection" nombre.

On le transforme en texte et là même opération pour se débarrasser de la formule mais "sélection" texte

Pour faire du nombre avec du texte, fonction CNUM(texte) qui se trouve dans la rubrique texte du sélecteur de fonctions

Les trois t’ites opérations sont TEXTE(), CNUM() et le collage spécial...

Bonus "Remplir" est dans Edition, série...pour en faire une dans une liste ou une colonne

 Du code dans un article

J’ai délà fait un article sur ce sujet mais où ?

Utilise le plugin "Coloration Code" :

http://plugins.spip.net/coloration_code.html

Il suffit de mettre le code entre
<code class="langage">...</code>
ou avec un cadre
<cadre class="langage">...</cadre>
.

Les langages supportés sont ceux fournis par
http://sourceforge.net/projects/geshi/
avec une classe supplementaire : "spip".

Par défaut, si le code mis en surbrillance fait plus d’une ligne, il est mis en cache sous forme textuelle et proposé au téléchargement. Ce fonctionnement est controlé globalement par une constante PLUGIN_COLORATION_CODE_TELECHARGE défaut true. Il peut être forcé localement en rajoutant la classe "sans_telechargement" dans un sens ou "chargement" dans l’autre comme
<code class="php sans_telechargement">

Vous pouvez aussi utiliser le filtre
coloration_code_color
dans un squelette comme
#TEXTE**|coloration_code_color{spip,code}
 : colore #TEXTE avec le language spip en format code (sans cadre), voir exemple lecode.html. L’url depuis l’article serait
#URL_SITE_SPIP/spip.php?page=lecode&amp;id_article=#ENV{id_article}

Bien sûr l’intégration du code "Coloration Code" dans un article pour le décrire pose des petites difficultés à résoudre avec les caractères HTML, mais sans se fatiguer, on pompe carrément le texte de l’article avec Firebug,où il est au bon format, c’est un simple copier/coller...(hé hé..)

 Image qui change au survol

Du site http://optimisation-blogger.blogspot.com/, cette petite application marrante.

Le code des champignons :

Dans Spip, les logos permettent déjà cette fantaisie (largement utilisée) mais à des emplacements spécifiques

Là on opère où on veut !

Il y a d’ailleurs un article pour rendre "cliquables" les logos de sarkaspip...

Note : Dans le même blog du code pour faire clignoter le texte, rubrique "Texte"

 Traduire des articles de son site avec Google

C’est un des points forts de Google, assurer la traduction multilingue quasi instantanée.

Bon c’est du mot à mot mais ça rend de sacrés services !

Google décline son offre de différentes façons, voir ses pages, au moins celle-ci

Mon choix se fixe sur la traduction d’un paragraphe.

Il y a un petit scipt en JavaScript qui fait appel à deux "class" CSS :
’goog-trans-section’ et ’goog-trans-control’

On les utilise comme ceci :

D’abord le sript :

  1. <script>
  2. function googleSectionalElementInit() {
  3. new google.translate.SectionalElement({
  4. sectionalNodeClassName: 'goog-trans-section',
  5. controlNodeClassName: 'goog-trans-control',
  6. background: '#ffffff'
  7. }, 'googleSectionalElement');
  8. }
  9. </script>
  10. <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=fr"></script>

Télécharger

Puis le texte à traduire

  1. <div class = goog-trans-section >
  2.  
  3. <div class = goog-trans-control> </div>
  4.  
  5. Texte à traduire
  6.  
  7. </div>

Télécharger

Le patch gère le "bouton" traduire

Après essai, ça s’applique au moins à la page càd aux textes placés avant le script

 spip : retrouver le code de la base de données

Intervenant en co-rédacteur pour la création d’un site sous spip, voilà pas que mon co-créateur me change le code de la base de données

Naturellement, il m’informe, mais... ça rentre par une oreille et ressort, s’en laisser de trace au milieu...

Donc le site plante lamentablement avec avec une indication gentre "base de données en travaux"

Pour faire bien copieux, le système se met en roue libre : page blanche et plus d’accès à la partie privée

Petit tour sur spip_contrib, page blanche, rien n’y fait

En fait, les codes sont inscrits dans le fichier "connect.php" dans le répertoire "config"

On édite le fichier accessible par FTP, petite correction et ça refonctionne

 Variations caractères du bandeau bas

En cours de réécriture

 Ne pas afficher certains articles dans le sommaire

Le nombre des articles affichables dans le sommaire est paramétrable dans "Configurer Sarka-spip", "Sommaire".

On peut souhaiter choisir l’article de une, sujet traité là.

On peut aussi vouloir masquer l’affichage d’articles dans le sommaire

Mes sites on des rubriques accessibles seulement à des groupes autorisés, gestion avec le plugin "Accès restreint" et il peut être intéressant de ne pas modifier l’affichage du sommaire avec ces articles lorsqu’une personne du groupe est "connectée".

Trois opérations : modifier la noisette sommaire, créer un groupe de mots-clés et un mot clé, associer le mot-clé à l’article

Le principe est traité là , faire attention d’ajouter doublon comme indiqué dans les commentaires, de toute façon je donne le code tout fait plus bas.

Dans l’article, il est créé un groupe de mots-clés, "squelette_no-sommaire", pour pouvoir les associer dans la marge, on garde le principe

Dans ce groupe créer par exemple "cache" et associer ce mot-clé aux articles choisis

Dans "squelettes", créer le sous-dir noisettes puis dans noisettes le sous-dir "sommaire"

Dans ce "sommaire" charger le nouveau fichier "inc_articles_recents" :

  1. [(#REM)
  2. <!--
  3. Noisette d'affichage des n derniers articles publies a l'exception de l'edito si il existe
  4. Recoit en argument :
  5. - doublons: permet d'exclure l'edito si il existe (doublons est utilise dans la boucle de l'edito page sommaire)
  6. - lang: pas encore utilise
  7.  -->
  8. ]
  9. <BOUCLE_article-no-sommaire(ARTICLES) {type_mot=squelette_no-sommaire}{doublons}>
  10. <!-- Cette boucle "passe en revue" les articles à ne pas afficher en page d'accueil, grâce au critère {doublon} de la boucle suivante -->
  11. </BOUCLE_article-no-sommaire>
  12. <B_article>
  13. <div id="articles_recents" class="portfolio">
  14. <h2><:sarkaspip:articles_recents:></h2>
  15. <BOUCLE_article(ARTICLES){id_secteur!==#RACINE_SPECIALISEE}{doublons}{par date}{inverse}{0,#CONFIG{sarkaspip_sommaire/max_articles_recents, 5}}>
  16. <INCLURE{fond=noisettes/article/inc_article_introduction}
  17. {id_article}
  18. {afficher_mere=oui}
  19. {afficher_commentaires=oui}
  20. {logo_rubrique=#CONFIG{sarkaspip_sommaire/logo_rubrique, oui}}
  21. {avec_lire_suite=#CONFIG{sarkaspip_sommaire/avec_lire_suite, non}}
  22. {taille_logo=#CONFIG{sarkaspip_sommaire/taille_logo, 150}}
  23. {taille_introduction=#CONFIG{sarkaspip_sommaire/intro_article, 300}}>
  24. </BOUCLE_article>
  25. </div>
  26. </B_article>

Télécharger

Comment ça marche : le plus simple est de lire ceci.

Le lien s’ouvre dans une autre fenêtre, je trouve que c’est mieux pour la navigation dans le cas présent, ceci géré grâce à l’instruction target="_blank"

Ben tiens : je fais de suite un petit article sur le sujet

Note : il y a une lame du couteau suisse, "Masquer du contenu" dans "Balises, filtres, critères", un plugin "Masquer".

 Ouvrir un hyperlien dans une autre fenêtre

On fait souvent référence à d’autres pages, internes ou externes mais leur ouverture fait sortir du contenu initial ce qui peut rendre la lecture peu fluide.

Une bonne solution théorique est l’utilisation de l’attribut HTML TARGET qui se met tranquillement dans un article entre les balises de lien.

Exemple :

<a href="http://lepetitgourdinillustre.net/" target="_blank">Accueil de LPGI</a>

Il y a du débat sur ce mode opératoire, voir par exemple ou "#POPUP" ou encore "Liens spip_out ouvrants"

La syntaxe de TARGET est ici

Je trouve c’est quand même bien pratique....

NOTE :

  • L’utilisation du plugin "Liens spip_out ouvrants" généralise l’ouverture des liens dans une nouvelle fenêtre, l’écriture "en dur" laisse bien entendu le choix, faut voir à l’usage...
  • Le plugin "Le Couteau Suisse" propose une lame "SPIP et les liens… externes" dans "Affichage public" qui gère les nouvelle fenêtre pour les liens externes, les liens vers un glossaire externe, et propose une petite enveloppe devant les mails....

Doc LCS (extrait) :

** Liens externes : permet aux liens externes au site de s’ouvrir dans une nouvelle fenêtre extérieure. Activer cet outil revient à ajouter automatiquement target="_blank" à toutes les balises <a> dotées par SPIP des classes spip_out, spip_url et/ou spip_glossaire. Il est parfois nécessaire d’ajouter l’une de ces classes aux liens du squelette du site (fichiers html) afin d’étendre au maximum cette fonctionnalité.
** Glossaire externe : SPIP permet de relier des mots à leur définition grâce au raccourci typographique mot. Par défaut, le glossaire externe renvoie vers l’encyclopédie libre wikipedia.org. À vous de choisir l’adresse à utiliser. Exemple : SPIP.

 Logo boule tournante

Sous sarkaspip la taille maxi des logos est paramétrée dans "Sommaire", "Rubrique" et "Article"

Je fais le choix de mettre partout 150 pixels, mes logos étant par ailleurs carrés, ça tombe bien pour mettre une boule !!

La réalisation de celle-ci est quasi automatique avec Gimp

On part d’une image taille 330x330 environ, ça marche au moins avec le jpeg.

Dans la rubrique "Filtre", choisir "Animation" puis "Globe tournant"

Le prgm propose 10 trames (10 images gif), le choix du sens de rotation

L’index des couleurs, si j’ai bien compris, définit le nombre de couleurs qui sera utilisé pour construire l’image .gif

Une image gif dispose au max d’une palette de 256 couleurs

La valeur proposée est 63, ce qui nous intéresse n’est pas la qualité photographique mais l’animation

A partir de l’image, le logiciel va se construire une palette de 63 couleurs par interpolation dans son système de référence

Si les couleurs son représentées sur 3 axes, pas trop difficile d’imaginer le principe....

Valider

Dans filtre il y a l’option "Rejouer l’animation" dans "Animation" pour voir si le résultat convient

Si oui, "Enregistrer sous" avec une extension .gif, choisir quand on le demande "Enregistrer en tant qu’animation"

L’interval entre les trames est proposé à 100 ms, plus on augmente moins ça tourne vite et moins c’est fluide

Le logo de l’article est ici à 200 ms

Quand tout il est bien, "Exporter"

Ne pas oublier de mettre l’image à la bonne taille : "Image", "Echelle et taille de l’image", 150x150, sauvegarder, terminé.

Le nouveau logo se charge comme d’hab pour la rubrique ou l’article

Si tout va bien, il tourne dans la partie privée

Si la taille de l’image est plus grande que celle définie pour les logos dans sarka, le logiciel redimensionne automatiquement mais la boule ne tourne plus, c’est dommage après tout ce boulot !

 Gifresizer

Comme tu sais, on fabrique une image animée avec une suite de calques.
Si on veut changer les dimensions d’une image gif, il y a Gifresizer un utilitaire freeware efficace qui vaut bien ces quelques lignes !!!
C’est là.

 Synthèse sur les redirections

En cours de rédaction

Les liens internes et externes, les pop ups

Refs :

Lorsqu’on veut pointer :

  • vers un site extérieur
  • ou bien à l’intérieur du site

On crée un lien hypertexte de redirection soit à la main soit avec la touche faite pour ça (« créer un lien hypertexte » ) dans la barre typo

Le principe est toujours le même, le texte d’appel du lien et l’adresse de destination sont entre crochets (Alt Gr et 5 et° sur les PC) et séparés par ->

 Redirection externe

Pour cette redirection vers l’extérieur du site, l’adresse commence par http://…

On prépare l’adresse de destination (copier dans le presse papier), un clic sur la touche « créer un lien hypertexte », coller là où le logiciel vous propose, fini.

Exemple : tapez Directeur, sélectionnez ce mot, un clique sur la touche magique et hop !

[Directeur->http://ensemblevocaldepontoise.net/spip.php?article64]

Une fois interprété par le navigateur :
Test :
Directeur

Le mot qui déclenche la redirection et l’adresse sont entre crochets et séparés d’une flèche -> faite avec le tiret du 6 et le symbole > à côté du W (clavier PC toujours)

L’adresse du peut être :

  • absolue (http://)
  • relative (vers une autre page du même site),
  • vers un document utilisant un protocole de l’internet (ftp://...),
  • une adresse email

 Redirection interne (Liens hypertextes à l’intérieur du site)

Même principe , on peut faire à la main ou avec la touche de la barre typo, mais l’adresse est simplifiée (pour l’utilisateur) :

A la main, pour aller :

  • à l’article 138 (id_article=138, "Boîte à outils informatique") :
      • [blabla->138] en cliquant sur blabla
      • [blabla->art138]
      • [blabla->article 138]
      • Si on indique rien avant la flèche, c’est le titre de l’article qui s’affiche avec un lien vers cet article : [->art138]
      • Exemple : Si on indique rien avant la flèche, c’est le titre de l’article qui s’affiche avec un lien vers cet article : Boîte à outils informatique
  • à la brève 33 (id_brève=33, "Les Chœurs en Harmonie") :
  • *** [blabla->br33]
      • [blabla->breve 33]
      • [blabla->brève 33]
      • Si on indique rien avant la flèche, c’est le titre de la brève qui s’affiche avec un lien vers cette brève : [->br33]
      • Exemple : Si on indique rien avant la flèche, c’est le titre de la brève qui s’affiche avec un lien vers cette brève : Les Choeurs en Harmonie
  • à la rubrique 38 (id_rubrique=38, Informatique) :
      • [blabla->38] en cliquant sur blabla
      • [blabla->rub38]
      • [blabla->rubrique 38]
      • Si on indique rien avant la flèche, c’est le titre de la rubrique qui s’affiche avec un lien vers cette rubrique : [->rub38]
      • Exemple : Si on indique rien avant la flèche, c’est le titre de la rubrique qui s’affiche avec un lien vers cette rubrique : Informatique
  • vers Auteurs, mots-clés, sites, images, documents
      • lien vers [un auteur->aut6]
      • lien vers [le même auteur->auteur6]
      • lien vers [un mot-clé->mot12]
      • lien vers [un site syndiqué->site1]
      • lien vers [un document joint->doc17]
      • lien vers [le même document->document17]
      • lien vers [une image->img13]
      • lien vers [la même image->mage13]
      • on peut, là aussi, ne rien spécifier avant la flèche
  • [->aut2]

SPIP insérera automatiquement les informations nécessaires. Dans le cas d’un document joint ou d’une image, si l’on a indiqué un titre manuellement, c’est ce titre qui sera affiché ; sinon c’est le nom du fichier lui-même qui sera utilisé.
Guiderdoni

  • Les liens hypertextes vers le glossaire externe wikipedia

Créer un lien hypertexte vers la définition d’un terme dans un glossaire externe ; pour un terme donné, il suffit d’insérer au sein de votre texte le raccourci
[ ?terme] (attention, pas d’espace entre "[" et " ?")
Le terme entré (nom propre ou nom commun) doit être correctement orthographié
Exemple : Système de publication pour l’internet partagé
Guiderdoni

 Lien sur une image

* Pour créer un lien sur l’image :
placer l’image qui servira de balise dans le texte (img ou emb)
la sélectionner
de cliquer sur le bouton "faire un lien" de la barre typo (ou faire le lien à la main comme indiqué ci-dessus)
coller l’URL ou le lien (ou écrire à la main)

Exemples :
[<img3518|right>->http://lepetitgourdinillustre.net/]

img est un modèle (voir refs) et accepte aussi la syntaxe :
<img3518|lien=http://lepetitgourdinillustre.net/>

* Images cliquables : à écrire

 Utiliser la balise pop up

http://www.spip-contrib.net/POPUP-une-popup-propre-pour-SPIP

  1. <popup
  2. |texte=le texte du lien ou URL (necessaire)
  3. |lien=objet SPIP pour le lien (necessaire)
  4. |skel=squelette (option)
  5. |width=XX (option)
  6. |height=XX (option)
  7. |titre=mon titre (option)
  8. >

Télécharger

<popup |texte=Exemple |lien=article184 |width=677 |height=438 |titre=Les vols en direct >

OU

  1. <popup_img
  2. |doc=le numero du document (necessaire)
  3. |lien=objet SPIP pour le lien (necessaire)
  4. |skel=squelette (option)
  5. |width=XX (option)
  6. |height=XX (option)
  7. |titre=mon titre (option)
  8. >
  9. (même résultat qu'avec le portfolio si le doc est une image)

Télécharger

  Hyperlien dans une nouvelle fenêtre

Ci-après le texte de mon article "Ouvrir un hyperlien dans une autre fenêtre" :

On fait souvent référence à d’autres pages, internes ou externes mais leur ouverture fait sortir du contenu initial ce qui peut rendre la lecture peu fluide.
 
Une bonne solution théorique est l’utilisation de l’attribut HTML TARGET qui se met tranquillement dans un article entre les balises de lien.
 
Exemple :
 
 
Il y a du débat sur ce mode opératoire, voir par exemple là ou "#POPUP" ou encore "Liens spip_out ouvrants"
 
La syntaxe de TARGET est ici
 
Je trouve c’est quand même bien pratique....
 
NOTE : L’utilisation du plugin "Liens spip_out ouvrants" généralise l’ouverture des liens dans une nouvelle fenêtre, l’écriture "en dur" laisse bien entendu le choix, faut voir à l’usage...

Le Couteau Suisse propose une lame , même auteur "PieroWbmstr" que la balise popup

 [Citations en caractères droits

Les citations introduites par la balise <quote> ont des caractères en italique ce qui peut être gênant si la citation comprend aussi des italiques.

Comme la présentation est sans équivoque, barre verticale rouge et fond grisé, repasser en droit (normal) est envisageable

Il faut modifier la ligne 38, dans "base.css.html", du sous-dir "CSS" de "sarkaspip3" :

Dans la class "spip", le sélecteur "blockquote" a une propriété "font-style" de valeur "italic" qu’on remplace par "normal"

  1. blockquote.spip {
  2. display: block; padding: 0 1em; font-style: normal; overflow: auto;
  3. border-left: 4px solid #CONFIG{sarkaspip_styles/ca_quote, #990000};
  4. color: #CONFIG{sarkaspip_styles/fg_citation, #000000};
  5. background: #CONFIG{sarkaspip_styles/bg_citation, #eeeeee};}
  6. blockquote.spip_poesie {font-family: inherit; border: 0; line-height: 1.2em;}

Télécharger

Comme d’hab, le nouveau fichier "base.css.html" est placé dans le sous-dir "CSS" placé dans "squelettes" à la racine du site (répertoire ou est installé spip)

 Le plugin ImageRedim

Il offre deux modèles "doc.html" et "img.html", compatibles avec les plugins FancyBox, Thickbox, MediaBox, à placer dans le répertoire "modeles" de "squelettes".

On peut alors dans les articles mettre des images sous forme de vignettes qui deviennent cliquables et pourront être agrandies, c’est pratique et propre

Tout sur spip-contrib.

Une démo ici (avec MediaBox).

 Plus d’"Enregistrer" dans les plugins

Plusieurs fois, au moment de la mise en place d’un nouveau plugin, en auto ou par FTP, la case "Enregistrer" n’apparaît pas ! Damned !

Soluces trouvées sur le forum de spip :

  • fais Ctrl + s sur ton clavier ($quirrel)
  • cocher activer le plugin puis appuyer sur ENTER sur le clavier !!! (kassad)

 Modif taille et couleurs des caractères, noisette Nuage, version 3.2.2

La structure du plugin a fortement évolué au cours des dernières mises à jour

La 3.2.2 est la plus récente.

On s’en prend au fichier "nuage.css" dans le sous-directory "css" du plugin "nuage".

Pour la taille, changer les valeurs des propriétés "font-size", classes "nuageX" du sélecteur "a".

Pour la couleur, c’est la valeur de la propriété "color" qui est modifiée.

Avec Firebug, on trouve facilement les propriétés atribuées au sélecteur "a".

Mais ce sélecteur peut être appelé par différents prgm : c’est par exemple le cas du sommaire automatique du couteau suisse !

Le principe de la "cascade" permet de cantonner l’application de la propriété en mettant color dans "a.nuageX"

Naturellement il y a aura un effet non désiré si un autre prgm utilse "a.nuageX" mais c’est peu probable.

Dans la mise à jour de ce site, un hiatus est apparu avec un "niveau0" qu’on retrouve dans une des versions précédentes, et qui a été empiriquement résolu en virant "TagSphere" (où il n’y a pourtant pas de référence à "nuage0"...)

Le fichier "nuage.css" modifié (ci-après) se place dans le sous-dir "css" de "squelettes".

  1. ul.nuage,dl.nuage {
  2. margin:0;
  3. padding: 0;
  4. list-style: none;
  5. }
  6. ul.nuage li,dl.nuage dt {
  7. display: inline;
  8. white-space: inherit;
  9. font-size:1em;
  10. }
  11.  
  12. .nuage .frequence {
  13. display: block;
  14. float: left;
  15. height: 0;
  16. overflow: auto;
  17. width: 0;
  18. }
  19.  
  20.  
  21. a.nuage1{font-size:1.3em;color: #5a8c7b;}
  22. a.nuage2{font-size:1.4em;color: #5a8c7b;}
  23. a.nuage3{font-size:1.5em;color: #5a8c7b;}
  24. a.nuage4{font-size:1.6em;color: #5a8c7b;}
  25. a.nuage5{font-size:1.7em;color: #5a8c7b;}
  26. a.nuage6{font-size:1.8em;color: #5a8c7b;}
  27. a.nuage7{font-size:1.9em;color: #5a8c7b;}
  28. a.nuage8{font-size:2.0em;color: #5a8c7b;}
  29. a.nuage9{font-size:2.1em;color: #5a8c7b;}
  30. a.nuage10{font-size:2.2em;color: #5a8c7b;}

Télécharger

Noter que le "hover" ne change pas la couleur, il devrait, à suivre

 Tous les mots-clés dans le Nuage

Après avoir installé le plugin Nuage, changé les couleurs et polices tant que de besoin, vous constatez que tous vos mot-clés n’y figurent pas !

Inutile de vider les caches, cela vient du programme lui même

En effet, les concepteurs ne font apparaître que ceux qui ont un poids relatif suffisant, les plus appelés pour dire simple

La limitation se trouve dans "nuage_fonctions.php", lignes 32 et 34 pour la version 3.2.2, où la variable "$score_min" est fixée à 0.05

C’est dommage dans la mesure où le but du nuage est de faciliter la navigation transversale (perpendiculaire aux rubriques) en accédant à tous les articles ayant le mot-clé en commun

En remplaçant la valeur de seuil par 0, l’affaire devrait être faite, cependant il y a un risque de division par zéro (à l’étude)

Comme d’hab, ne pas changer le plugin lui même mais procéder par surcharge, mais comment ?

Piste : http://contrib.spip.net/Afficher-les-mots-cles-en-faisant

 Enregistrer le son d’une vidéo Youtube

  • choisir le morceau :

http://www.youtube.com/watch?v=H-lPXk9IqEU

  • ajouter "pwn" dand l’url entre "www ;" et "youtube" :

http://www.pwnyoutube.com/watch?v=H-lPXk9IqEU

  • valider si besoin
  • en haut à droite choisir convert to mp3 (si on veut un mp3 bien entendu !)
  • clic
  • dans "Save this video as an MP3 audio file", choisir "YouTube-mp3"
  • clic
  • un dernier clic sur "Télécharger "
  • puis "Enregistrer le fichier", "OK"
  • après vous êtes chez vous, faites attention où vous mettez votre fichier

 Rechercher/remplacer dans la base de données

Par habitude, j’utilisais la balise
pour les sauts de ligne

En passant à Spip 3 sur ce site, voilà pas qu’elle n’est plus reconnue !

Le passage à <br/> se fait automatiquement dans la base de données, en SQL, avec l’instruction :

UPDATE `spip_articles` SET texte = replace(texte, '<BR>', '<br/>');


Agenda

<<

2018

 

<<

Décembre

 

Aujourd’hui

LuMaMeJeVeSaDi
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456
Aucun évènement à venir les 6 prochains mois