Tech de Gamuza

DDEV - Configuration pour utiliser mariadb de l'hôte

Christophe — 2024-11-15T08:30:23Z

# Configuration pour utiliser mariadb de l'hôte

## 1. Configuration de DDEV

Il faut ajouter un fichier à la racine de son sous dossier .ddev (de son projet) : docker-compose.override.yaml

services: db: extra_hosts: - "host.docker.internal:host-gateway" environment: - MYSQL_HOST=host.docker.internal

Apres avoir redémarré ddev, si vous vous connectez dans le conteneur db, vous pourrez voir que la commande suivante fonctionne ping host.docker.internal Pour ce

## 2. Configuration de mysql de l'hôte.

Il faut modifier votre instance de mysql/mariadb pour qu'elle écoute toutes les ip et pas seulement localhost. Pour cela il faut changer dans la conf de mariadb my.cnf la ligne : bind-address = localhost par bind-address = 0.0.0.0 En terme de sécu, c'est un peu moins bien ;-)

## 3. User mysql pour le spip

Il faut que votre user mysql est comme nom d'hôte % et non localhost

## 4. Configuration du spip

Il faut changer dans le fichier connect.php :

* le nom d'host devient host.docker.internal
* le port 3306 (inchangé)
* user -> celui défini dans l'étape 3

DDEV - Personnalisation de phpmyadmin

Christophe — 2024-11-15T08:25:21Z

Si vous souhaitez modifier la configuration de phpmyadmin, en utilisant un fichier config.user.inc.php

1. dans le fichier : docker-compose.phpmyadmin.yaml, ajouter dans la clé phpmyadmin :

services: phpmyadmin: build: context: ./phpmyadmin

2. Il faut maintenant créer le dossier phpmyadmin dans .ddev : mkdir phpmyadmin
3. Ajouter dans ce dossier un fichier Dockerfile avec le contenu suivant :

FROM phpmyadmin:5.2.0 COPY config.user.inc.php /etc/phpmyadmin/config.user.inc.php

4. Ajouter dans ce dossier votre fichier config.user.inc.php ex :

<?php $cfg['TablePrimaryKeyOrder'] = 'DESC'; $cfg['MaxNavigationItems'] = 100;

5. Relancer ddev

Utiliser une sous-requête MySQL pour compter le nombre de liaisons sur un élément

clem — 2024-07-13T00:05:42Z

Exemple en SPIP d'utilisation de COUNT() en sous-requête

La table spip_mots_liens est utilisée pour stocker les liaisons des objets SPIP (articles, rubriques...) sur les mots clés de la table spip_mots.
On souhaite faire une liste des mots clés du groupe 2 avec pour chacun le nombre de liaisons qu'il possède :

SELECT m.id_mot, m.titre, (SELECT COUNT(L.id_mot) FROM spip_mots_liens AS L WHERE L.id_mot = m.id_mot) AS nb FROM spip_mots AS m WHERE m.id_groupe=2 ORDER BY m.titre;

on obtient un résultat de la forme

| id_mot | titre | nb | | 122 | acceptability | 1 | |185 | adaptation | 1 | | 220 | agriculture | 1 |

Utiliser PHP_codeSniffer : les bases

clem — 2024-03-01T11:52:45Z

Usage : quelques exemples de commandes

Tester un fichier php seul :

phpcs dossier/fichier_truc.php

Tester un dossier complet : par ex à la racine d'un répertoire de plugin
(/ !\ attention ! lancer phpcs sur un gros dossier avec beaucoup de fichiers (php / css / js) sans faire de restrictions via la configuration peut entraîner une GROSSE charge pour votre processeur !)

phpcs dossier/

devrait retourner tout un tas d'erreurs à corriger, pour à peu près tous les types de fichiers (js, css, php)

Restreindre la portée du scan aux fichiers PHP, exclure des dossiers :
En ajoutant le fichier phpcs.xml à la racine du répertoire avec le contenu proposé dans momh.fr, on doit restreindre la détection des erreurs aux fichiers .html et .php
Le contenu du fichier :

<?xml version="1.0"?> <ruleset> <file>./</file> <exclude-pattern>**/*.js</exclude-pattern> <exclude-pattern>**/*.css</exclude-pattern> <exclude-pattern>**/*.scss</exclude-pattern> <exclude-pattern>node_modules/*</exclude-pattern> <exclude-pattern>vendor/*</exclude-pattern> <arg name="colors"/> <rule ref="SPIP41"/> </ruleset>

Tester uniquement avec les coding-standard de SPIP :

phpcs --standard=SPIP41 dossier/fichier_truc.php

Ne pas afficher les warnings (uniquement les erreurs) :

phpcs -n dossier/fichier_truc.php

Colorer la sortie :

phpcs --colors dossier/fichier_truc.php

Compléments de configuration : l'option —config-set

Utilisation de l'option —config-set :
par exemple si vous n'utilisez phpcs/phpcbf que pour les standards SPIP, pour éviter d'ajouter l'option --standard=SPIP41 à chaque appel de la commande, vous pouvez passer ce paramètre en option par défaut avec :

phpcs --config-set default_standard SPIP41

NB : cela donne une configuration écrite dans le fichier ...Composer/vendor/squizlabs/php_codesniffer/CodeSniffer.conf qu'il est possible de bricoler directement aussi
La syntaxe de cette option est de la forme :

phpcs --config-set clé valeur

par ex pour avoir la coloration par défaut

phpcs --config-set colors 1

La documentation pour les configurations possibles avec l'option —config-set :
https://github.com/squizlabs/PHP_CodeSniffer/wiki/Configuration-Options

Exemple de fichier de configuration CodeSniffer.conf pour colorer systématiquement, utiliser les standards SPIP41 et ignorer les warnings :

<?php $phpCodeSnifferConfig = array ( 'installed_paths' => 'C:/Users/VOTRE_USER/AppData/Roaming/Composer/vendor/phpcompatibility/php-compatibility,C:/Users/VOTRE_USER/AppData/Roaming/Composer/vendor/spip/coding-standards/src', 'default_standard' => 'SPIP41', 'colors' => 1, 'show_warnings' => 0, ); ?>

Spécifique installation sous Windows :

Adaptations du post de https://momh.fr/installer-globalement-php_codesniffer
On suppose :

l'utilisateur connecté à la session Windows est VOTRE_USER
Composer installé sur la machine
on utilise Gitbash comme interpréteur de commandes (cf https://contrib.spip.net/SPIP-Cli#Specificites-d-installation-sous-Windows)

1/ Installation globale :

composer global --dev require squizlabs/php_codesniffer composer global --dev require spip/coding-standards

Tester que c'est OK :

phpcs --help phpcbf --help

doivent retourner le Help avec toutes les options de la commande

2/ Déclarer le répertoire des standards SPIP à PHP_CodeSniffer :

phpcs --config-set installed_paths C:/Users/VOTRE_USER/AppData/Roaming/Composer/vendor/phpcompatibility/php-compatibility,C:/Users/VOTRE_USER/AppData/Roaming/Composer/vendor/spip/coding-standards/src

cette commande devrait retourner :

Using config file: C:\Users\VOTRE_USER\AppData\Roaming\Composer\vendor\squizlabs\php_codesniffer\CodeSniffer.conf

Pour tester que la config est OK la commande :

phpcs -i

devrait retourner quelque chose comme :

The installed coding standards are MySource, PEAR, PSR1, PSR2, PSR12, Squiz, Zend, PHPCompatibility, SCS1, SPIP40 and SPIP41

Références :

pour l'installation le billet du blog momh.fr : https://momh.fr/installer-globalement-php_codesniffer
le Github de PHP_codeSniffer : https://github.com/squizlabs/PHP_CodeSniffer

Tests de nom de classe CSS

clem — 2022-12-14T19:01:39Z

Code :

test.123

test#123

test@123

test<123

test123

 test~123
 _test123
 -test123
 123test

 {{{Résultat:}}}  test.123
 test#123
 test@123
 test<123
 123">test`123
test 123
_test123
-test123
123test


ZZZ : URL canonique
clem — 2022-11-30T10:40:27Z

Je demandais hier sur #spip si quelqu'un connaissait un standard pour signaler l'URL canonique d'une page Web. S'koi ? Si on est en train de lire une page sur un site, on peut l'avoir abordée par plusieurs adresses :
 - http://monsite.tld/article12 - http://monsite.tld/Mon-titre-d-article - http://www.monsite.tld/article12.html?couleur=bleu - http://www.monsite.tld/article12.html?post=1 - http://www.monsite.tld/article12.html?PHPSESSID=a2c5fe78
Tout ça, ce sont des URLs valables, qui affichent bien le même article. Mais si je veux mettre des gens (ou des robots) d'accord sur ce qu'est la « vraie » adresse de cet article, il faut que je l'annonce, d'une manière ou d'une autre.
Cette problématique concerne au premier chef les moteurs de recherche et d'indexation (mais pas seulement). Or il se trouve que pas plus tard que la semaine dernière les trois poids lourds Google, Yahoo et Live (Microsoft) annonçaient que leurs algorithmes allaient accepter qu'on leur parle de l'URL canonique d'une page.
– https://developers.google.com/search/blog/2009/02/specify-your-canonical

– https://moz.com/blog/canonical-url-tag-the-most-important-advancement-in-seo-practices-since-sitemaps
C'est bien fait, et c'est simple à mettre en œuvre. En gros, pour toute page HTML qui peut avoir plusieurs adresses, on va indiquer laquelle est la principale, en insérant dans son ... une balise :
 <link rel="canonical" href="http://www.monsite.tld/URL-canonique" />
Les algorithmes qui le souhaitent sauront donc que la page http://www.monsite.tld/article12 qui mentionne ce lien doit en fait être considérée comme étant à l'adresse canonique http://www.monsite.tld/URL-canonique. Et feront leurs calculs (PageRank...) et affichages (résultats de recherche...) en tenant compte de cette information.

* * *
Autre exemple d'usage (qui était celui qui avait suscité ma question) : lorsqu'on veut participer aux sites de partage de bookmarks type delicious.com, il importe que les différents partageurs se mettent d'accord sur une adresse unique, de manière à pouvoir discuter de la même chose, même s'ils l'ont vue dans un contexte différent. Le plugin SPIP Social Tags en tient compte.
Dans le squelette SPIP article.html, il suffit d'indiquer dans la partie .. le code suivant [1] :
 <link rel="canonical" href="[(#URL_ARTICLE|url_absolue)]" />

Pour que Google considère qu'un (vieux) lien vers http://monsite.tld/a1.html pointe en fait vers http://www.monsite.tld/Titre-article (URL canonique de l'article si on a activé les URLs « propres »). Ou que SocialTags indique le nouvel URL dans delicious quand on clique sur l'icone, même si le navigateur indique http://www.monsite.tld/Titre-article?PHPSESSID=12345.

URL canonique et permalien

C'est bien gentil ces URLs canoniques, mais quelle est la différence avec le permalien ?

L'idée du « permalien » d'un article, c'est d'avoir un lien qui référencera toujours cet article ; ainsi, sur un blog, on veut que les gens qui référencent un article ne fassent pas un lien vers la page d'accueil — alors que celle-ci va tourner au fur et à mesure de l'ajout de nouveaux articles — mais plutôt un lien vers une page précise qui affichera toujours l'article dans deux semaines, quand il ne sera plus sur la page d'accueil.

Bien sûr le permalien pointera en général vers l'URL canonique de l'article, ce qui fait qu'en pratique, ces deux propriétés ont la même valeur.

Cependant, les deux notions ne sont pas identiques. On peut imaginer qu'un permalien nous redirige vers l'URL canonique, laquelle peut changer au cours du temps. Par exemple, lorsque SPIP sera racheté par la Mozilla Corp., l'URL canonique de l'article de l'article « Est-ce que je peux... », qui est actuellement http://www.spip.net/fr_article1475.html, deviendra (sur ordre du département marketing) https://spip.mozcorp.world/Est-ce-que-je-peux.html.

L'URL canonique de cet article aura donc changé. Mais http://www.spip.net/fr_article1475.html est et restera un permalien : il affichera toujours le bon article (soit directement, soit en renvoyant le lecteur vers le site mozcorp.world).

Autrement dit :

un permalien (il peut y en avoir plusieurs pour un même article) est un lien qui pointe toujours vers cet article (cette « ressource », en jargon webique). On le code sous la forme . Tant qu'il permet de retrouver la ressource, fût-ce à travers des modifications de formatage des URLs, des redirections et des changements de noms de domaine, c'est un permalien.
l'URL canonique d'une ressource quant à elle est unique (mais pas forcément permanente) : elle signale l'adresse « standard » où il faut aller chercher cette page, même si on l'a trouvée ailleurs. On la référence à l'intérieur de l'entête de la page sous la forme .

Réaliser un webdocumentaire : les modes de navigation

clem — 2022-11-05T11:38:22Z

1. Conception d'un webdoc : scénarisation, navigation et narration

Rappel : un webdocumentaire peut être caractérisé par :

l'utilisation d'un contenu multimédia,
l'introduction dans le récit de procédés interactifs,
une navigation et un récit non linéaire (implication de l'utilisateur + liberté de parcours)
une écriture spécifique
un point de vue d'auteurs

Son attractivité va donc être particulièrement dépendante de la "manière de raconter les choses", laquelle est la résultante de 3 "éléments" du webdoc qu'il va falloir envisager explicitement lors de sa conception :

la scénarisation : propos général, intentions, qu'est-ce qu'on veut dire, qu'est-ce qu'on veut démontrer (pour la globalité du webdoc et à l'intérieur de chaque partie).
la navigation : ce que l'internaute choisit de faire comme parcours, ce qu'il décide de cliquer, l'ensemble des possibilités de liens hypertextes offerts dans les pages. C'est la manière de se déplacer au sein du webdoc.
la narration : la manière de raconter/présenter les choses. À l'intérieur des possibilités offertes par la navigation, en fonction des intentions de la scénarisation on doit dégager un ou plusieurs parcours différents = successions de pages proposées, qui vont raconter une histoire. La narration c'est l'utilisation d'une ou plusieurs manières de naviguer pour raconter des choses particulières, pour guider les visiteurs.

Cet article propose d'explorer les modes de navigation utilisés à l'heure actuelle pour permettre "d'ouvrir" la réflexion lors de la conception de la (les) narration(s) d'un webdoc.

2. Modes de navigation : les grands types

Chaque webdoc ou partie de webdoc propose une ou plusieurs façon de parcourir ses contenus : on parlera de "mode de navigation". Il s'agit de la manière dont sont proposés, organisés les liens et tous les éléments qui permettent de consulter les contenus.
En fonction de l'importance et de la diversité de ses contenus, un webdoc peut proposer un ou plusieurs modes de navigation : soit exclusif (par exemple pour une partie) soit en parallèle.
Une typologie rapide et illustrée d'exemples des modes de navigation les plus répandus est proposée ci-dessous. Pour chaque type est proposé un exemple "court" et un exemple "long".

Chapitrage
Parcours du webdoc selon des "chapitres" cad des parties nettement séparées entre elles. Chaque chapitre peut lui même être subdivisé en sous-parties. En général l'organisation interne des chapitres (présentation des capsules, types de pages disponibles, menus de navigation...) est identique. Habituellement un menu des chapitres est à disposition dans toutes les pages
Exemples :

EPSYKOI : la santée mentale et les jeunes https://epsykoi.com
Le cloître & la prison : http://cloitreprison.fr/chapitre3-batiment-convers/3-1_populations-monastiques.html
Panafest https://www.panafest.org.za ("multi chapitrage" = des chapitrages en parallèles en fonction des thématiques)

Cartographie
Navigation sur une (plusieurs) carte(s), les contenus sont accessibles via leur marqueur sur la carte. Peut offrir l'accès aux contenus en fonction de la géolocalisation de l'internaute.
Exemples :

Plongée dans le Paris populaire https://www.liberation.fr/apps/2019/02/paris-populaire/
Fos étang de Berre 200 ans d'histoire industrielle et environnementale https://fos200ans.fr/-Mode-cartographique-fa7d.html

Immersion
Le parcours du webdoc se fait en mettant l'internaute "dans la peau" d'un(e) personnage afin de donner son point de vue (au sens propre du terme). L'immersion se fait de plus plus en mode panoramique 360°. Parfois associé avec un aspect ludique ("game-doc" : concept de "l'histoire dont vous êtes le héros")
Exemples :

Salauds de pauvres http://www.salaudsdepauvres.be/
A l'heure du lait : https://www.ferme-laitiere-france.com/fr/les-lieux-de-la-ferme/

Data visualisation
Ce type de navigation est basé sur la présentation sous diverses formes d'ensembles de données (statistiques, cartographiques, analytiques...) pour permettre leur visualisation de façon pédagogique et/ou percutante.
Exemples :

A data sur la politique : https://lesjours.fr/obsessions/data-politique/ep4-trolls-assemblee/
Welcome to the anthropocene : https://anthropocene.info/planetary-boundaries.php

Articles long format ("stories")
Très utilisé par les webdocs journalistiques, la navigation se fait de façon linéaire en déroulant ("scrollant") une page qui présente des faits, médias ou événements successifs. En fonction de la quantité d'informations, le webdoc peut être constitué d'une ou plusieurs page(s)/story(ies) successives.
Exemples :

Homo plasticus (story unique) : https://labs.letemps.ch/interactive/2018/longread-homo-plasticus/
Made in France (ensemble de stories) : https://made-in-france.disclose.ngo/fr/chapter/yemen-papers/

Timeline / Frise chronologique
La navigation est basée sur la chronologie d'une période sur laquelle sont placés les diffférentes capsules/contenus. En général une "timeline" (frise chronologique) permet de visualiser l'ensemble de la période d'étude.
Exemples :

Computer grrrls : http://computer-grrrls.gaite-lyrique.net/
Herbier 2.0 http://www.webdoc-herbier.com/

Déstructurée
Une navigation atypique faite pour désorienter le visiteur et le mettre dans l'esprit du sujet : "Hommage aux 100 ans de Dada"
Exemple :

Dada data http://dada-data.net/fr/

3. Annexe : un ensemble de webdocs pour explorer ce qu'il existe / ce qu'il est possible de faire

(les modes de navigations principaux sont précisés en dernière info)

Made in France : https://made-in-france.disclose.ngo/fr
une enquête sur l'usage des armes françaises contre des civils dans la guerre au Yémen
stories
War in Raqqa : rhetoric versus reality : https://raqqa.amnesty.org
synthèse d'Amnesty International à propos des pertes civiles lors de la prise de Raqqa par les forces de la coalition (navigateur Chrome/Chromium nécessaire pour l'immersif)
stories + carto + immersif 360°
Fos étang de Berre 200 ans d'histoire industrielle et environnementale : https://fos200ans.fr
vulgarisation d'un projet de recherche
chapitrage + carto
Le cloître & la prison Les espaces de l'enfermement : http://cloitreprison.fr
éclairer l'histoire des espaces d'enfermement et sur leurs multiples transformations en France
chapitrage + chronologie
EPSYKOI : la santée mentale et les jeunes : https://epsykoi.com
Un webdocumentaire d'information et de prévention en santé mentale et une réalisation collective entre usagers de la psychiatrie, psychologues et vidéastes.
Hommage à Frédéric Bazille : https://musee.info/Hommage-a-Frederic-Bazille
le Musée Fabre de Montpellier rend un hommage au peintre Frédéric Bazille
chapitrage + stories + immersif 360° + carto
Herbier 2.0 : http://www.webdoc-herbier.com/
40 chroniques à l'occasion de la rénovation de l'Herbier du Muséum national d'Histoire naturelle
timeline
Panafest : https://www.panafest.org.za
grands festivals panafricains des années 1960 et 1970.
chapitrage multiple (selon les thématiques) + immersif
Welcome to the anthropocène : https://anthropocene.info/index.php
portail éducatif à propos de l'anthropocène
data-visualisation+ chapitrage
Pharma papers : http://www.bastamag.net/IMG/webdocs/pharmapapers/
Lobbying et mégaprofits : tout ce que les labos pharmaceutiques voudraient vous cacher.
chapitrage
#Salauds de pauvres : http://www.salaudsdepauvres.be/
documentaire transmédia sur la mendicité à Bruxelles
immersif + chapitrage
Dada data : http://dada-data.net/fr/
un hommage aux 100 ans du mouvement Dada
déstructuré
Liberté, Inégalités ? Fraternité : https://www.jeunes.inegalites.fr/liberte-inegalites-fraternite
outil interactif et ludique pour parler d'inégalités et de discriminations
chapitrage
Do Not Track : https://donottrack-doc.com/fr
données et faits sur la vie privée et l'économie du Web
data-visualisation + chapitrage
A l'heure du lait : https://www.ferme-laitiere-france.com/fr/accueil/
webdoc "vitrine" du Centre National Interprofessionnel de l'Économie Laitière
immersif 360° + stories + chapitrage
Water for Iraq : http://www.waterforiraq.com/#EN_FILM
la problématique de l'eau en Irak
immersif + carto
A data sur la politique : https://lesjours.fr/obsessions/data-politique
une "data-enquête" sur les députés et le fonctionnement de l'assemblée (2017-22)
data-visualisation + chapitrage
Computer Grrrls : http://computer-grrrls.gaite-lyrique.net
une frise chronologique à propos des femmes dans l'informatique
timeline
Plongée dans le Paris populaire : https://www.liberation.fr/apps/2019/02/paris-populaire/
une cartographie historique du Paris populaire de 1830 à 1980 (participatif)
carto
Minett stories : https://minett-stories.lu/fr/
les histoires et les identités de la région industrielle du Minett (Luxembourg), ainsi que des personnes qui y ont vécu et travaillé.
stories
Land of plenty, land of but a few : https://terradealguns.divergente.pt/en/
la problématique des terres agricoles au Mozambique
stories + immersif 360°
17.10.61 : http://raspou.team/1961/home/
revivre le 17 octobre 1961
carto + timelines
Migrantes de otro mundo : https://migrantes-otro-mundo.elclip.org/index.html
parcours des exilés d'Afrique et d'Asie en Amérique du Sud
stories
Donne fuori dal buio : https://www.donnefuoridalbuio.com/en/timeline/
la vie de 4 femmes en Irak pendant l'occupation
timeline + stories
Sur les traces de Boko Haram : https://webdoc.rfi.fr/niger-nigeria-frontieres-boko-haram-islam-jihadistes-terrorisme-lutte-diffa-refugies-rescapees/index.html
reportage sur l'arrivée de Bokom Haram au Niger en 2014-15
story + timeline
Syndrôme d'Asperger : http://www.syndromedaspergerlewebdoc.fr/
Syndrome d'Asperger : dans la peau d'un extra-terrien
chapitrage
Casques sur le front : https://r0c3e20650.racontr.com/
Les casques_blancs syriens portent secours aux populations qui subissent les bombardements
story + chapitrage
Homo plasticus : https://labs.letemps.ch/interactive/2018/longread-homo-plasticus/
Les problèmes environnementaux posés par la consommation de plastique (point de vue Suisse)
story

Utiliser REGEXP_REPLACE pour faire des remplacements en MYSQL

clem — 2022-09-02T10:49:45Z

Syntaxe de base de REGEXP_REPLACE

REGEXP_REPLACE("la chaine sur laquelle on veut faire le remplacement", "expression régulière", "la chaine de remplacement")

Pour la syntaxe complète (paramètres supplémentaires position, nbre d'occurrences, type de remplacement) voir https://dev.mysql.com/doc/refman/8.0/en/regexp.html#function_regexp-replace

Utiliser REGEXP_REPLACE dans un UPDATE

Dans cet exemple on souhaite supprimer (= remplacer par une chaine vide) les numéros qui précèdent le texte dans le champ titre de la table spip_articles. Ces numéros sont tous en début de titre et suivi par un point et un espace : l'expression régulière pour les "attraper" sera donc : ^[0-9]*\. , ce qui donne comme syntaxe de l'UPDATE :

UPDATE spip_articles SET titre = REGEXP_REPLACE(titre, "^[0-9]*\. ", "");

Utiliser des références aux groupes capturés par la regexp

Classiquement les captures de la regexp peuvent être séparées en groupes par des parenthèses. Ces groupes peuvent ensuite êtres appelés dans le remplacement par le modèle \1, \2...
Exemple : récupérer le contenu d'un champ nom et échanger la place du premier mot avec le deuxième (regexp pour "attraper un mot : \w+)

SELECT REGEXP_REPLACE(nom, '(\w+) (\w+)', '\2 \1') FROM spip_auteurs;

Autres opérateurs REGEXP_... de MySQL

Fonction/Opérateur	Description
REGEXP	Correspond une chaîne à une expression régulière `SELECT * FROM mon_annuaire WHERE telephone REGEXP "^00"`
REGEXP_LIKE()	Retourne 1 si la chaîne correspond au motif regex, 0 sinon
REGEXP_INSTR()	Retourne l'index de début du premier match regex
REGEXP_REPLACE()	Remplace les sous-chaînes correspondant au motif regex
REGEXP_SUBSTR()	Retourne la sous-chaîne correspondant au motif regex

Références :

les bases des REGEXP en MySQL : https://www.geeksforgeeks.org/mysql/mysql-regular-expressions-regexp/
les opérateurs REGEXP_... : https://w3schools.tech/fr/tutorial/mysql/mysql-regexps
quelques considérations sur les performances des requêtes avec des REGEXP : https://www.slingacademy.com/article/how-to-perform-full-text-search-in-mysql-8/#performance-considerations
référence officielle : https://dev.mysql.com/doc/refman/8.0/en/regexp.html#function_regexp-replace

Réaliser un webdocumentaire scientifique : concepts et éléments techniques

clem — 2022-02-27T17:01:21Z

Le concept de webdoc
et plus spécifiquement en tant que support de vulgarisation scientifique

Définition « basique » du webdoc (Wikipedia) :
« Le web-documentaire est un documentaire conçu pour être interactif – en associant texte, photos, vidéos, sons et animations – et produit pour être diffusé sur le Web. »
Concept de base : sur un support de site web développer le point de vue global d'un auteur basé sur différents types de documents (textes, photos, audios, vidéos, panoramiques 360°, animations, cartes, data-visualisations, contenus de réseaux sociaux…) tout en donnant la possibilité à l'utilisateur de choisir son parcours de consultation (qui devient « spectateur actif » donc)
Apparition début années 2000 :
- contemporaine du déclin des médias traditionnels (TV en particulier) et du développement de l'hyperconnexion du public avec "picorage" des contenus (typiquement YouTube, réseaux sociaux...)
- explosion du multi-médias dans les contenus informatifs : images, vidéos, cartes, infographies, animations... avec de plus en plus de "mix" entre les types
Caractérisé par :
- l'utilisation d'un contenu multimédia,
- l'introduction dans le récit de procédés interactifs,
- une navigation et un récit non linéaire (implication de l'utilisateur + liberté de parcours)
- une écriture spécifique
- un point de vue d'auteur

Des exemples :
- Fos / étang de Berre 200 ans d'histoire industrielle et environnementale https://fos200ans.fr : un webdoc destiné à la vulgarisation d'un projet de recherche conjoint histoire + sociologie
- Liberté, Inégalités ?, Fraternité https://www.jeunes.inegalites.fr/liberte-inegalites-fraternite : un outil interactif et ludique pour parler d'inégalités et de discriminations
- Made in France https://made-in-france.disclose.ngo/fr : une enquête sur l'usage des armes françaises contre des civils dans la guerre au Yémen
- Hommage à Frédéric Bazille https://musee.info/Hommage-a-Frederic-Bazille : le Musée Fabre de Montpellier rend un hommage au peintre Frédéric Bazille
- Do Not Track https://donottrack-doc.com/fr : webdoc consacré à la vie privée et à l'économie du Web
- War in Raqqa : rhetoric versus reality https://raqqa.amnesty.org : un webdoc d'Amnesty International à propos des pertes civiles lors de la prise de Raqqa par les forces de la coalition
- Le cloître & la prison Les espaces de l'enfermement http://cloitreprison.fr : un webdoc pour éclairer l'histoire des espaces d'enfermement et sur leurs multiples transformations en France. En relation avec un projet de recherche plus global sur l'enfermement monastique et carcéral.

Eléments technique d'un webdoc
avantage et contraintes du média "web"

narration hypertextuelle = structure narrative ramifiée (« délinéarisée »)
- narration principale / secondaire / transversale / thématique + point de vue réflexif puisqu'on est dans un cadre scientifique
- importance du système de navigation : menu(s) / fil d'Ariane / « historique » perso (cf cookies)
- unité narrative : notion de capsule : par ex War in Raqqa
contrainte forte du « multi terminal » pour la consultation : nécessité de concevoir l'interface utilisateur « responsive » = compatible avec tous les formats d'affichage et d'interactions (ordinateur / tablette / téléphone...) (+ notion de « fall-back »)
modes de présentations :
- immersif « classique » :
  - vidéo unique : Water for Iraq http://www.waterforiraq.com/#EN_FILM
  - vidéos multiples : Coexistences https://fnepaca.fr/hommesetbiodiversite/
  - photos : La vie en Afghanistan sous le nouvel ordre des talibans https://www.lemonde.fr/international/article/...
  - visite virtuelle : Hommage à Frédéric Bazille https://musee.info/La-salle-Bazille
  - mix de tous les types de médias (photos, visites 360°, animations, vidéos, audios, cartes...) : Voyage en pays textile https://voyagepaystextile.fr/
- « grands formats » :
  - avec scroll vertical : Made in France https://made-in-france.disclose.ngo/fr/chapter/yemen-papers
    Bargny : Ici commence l'émergence https://bargnyproject.com
  - avec scroll horizontal : Mémoires de Bamyan http://www.memoiresdebamiyan.fr/
- cartographique : Paris populaire https://www.liberation.fr/apps/2019/02/paris-populaire/
- photos aérienne / satellites : Au centre du Mali, des villages rasés par les violences et la famine https://www.lemonde.fr/afrique/visuel/...
- timeline : Computer Grrrls http://computer-grrrls.gaite-lyrique.net/
  Donne fuori dal buio https://www.donnefuoridalbuio.com/en/timeline (+ carto)
- data-visualisation :
  - Data visualisation multi-types sur l'anthropocène (cartographies, timelines, photos satellites https://anthropocene.info/index.php (peut nécessiter de désactiver les vérifications de sécurité du navigateur web...)
  - Transformations to groundwater sustainability : http://t2gws.com (data visualisation sous forme de schémas et dessins d'illustration) web doc collaboratif chercheurs / populations
  - À data sur la politique https://lesjours.fr/obsessions/data-politique/ep4-trolls-assemblee/
  - Base de données Police de BastaMag http://www.bastamag.net/webdocs/police/
- « immersif déstructuré » : Dada data http://dada-data.net/fr/
interactivité :
- à minima choix du parcours de consultation + problématique de sa complexité (trop / pas assez)
- personnalisation de l'UX :
  - adaptations aux interactions et données de navigation de l'utilisateur : Do Not Track
  - géolocalisation : Paris populaire
  - sélection des éléments à intégrer : Bosnie-Herzégovine : si jeunesse pouvait http://sijeunessepouvait-bh.fr/politique.php
  - à l'extrème interactions en temps réel (SMS, notifications par messageries...) : Phone_stories : l'infiltré http://www.phonestories.me/fr/infiltre
- intervention via commentaires, réseaux sociaux... + compétition entre participants (« gamedoc » ?) Fort McMonney http://www.fortmcmoney.com (le site n'est plus opérationnel depuis la finde Flash Player... voir ce reportage de cinemadocumentaire pour les retours d'expérience)
- « call to action » : appels à témoignages ou participation cf War in Raqqa avec appels à témoignages ou aux dons
- parcours personnalisé : ex enregistrer et partager ses favoris sur Géoculture https://geoculture.fr (nécessite de se créer un compte !)
intégration de données et visualisations de celles-ci
- contraintes de la visualisation responsive
- possibilités de visualisations animées
- possibilités de visualisations dynamiques en interaction avec l'utilisateur : https://www.worldnuclearreport.org/reactors.html
  Utilisation de librairies JavaScripts dédiées : 2 exemples avec code source ouvert
  - D3JS : https://observablehq.com/@d3 ou https://www.d3-graph-gallery.com/
  - Vizzu
aspect graphiques :
- charte graphique générale classique (polices, palette de couleurs, jeux d'icônes...)
- habillage photos
- répartition des éléments textes / médias dans les pages
problématique du stockage et de la pérennité :
- évolution des technologies : cf obsolescence de la techno Flash et tous les premiers webdocs qui ne sont plus disponibles si ce n'est en archivage : ex Prison Valley http://prisonvalley.arte.tv/flash/#fr
- disponibilité des ressources externes : passage en accès privé, changement des API...
- nécessité de l'hébergement + maintenance / MàJ

Réalisation d'un webdoc
étapes et éléments pour une gestion collaborative

collecte des données et tri (sources et références obligatoires !) « comme tout documentaire la base d'un web-documentaire reste un long travail de documentation »
constitution d'une médiathèque avec « formatage » commun / standardisé
choix des parcours narratifs selon les publics visés ("personnae")
élaboration du / des scénarios + découpage en parties (= unités de premier niveau)
définition des règles de découpage / subdivisions à l'intérieur des parties (ex pour Fos 200 ans : période > étape > capsule)
détermination du contenu des capsules et attribution des médias aux différents éléments narratifs
organisation précise des capsules dans les parties / sous-parties
habillage des contenus :
- développement des différents gabarits (ou « templates »)
- attribution des gabarits aux capsules + adaptations ponctuelles
organisation des éléments de navigation (menus généraux et contextuels, jeu d'icône, plan du site, moteur de recherche,
mise en place des références : sources, présentation des auteurs, crédits...
relecture, re-relecture, re-re-relecture... et corrections sans fin !

Références

entrée « Web-documentaire » sur Wikipédia https://fr.wikipedia.org/wiki/Web-documentaire
« Le webdocumentaire : un outil numérique innovant au service de l'enseignement, de la recherche et de la valorisation » : https://journals.openedition.org/revuehn/418
Sophie Gebeil : « Le webdocumentaire, expérimentation des nouvelles écritures de l'histoire » https://fos200ans.fr/regards-sur-le-webdocumentaire.html

Tester Xdebug sur un serveur local

clem — 2020-08-30T15:16:21Z

vérifier dans php.ini que l'extension socket est activée
extension=sockets
créer un fichier xdebug_test.php dans un répertoire quelconque de la machine avec le contenu suivant : <?php $adress = '127.0.0.1'; $port = 9000; $sock = socket_create(AF_INET, SOCK_STREAM, 0); socket_bind($sock, $adress, $port) or die(); socket_listen($sock); $client = socket_accept($sock); echo "connexion etablie avec le client: $client"; socket_close($client); socket_close($sock);
lancer ce fichier en PHP-cli (bien sûr l'executable de php doit être dans le $PATH de la machine...)
php xdebug_test.php
lancer une session de debog avec l'extension Firefox Xdebug helper
ouvrir le navigateur sur n'importe quel fichier php du serveur local http://localhost/toto.php ,
si Xdebug est correctement installé la console cli devrait afficher
connexion etablie avec le client: Resource id #5

Références :

La source de ce code : https://blogs.oracle.com/netbeansphp/howto-check-xdebug-installation
l'extension Xdebug helper pour Firefox : https://github.com/BrianGilbert/xdebug-helper-for-firefox
Installation de Xdebug sur Laragon (serveur AMP sous Windows) : https://forum.laragon.org/topic/264/tutorial-how-to-add-xdebug-to-laragon/20?page=1

Tech de Gamuza

DDEV - Configuration pour utiliser mariadb de l'hôte

DDEV - Personnalisation de phpmyadmin

Utiliser une sous-requête MySQL pour compter le nombre de liaisons sur un élément

Exemple en SPIP d'utilisation de COUNT() en sous-requête

Utiliser PHP_codeSniffer : les bases

Usage : quelques exemples de commandes

Compléments de configuration : l'option —config-set

Spécifique installation sous Windows :

Références :

Tests de nom de classe CSS

Code :

ZZZ : URL canonique

URL canonique et permalien

Réaliser un webdocumentaire : les modes de navigation

1. Conception d'un webdoc : scénarisation, navigation et narration

2. Modes de navigation : les grands types

3. Annexe : un ensemble de webdocs pour explorer ce qu'il existe / ce qu'il est possible de faire

Utiliser REGEXP_REPLACE pour faire des remplacements en MYSQL

Syntaxe de base de REGEXP_REPLACE

Utiliser REGEXP_REPLACE dans un UPDATE

Utiliser des références aux groupes capturés par la regexp

Autres opérateurs REGEXP_... de MySQL

Références :

Réaliser un webdocumentaire scientifique : concepts et éléments techniques

Le concept de webdoc et plus spécifiquement en tant que support de vulgarisation scientifique

Eléments technique d'un webdoc avantage et contraintes du média "web"

Réalisation d'un webdocétapes et éléments pour une gestion collaborative

Références

Tester Xdebug sur un serveur local

Références :

Le concept de webdoc
et plus spécifiquement en tant que support de vulgarisation scientifique

Eléments technique d'un webdoc
avantage et contraintes du média "web"

Réalisation d'un webdoc
étapes et éléments pour une gestion collaborative