Pyrat.net – Création de sites Internet

Installer Smush sous Windows

2022-04-26T14:04:42Z

Smush est un plugin pour SPIP. Il permet de réduire le poids des images d'un site à leur maximum.

La documentation du plugin explique quoi installer sous Linux, mais ne donne pas d'indications pour Windows. C'est à ce manque que nous allons répondre.

Principe général avec Laragon

Laragon a un dossier destiné à recevoir les binaires de l'utilisateur : C:\laragon\usr\bin

C'est directement dans ce dossier que nous pourrons mettre les binaires des programmes nécessaires à Smush.

Les différentes lib à installer

ImageMagick

La page de téléchargement d'ImageMagick suggère une version principale et des versions alternatives.

Choisir la version alternative portable équivalente à la principale :

Principale : ImageMagick-7.1.0-31-Q16-HDRI-x64-dll.exe
⇒ Portable : ImageMagick-7.1.0-portable-Q16-HDRI-x64.zip

Mettre l'intégralité des fichiers contenus dans l'archive dans le dossier usr\bin de Laragon.

libjpeg

Autant prendre la version rapide de libjpeg :

Téléchargement depuis SourceForge de la dernière version pour Windows : libjpeg-turbo-2.1.3-vc64.exe
Ouvrir le .exe avec un lecteur d'archives (7-zip par exemple), et mettre seulement les fichiers contenus dans le dossier bin de l'archive dans le dossier usr\bin de Laragon

pngnq

On va prendre un forf plus récent : app-pngnq-s9 :

Download App
Dans le zip, ne prendre que pngnq-s9.exe et le mettre dans le dossier usr\bin de Laragon
renommer pngnq-s9.exe → pngnq.exe

OptiPNG

récupérer le zip pour Windows depuis http://optipng.sourceforge.net/
Dans le zip, ne prendre que optipng.exe et le mettre dans le dossier usr\bin de Laragon

Gifsicle

récupérer le zip pour Win64 depuis https://eternallybored.org/misc/gifsicle/
Dans le zip, ne prendre que les 2 .exe et les mettre dans le dossier usr\bin de Laragon

Voir en ligne : Documentation officielle Smush

Outils d'évaluation de la qualité d'un site

2015-10-05T10:54:11Z

Les outils à votre disposition

Plusieurs outils sont utilisables :

Chacun de ces outils va vous donner une note globale et des explications pour chaque critère d'amélioration possible.

Quelques exemples

Voici quelques exemples de ce que ce outils fournissent comme indications :

Requests number
This is one of the most important performance rule. Every request is slowing down the page loading.
Combine images using CSS sprites
Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.
Différez l'utilisation du code JavaScript
Le JavaScript bloque l'interprétation de la page par défaut. Vous devez différer au maximum son utilisation afin de favoriser en priorité l'affichage des premiers éléments de la page.
Exploiter la mise en cache du navigateur
Si vous définissez une date d'expiration ou une durée de validité maximale pour les ressources statiques dans les en-têtes HTTP, vous indiquez au navigateur d'aller chercher les ressources déjà téléchargées sur le disque local plutôt que sur le réseau.

⇒ Et c'est là qu'il devient évident :

qu'il vaut mieux maîtriser l'anglais
et que la mise en œuvre de ces recommandations nécessite un travail minutieux et conséquent.

Étude de cas

Nous allons nous intéresser au site Pyrat.net.

Les résultats affichés ci-dessous font suite à une série d'améliorations du squelette SoyezCréateurs [1].

GTMetrix

Pyrat net évalué par GTmetrix septembre 2015

⇒ Résultats en ligne de Pyrat.net sur GTmetrix

Yellow Lab Tools

Pyrat net évalué par Yellow Lab Tools septembre 2015

⇒ Résultats en ligne de Pyrat.net sur Yellow Lab Tools

DareBoost

Pyrat net évalué par DareBoost septembre 2015

⇒ Résultats en ligne de Pyrat.net sur DareBoost

PageSpeed Insights

Pyrat net évalué par PageSpeed Insights septembre 2015

⇒ Résultats en ligne de Pyrat.net sur PageSpeed Insights

WebPageTest

Pyrat net évalué par WebPageTest septembre 2015

⇒ Résultats en ligne de Pyrat.net sur WebPageTest

Pingdom Website Speed Test

Pyrat net évalué par Pingdom Website Speed Test septembre 2015

⇒ Résultats en ligne de Pyrat.net sur Pingdom

Conclusions

Les résultats de septembre 2015 ci-dessus sont le fruit d'une série d'améliorations ou d'optimisations globales du squelette SoyezCréateurs accompagnant son passage à SPIP 3.

C'est ce processus d'amélioration continu que nous mettons en œuvre dans le cadre de notre Hébergement spécialisé de tout repos : SPIP+SoyezCréateurs à partir de 240€ HT/an.

Certains points peuvent encore être améliorés et le seront progressivement.

Mais, pour avoir testé d'autre sites [2], nous avons pu nous rendre compte que leur marge de progrès était bien (trop) souvent plus importante et que beaucoup étaient largement perfectibles.

Certains points ne sont cependant améliorables qu'en ayant accès :

à la configuration du serveur
au moteur du site
et aux modèles d'affichage des pages du site

[1] SoyezCréateurs est créé et maintenu par Pyrat.net depuis 2003. Vous pouvez bénéficier d'un Hébergement spécialisé de tout repos : SPIP+SoyezCréateurs à partir de 240€ HT/an incluant un processus d'amélioration continu du moteur de votre site.

[2] Réalisés par des amateurs ou des professionnels…

Et vous, quels sont vos résultats ?

N'hésitez pas à prendre contact pour améliorer votre site avec nous.

Insérer une vidéo Youtube comme document joint à SPIP

2015-04-23T11:19:18Z

Mise en œuvre

Nous allons prendre l'exemple de cette vidéo sur l'usage d'un ordinateur par une personne aveugle..

Son URL sur Youtube est https://www.youtube.com/watch?v=Kz1AQ4dqxgA

Son identifiant est Kz1AQ4dqxgA.

Nous allons utiliser le code suivant :
http://www.youtube-nocookie.com/v/yyyyyyyyyyyy?version=3&hl=fr_FR&rel=0

Et remplacer yyyyyyyyyyyy par l'identifiant :
http://www.youtube-nocookie.com/v/Kz1AQ4dqxgA?version=3&hl=fr_FR&rel=0

C'est cette URL que nous allons utiliser comme source du document distant :

Ajouter un document distant

Une fois correctement titrée, la vidéo peut être insérée dans le texte par : où NNN est le numéro du document.

Bonus mode communiquant SoyezCréateurs

Bonus : en mode communiquant de SoyezCréateurs, pour avoir une vidéo affichée sur la page d'accueil, il suffit :

de faire un article dont le titre sera affiché en haut de la vidéo
de joindre une vidéo de cette manière
d'affecter à l'article le mot clef « VideoALaUne »
de publier

Utilisez oEmbed, c'est plus simple !

SPIP dispose désormais d'un plugin qui simplifie énormément le processus : oEmbed !

Il suffit de coller dans l'article l'URL de la vidéo (avec une ligne vide juste avant si l'article commence par la vidéo).

L'avantage du plugin oembed est qu'il est naturellement respectueux des utilisateurs, car les vidéos ne sont jamais chargées au chargement de la page, mais uniquement quand l'utilisateur clique sur la vidéo pour la lire. Par ailleurs les vidéos sont dans la mesure du possible lues en évitant les cookies utilisateurs.

Pour information oEmbed contient une action pour convertir les iframes placées dans le contenu éditorial.
Elle s'appelle avec l'URL spip.php?action=oembed_nettoyer_iframes et il faut être webmestre.
L'interface est brute, mais ça fait le travail [1].

[1] N'oubliez pas de rajouter &modif=1 pour que le travail soit fait.

Utiliser FireFox pour connaître la version de SPIP installée sur un site

2015-03-09T14:52:46Z

Afin de faciliter l'entr'aide dans la communauté des utilisateurs de SPIP, SPIP affiche dans les entêtes HTTP de la page envoyée au navigateur la version de SPIP (et les plugins utilisés).

Comment afficher ces informations ?

Solution ponctuelle : Web sniffer

Le service en ligne Web Sniffer permet de consulter les entêtes HTTP d'une page web.

C'est assez technique, et peu pratique à utiliser.

Une extension de FireFox : Header Spy

Nous allons installer 2 extensions :

Dans les options de Header Spy, nous allons ajouter une entrée :

de type Response, Other
« Composed-By »

Header Spy options

Header Spy paramétrage

N'est-ce pas risqué qu'un site affiche sa version de moteur ?

En effet, si on sait la version de SPIP [1], on pourrait penser que cela facilité son piratage.

En pratique, on constate que les pirates utilisent des scripts qui automatisent le piratage, et que cacher le version utilisée ne les arrête pas.

C'est ce qu'on appelle la sécurité par l'obscurité ; et c'est une illusion ! La meilleure sécurité, c'est encore de maintenir ses applications à jour.

Par contre, laisser la version de SPIP affichée est une bonne chose en cas de demande d'assistance.

[1] Ou de n'importe quel CMS, d'apache, de PHP, de MySQL…

Un bien bel outil pour faciliter le SAD !

Personnaliser les CSS des boutons d'admin de SPIP

2013-07-01T13:53:11Z

La documentation de SPIP parle de la personnalisation des CSS avec un fichier perso.css, mais elle ne parle pas de la personnalisation des boutons d'admin.

Pour personnaliser les styles des boutons d'admin, créer un fichier spip_admin_perso.css dans le dossier squelettes/.

Il ne restera plus qu'à y mettre vos surcharges CSS (FireBug ou équivalent vous seront alors bien utiles).

Exemple de personnalisation : boutons d'admin du squelette SoyezCréateurs.

Utiliser le crontab d'UNIX pour les taches de SPIP

2013-06-20T21:19:57Z

Quand sur un site on a des tâches qu'on veut régulière, et que ce n'est pas un gros site, il faut configurer un cron serveur pour appeler le cron de SPIP toutes les minutes (par exemple).

Le code source de SPIP indique :

Cette fonction est utile pour être appelée depuis un cron UNIX par exemple car elle retourne tout de suite

Exemple de tache cron Unix pour un appel toutes les minutes :

* * * * * curl http://www.mondomaine.tld/spip.php?action=cron

Et si SPIP-CLI est installé, on peut appeler :

spip jobs:executer

Et dans le cadre d'une mutualisation de SPIP :

spipmu '*' jobs:executer

NB : _HTML_BG_CRON_INHIB est inutile :

Le define sur la constante est inutile, il ne concerne que l'insertion via une image de bg qui est la méthode la plus ancienne et historique. SPIP continuera à surveiller le cron sur les hits http, et à lancer le traitement des tâches si il y a des tâches en attente, car on veut qu'elles soient traités.

Mais si ton appel au cron via cli est lancé suffisamment souvent il n'aura rien à faire la plupart du temps.”

Source : Pouvoir appeler le cron de SPIP #65

Liens vers Service-Public.fr pour une mairie

2011-10-05T11:27:39Z

L'État met à disposition des collectivités et de leurs administrés un Service Public.

Vous trouverez en pièce jointe les raccourcis typographiques de SPIP mis en œuvre pour ce résultat :

L'espace Particuliers du site « Service-public.fr » vous apporte tous renseignements pour vous guider dans vos droits et démarches administratives.

Il vous offre la possibilité de télécharger les formulaires officiels et constamment à jour (COSA et CERFA).

Nous avons sélectionné les démarches les plus courantes en relation avec les mairies pour faciliter votre recherche et l'accès aux formulaires officiels correspondants.

Il vous suffira de cliquer sur le titre de ce que vous recherchez pour y accéder directement…

Etat Civil
Naissance
Déclaration
Copie ou extrait d'acte
Le choix du nom de famille
Décès
Déclaration
Copie d'acte
Inhumation
Mariage
Formalités
Copie ou extrait d'acte
Urbanisme
Certificat d'urbanisme
Permis de construire
Déclaration de travaux
Papiers d'identité
Carte d'identité
Passeport
Sortie de territoire pour les mineurs
3^e âge
Aide aux personnes âgées
Élections
Inscription sur liste électorale
Vote par procuration
Recensement militaire
Recensement
Cartes grises
Carte grise
Allo Service Public

Service de renseignement administratifs par téléphone : le 39 39

Il est bien évidement possible pour aller plus loin d'intégrer les services de grande qualité de Comarquage.

Merci à Pascal Mechin pour le texte original !

Scinder un article en plusieurs sans tout casser

2011-07-08T15:57:20Z

Vous avez un site dans lequel vous constatez qu'un gros article (assez souvent seul dans sa rubrique) mériterait d'être réécrit en plusieurs articles.

Comment faire pour que les moteurs de recherche et les internautes ayant un favori sur cet article ne soient pas perdus avec le changement ?

Méthode de découpe

Soit un article original.

Nous allons créer

une rubrique portant le titre de l'article [1]
autant de nouveaux articles que de parties à découper dans l'article original.

Et faire des copier/coller en abondance.

Ne pas perdre le référencement

Pour que l'article original ne donne pas une page 404, nous allons utiliser les redirections de SPIP pour que l'article redirige sur la rubrique que nous avons créée. Et l'article original est déplacé dans une rubrique « Archives » de la rubrique « fourre-tout »

Il est aussi possible de conserver l'article original en créant autant d'articles que de parties à découper moins un, et l'article original devient un nouvel article qui ne contient qu'une partie de l'article original, généralement la première.

[1] Si l'article original avait une introduction, nous allons la placer dans le texte de la rubrique nouvellement créée.

Optimisation SPIP sur un hébergement OVH mutualisé

2011-06-12T11:33:50Z

.htaccess spécifique

Dans le .htaccess de SPIP, il faut rajouter toutes ces lignes.

### Reglages pour OVH : # PHP 5.2 SetEnv PHP_VER 5 # A desactiver pour raisons de securite SetEnv REGISTER_GLOBALS 0 # Optimise les scripts ? SetEnv ZEND_OPTIMIZER 1 # Ne pas mettre l'identifiant de session dans les urls SetEnv SESSION_USE_TRANS_SID 0 # Et pour l'optimisation des perf : # On compresse l'envoi au navigateur des types suivants AddOutputFilterByType DEFLATE text/plain text/html text/css text/xml application/rss+xml application/javascript text/javascript # gestion des navigateurs buggés # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # MSIE masquerades as Netscape, but it is fine # BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48 # the above regex won't work. You can use the following # workaround to get the desired effect: BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # gestion des proxy caches Header append Vary User-Agent AddType image/vnd.microsoft.icon .ico # expiration des fichiers ExpiresActive On # le html maintenant ExpiresByType text/html A1 # les css et js apres deux semaines dans le cache du client # une semaine = A604800 ExpiresByType text/css A1209600 ExpiresByType application/javascript A1209600 ExpiresByType text/javascript A1209600 # les images, videos et flash apres 2 mois dans le cache du client ExpiresByType image/* A5184000 ExpiresByType video/x-flv A5184000 ExpiresByType application/x-shockwave-flash A5184000 # desactivation des Etag FileETag none Header unset ETag

Des explication complémentaires : Optimisation d'Apache.

Paramétrage de SPIP

Dans la configuration avancée de SPIP, il faut activer la compression des CSS et des JavaScripts.

Inspiré d'une astuce donnée par Sylvain sur SPIP-User.

Sous Windows : insérer une image venant du web dans un article SPIP

2011-05-07T17:31:02Z

La méthode pur SPIP

SPIP dispose d'une notion de document distant qui permet d'indiquer l'URL du document en question au lieu d'aller chercher le document sur son disque dur.

Une fois fait, il reste possible de demander à SPIP de faire une copie « locale » du document distant qui devient alors local au site.

Méthode classique sous Windows/OSX/Linux

Autre solution :

enregistrer le document distant sur son disque dur
le joindre à SPIP de manière « classique »

Le meilleur des 2 mondes : astuce Windows

copier dans le presse papier l'URL du document ou de l'image à joindre à SPIP
suivre la procédure « classique » de SPIP pour joindre un document présent sur son disque dur
sauf qu'au moment de choisir le fichier « local », il suffit de coller l'URL « distante »

Que s'est-il passé ?

Windows a tout simplement fait une copie locale du fichier distant, et c'est cette copie locale qui a été jointe à SPIP.

Seulement les documents joints ?

Bien évidement, cette astuce fonctionne aussi pour les logos.

Celui de cet article a été récupéré en copiant/collant l'URL du bouton « Download PNG » d'une icone trouvée sur IconFinder.

Une astuce pratique en formation, quand il n'y a pas d'images sur le PC des stagiaires !