#jquery

Gaffe : dans un très grand nombre d’exemples, l’affichage n’est pas du tout responsive. C’est tout de même dommage de nos jours.

Oui, c’est une contrainte forte à intégrer, c’est clair !

Voici un outil qui pourrait être utile : ►https://revealjs.com

Un jour il faudra que je développe ces idées, parce que ça me tient à cœur, mais rapidement, sur les limites de ces formats :

– les longforms ont été popularisés vers 2011 à partir du NY Times ; donc toute une partie des développements techniques s’est fait sans trop se poser la question du responsive, pas encore totalement à la mode à l’époque ;

– faire ça bien, ça coûte bonbon. Donc le NY Times n’en fait presque plus ; et les autres ont repris les usages les plus simples et plus « automatisables ». Genre des effets de parallaxe et les images en fond fixed, souvent pas bien jolis, et qui donnent plus envie de vomir qu’autre chose. Les longforms du Monde, à un moment, c’était quasiment que ça.

– et on est toujours dans une logique de CMS tout-automatique et de réduction des coûts. Les « art directed articles », comme le nom l’indique, ça implique qu’il y a une direction artistique (donc une personne dont c’est le métier) pour chaque article. Et mon constat : il n’y a pas vraiment de gens prêts à payer pour ça.

– l’idéologie de l’édition sur le Web n’est plus de faire des pages Web super-belles avec de super-articles longs qui attireraient les gens, mais de partager sur les supports avec un maximum d’audience. Une grosse partie des médias, ces dernières années, s’est engouffré d’abord sur les formats courts (à une époque, on a même eu l’idée de découper les articles en plusieurs pages pour multiplier les paves vues…), puis les « pages » Facebook, puis que les formats « AMP » de Google ; certes ils en reviennent, mais c’est plus avec ce genre de tendances que tu vas avoir des développements du côté de la narration enrichie sur le Web…

– et dernier écueil : ça demande des graphistes avec des compétences techniques, et des informaticiens avec des compétences graphiques, et ça ce sont des animaux mythologiques dont l’existence est encore discutée par les archéologues du Web.

Autre exemple, ce que l’on avait fait il a quelques années avec @drbouvierleduc pour la région Limousin, des « expos virtuelles » dans le site Géoculture (toute la rubrique Focus) :
►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin

En gros 100% avec le Noizetier. Dans l’idée ça peut soit être un unique contenu SPIP avec des centaines de noisettes, soit comme on l’a fait là, une page qui agrège les noisettes de plusieurs Rubriques/Sous-rubriques ce qui permet de gérer le chapitrage plus simplement (cf le menu chapitre en haut).
Et c’est responsive :p

Pour moi le noizetier est une des manières les plus souples/complètes de faire ça. Vu que tu peux en inventer autant que tu veux, suivant ce qui a été décidé avec la direction artistique de permettre de faire.

Ça évite d’être lié à un contenu SPIP, et à seulement 2 ou 3 choix possibles, car sinon faudrait ajouter 12000 champs. On doit pouvoir reproduire les long forms de @arno assez facilement à priori.

Par ailleurs tu peux les utiliser aussi bien vraiment toutes seules (le contenu vient de champs de config des noisettes) ou en utilisant le « vrai » contenu éditorial du site (le contenu de telle noisette venant du contenu d’un article, d’un événement, etc).

Le plugin ne fait rien lui-même hein : tout dépend vraiment de ton « jeu de noisettes », càd ce que vous permettez de faire aux gens. C’est à peu près infini comme possibilités, vu que tu peux parfaitement avoir des noisettes « cartes », des noisettes « frise chrono », ou tout autre animation kikou un peu complexe, que tu intercales avec d’autres contenus plus simple, des textes, des images, etc.

#spip_blog

Merci pour vos retours forts inintéressants :)

Purement graphique et avec un travail de design sonore mais seulement dans une app
Phallaina, le roman graphique
▻https://youtu.be/GIqQIpmhJGQ

Ce plugin aussi : ▻https://git.spip.net/spip-contrib-extensions/storify.git

J’ajoute le seen de @thibnton car il y a une partie sur le storytelling et des exemples inintéressants :

Quels usages de l’audio pour les médias en ligne, notamment la presse écrite ? Une édition en partenariat avec Hyperradio, qui fête sa 200ème édition. podcast

▻https://seenthis.net/messages/921958

https://mcusercontent.com/42d1f60e448215132ba30db60/images/ab2c0c55-a7a2-4c43-81c2-5f227c502604.png

2 ajouts :
– pour l’intro et le zoom sur le carte : ►https://www.nytimes.com/fr/2022/05/20/world/haiti-france-dette-reparations.html
– pour la navigation dans la carte : ►https://uploads.knightlab.com/storymapjs/27497e92f064ef5616553b1c97c91106/walking-tour/index.html

haha je me suis dit la même chose hier sur l’article Haïti !

Et en lisant cette même série (5 articles), je me suis aussi redit que chaque module pourrait/devrait parfaitement pouvoir faire l’objet d’une « noisette » configurable du plugin Noizetier, pour construire des pages riches du même genre

(@astier si un jour tu remets en ligne une archive de geoculture… vu que là le lien que je donnais l’année précédente est mort maintenant, pour montrer le principe d’expo virtuelle en noizetier)

@rastapopoulos Malheureusement non, ce n’est pas au programme :-/ J’ai seulement produit un petit site présentant simplement quelques unes des notices que l’on avait produite au moment de la refonte, histoire d’en garder une trace, un petit quelque chose...

Par contre, on peut retrouver de belles traces grâce à la Wayback Machine : ►https://web.archive.org/web/20190904140136/https://geoculture.fr/faire-bonne-chere-en-limousin

1 ajout :
►https://www.women-in-type.com
Pour les animations sur les images dans le déroulé de la page (entête et diaporama) et le filtrage des listes (menu en « sticky ») qui identifie bien les parties

#jquery #javascript #intégration #web #DOM

Alternatives à l’utilisation de jQuery pour à peu près toutes les fonctionnalités de cette lib :
– Sélecteurs
– Style & CSS
– Manipulation du DOM
– Ajax
– Évènements
– Utilitaires
– Animations

Voir aussi : ►http://youmightnotneedjquery.com (▻https://seenthis.net/messages/226538)

#jQuery #alternative #framework_javascript

>> utilisez le filtre |url_nettoyer{200} <<

Rrooh punaize ! Je me souviens d’une nuit sur IRC où l’on cherchait le meilleur moyen de créer ce genre de filtre de nettoyage avec R3alET ^^

Merci pour ce code.

J’avais utilisé la boucle URL pour ça :

<code class="spip">
<BOUCLE_scroll(RUBRIQUES){id_parent}{par num titre, titre}>
<BOUCLE_url(https://seenthis.net/URLS){type=rubrique}{id_objet=#ID_RUBRIQUE}>
[(#SET{url,#GET{url}|array_merge{#ARRAY{rub#ID_RUBRIQUE,#URL}}})]
</BOUCLE_url>
<li class="item"><a href="/tag/jquery#[(#GET{url}|table_valeur{rub#ID_RUBRIQUE})]">#TITRE< ;/a></li>
</BOUCLE_scroll>
</code>

BOUCLE_scroll : on construit le menu à partir des sous rubriques.
BOUCLE_url : pour chaque entrée du menu, on rentre son url (sans les + et le .html) dans un tableau (rub1 > url_de_la_rubrique_1... etc)

Et pour générer l’ancre dans la page (dans une boucle RUBRIQUES) :

<code class="spip">id="[(#GET{url}|table_valeur{rub#ID_RUBRIQUE})]"</code>

@seenthis : les balises ne <code class="xxx"> ne fonctionnent pas dans les posts ?

Et la BOUCLE_url fait un truc chelou : l’adresse du site apparait en lieu et place de URL.
Voir la boucle originale : ▻http://spip.pastebin.fr/55209

@jeanmarie le code que tu viens proposer ici est vraiment alambiqué !
Il est tout de même plus simple de faire comme je l’indique

[(#TITRE|url_nettoyer{200})]

C’est surtout que je ne connaissais pas |url_nettoyer :)

Par contre, quid de la permanence des ancres si le titre change ?
C’était la raison pour laquelle j’étais parti sur URL...

Je ne comprends pas bien ton message, l’ancre et son lien sont toujours dépendants

<div id="[(#TITRE|url_nettoyer{200})]" />
<a href="[#(#TITRE|url_nettoyer{200})]">aller à l’ancre</a>

Je pense aux liens envoyés par mail ou depuis d’autres sites par ex. Si on change le titre d’un article, l’ancre change et le lien n’amène plus à l’ancre.
Bon, c’est pas bien méchant vu qu’il amène toujours sur la bonne page.

Très très bien.
On peut aussi n’en utiliser que des morceaux selon ses besoins, sans charger tout le core.
Permet aussi de faire de la #programmation_fonctionnelle avec map, filter etc.

Repéré par placido qui l’a partagé sur IRC :)

cc @daphne @marty @albertocampiphoto

#développement #web #édition

#carousel #snap #HTML #CSS #intégration #web #jquery #javascript #polyfill

C’est fini !

Votre module a été envoyé dans la file des revues préliminaires.

You’ll receive an email once it has been reviewed by an editor and signed. Once it has been signed you will be able to install it:

►https://addons.mozilla.org/fr/firefox/addon/seenthis-search

En attendant qu’elle soit validée par Firefox : about:config puis `` xpinstall.signatures.required à false ``

Pour paraphraser ce que fait l’extension : une fois installée, et que vous êtes connectés à seenthis ça va charger tous vos posts ( ceux que vous avez écrit et ceux que vous avez étoilés) ... et ensuite cela permet de rechercher RAPIDEMENT un truc (recherche dans le texte du seen ET dans les mots-clés )

TOUS mes posts???

@monolecte oui (normalement) :)

Bon mince je l’ai lancé, ça charge… Ça va charger plusieurs mégas, plusieurs dizaines de mégas, plusieurs centaines de mégas ? Je ne me rends pas trop compte de la taille. Je vais devoir laisser tourner…

Et si on éteint pendant que ça tourne, ça fait quoi ? Ça va recharger depuis zéro ensuite ? Et ça met à jour en rechargeant tout régulièrement ou juste en ajoutant les trucs nouveaux ? Et si des posts ont été modifiés ? Et ça charge les textes des commentaires aussi ou bien ça ne recherche que dans le texte du seen principal uniquement ? (parce que sur le site, le moteur cherche partout et notamment quand des tags ont été ajouté par des coms, ce qui arrive très très souvent)

error : 500 : Internal Server Error : ►http://seenthis.net/?page=xml_export

@rastapopoulos

Et si on éteint pendant que ça tourne, ça fait quoi ?

Aucune idée :p

Ça va recharger depuis zéro ensuite ?

Oui je pense, et ça reprendra l’update de la base locale là on ça en était.

Et ça met à jour en rechargeant tout régulièrement ou juste en ajoutant les trucs nouveaux ? Et si des posts ont été modifiés ?

Ça recharge tout le xml à la demande, en cliquant sur sync, et ça maj la base locale. C’est améliorable, une mise à jour automatique pourrait être intéressante.

Et ça charge les textes des commentaires aussi ou bien ça ne recherche que dans le texte du seen principal uniquement ? (parce que sur le site, le moteur cherche partout et notamment quand des tags ont été ajouté par des coms, ce qui arrive très très souvent)

Ça charge que le premier message de chaque thread du dump xml, donc uniquement le « seen principal ».

bravo @b_b ! #seenthis_c_est_bon_mangez_en

Comme dit dans mon message d’après, moi j’ai toujours erreur 500. Essayé 4 fois hier soir et 5 fois ce matin, toujours la même erreur. Je dois avoir trop de choses dans le même énorme flux et il arrive pas à le générer… :(

Pour info, la version 0.0.4 ne nécessite plus de redémarrage pour l’installation. Avec de la chance elle devrait être enfin validée (et signée) par l’équipe des personnes en charge de la relecture sur AMO, donc installable directement sans avoir à jouer avec about:config.

Prochaine étape, basculer le code vers la nouvelle norme #webextensions ►https://developer.mozilla.org/en-US/Add-ons/WebExtensions qui permettrait de faire fonctionner le module sur d’autres navigateurs (chromium et opera par exemple).

\o/

Your add-on, seenthis search, 0.0.4, has been preliminarily reviewed and is now available for download in our gallery at ►https://addons.mozilla.org/addon/seenthis-search

et donc ça fait quoi ?
“Finish !! loaded 0 bookmarks
OK”

EDIT : ah j’étais point connecté…
là ça synchronise… et pomme- : lance l’interface

EDIT2 : tout comme @rastapopoulos j’ai une erreur

error : 500 : Internal Server Error :
seenthis.net/ ?page=xml_export

@fil le serveur doit pas être capable de générer votre dump...

Si vous tentez d’accéder à l’url depuis votre nav, vous avez la même erreur ?

Quand on regarde plugins/seenthis_squelettes/noisettes/afficher_me_xml.html on voit que pour chaque message on fait 4 appels SQL. Pas étonnant que pour une collection importante de messages ce soit pas gérable.
L’export est à réécrire ou repenser entièrement.
▻https://github.com/seenthis/seenthis_squelettes/issues/160

à noter, l’extension envoie la requête en POST

Et hop, la version 0.1.0 est disponible, les nouveautés sont les suivantes :

– ré-écriture complète du code, le module utilise la nouvelle norme #webextension (et devrait donc fonctionner sour chromium et opera) cf ▻https://github.com/seenthis/firefox-seenthis-search/commit/0304b325f02659bd13b7eaead14d6aaf10611e06
– le module utilise maintenant les librairies #listjs (cf ▻https://seenthis.net/messages/472006) #localForage et #jQuery
– plus de requête en POST pour @fil ;)

Quelques remarques :

– on perd la possibilité d’utiliser les opérateurs AND, OR et NOT dans la recherche, mais ça devrait pouvoir être rétabli si ça semble nécessaire.
– le raccourci clavier pour accéder à la page du module est maintenant « CTRL+SHIFT+B » (pas moyen d’utiliser l’ancien dans une webextension).
– j’ai hésité à utiliser ▻http://dexie.org et ►http://lunrjs.com mais je garde l’idée dans un coin, cf mes prises de notes sur le wiki du projet ▻https://github.com/seenthis/firefox-seenthis-search/wiki
– j’aurais plein de choses à dire sur les webextensions, mais je crois que ça fera l’objet d’un billet spécifique :p

Ça peut marcher avec les très grosses collections ou pas ?

@monolecte pas de limitation du côté du module, par contre, comme l’ont déjà remarqué plusieurs personnes dans ce fil, l’export xml qui alimente le module semble demander trop de travail au serveur pour les gens qui postent/favorisent beaucoup. À tester donc :)

@rastapopoulos est-ce que l’export fonctionne mieux pour toi avec cette url ?

▻https://seenthis.net/spip.php?page=xml_export&reponses=non

Je viens d’ajouter cette option à seenthis cf ▻https://github.com/seenthis/seenthis_squelettes/pull/170 et l’extension firefox seenthis search l’utilisera à partir de la version 0.2.1 qui sera bientôt disponible sur ►https://addons.mozilla.org/fr/firefox/addon/seenthis-search

@b_b ça a demandé 2 à 3min complètes et ça a fait rendre le navigateur tout gris, mais ça a fini par générer et afficher le XML. Bon après ça ramait à mort et j’ai eu beaucoup de mal à fermer l’onglet, mais ça l’a bien généré.

@rastapopoulos ferpecto tu devrais pouvoir tester la prochaine version du module firefox.

Your add-on seenthis search has been updated on addons.mozilla.org (AMO). Version 0.3.2 is now available for download in our gallery at ►https://addons.mozilla.org/addon/seenthis-search .

Nouvelle version qui met à jour les libs utilisées et change de raccourci clavier pour ouvrir la page des seens (une fois de plus car Firefox a décidé de squatter CTRL + SHIFT + S).

#urban_matter #edm_2016

#React #jQuery #javascript #développement #web #DOM

COOL.

Mais ça ne gère pas les sous-menus par contre. Ça sera pas mal d’arriver à coupler ça à un autre plugin (ou CSS) qui gérerait les sous-menus de manière accessibles (avec nav par clavier aussi) et responsive.

#intégration #web #HTML #CSS #javascript cc @fil

Ah bah ya même un ticket d’amélioration pour ça déjà :
▻https://github.com/VPenkov/okayNav/issues/4

pas encore adopté : si vous trouvez mieux faites signe

par contre dans les options on peut pas désactiver complètement le hover, qui est une mauvaise pratique : rien ne doit s’ouvrir sans clics explicites, car bouger la souris c’est pas un choix

bon après il sait utiliser hoverIntent, un autre plugin jquery, qui est moins pire, parce que ça attend avant de lancer l’action, histoire d’être sûr que la personne a vraiment mis la souris à tel endroit sans bouger exprès

mais ça serait quand même mieux de pouvoir désactiver complètement, et qu’à la souris ça soit exactement comme en tactile : cliquer sur la flèche explicitement

No Longer Maintained

(que faire ?)

Ah tiens en voilà un super
▻http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu

Non,il est uniquement en CSS apparemment, et donc entre autre, il ne fonctionne pas au clavier. Que ce soit avec tabulation, ou avec Entrée+flèches, ya aucun moyen d’atteindre les sous-menus en clavier.

Ah peut-être qu’il y en a au moins un correct là @fil :
▻http://seenthis.net/messages/395433