VodkaBears/Vide
▻https://github.com/VodkaBears/Vide
VodkaBears/Vide
▻https://github.com/VodkaBears/Vide
Nouveau #plugin #SPIP : medias_responsive
▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/medias_responsive#squelettes/modeles
Ça complète mon plugin image_responsive. J’avais en effet deux problèmes à résoudre :
– Mon précédent plugin permet de gérer les images responsive, mais les raccourcis <doc>
et <img>
de SPIP ne les exploitaient pas.
– Les raccourcis sont truffés de dimensions « en dur », du coup non seulement les images ne sont pas « responsives », mais tout ça a tendance à péter les maquettes responsive.
Ce nouveau raccourci introduit donc plusieurs éléments (c’est work in progress, hein) :
– ces raccourcis (appels inchangés) utilisent donc |image_responsive
, et si je ne me trompe pas, en utilisant le lazy_load de mon plugin (si c’est pas le cas, faudra que je corrige) ;
– les images sont insérées en utilisant les tags <figure>
et <figcaption>
du HTML5 ;
– il y a un javascript qui calcule la largeur de la colonne contenant les éléments, qui a pour intérêt principal de sucrer les float right
et left
quand la largeur de la colonne de texte devient trop faible par rapport au bloc image. Donc sur très petit écran, on n’a plus cet effet de float désastreux avec le texte qui n’a plus que 20 pixels pour « habiller » une image ; là l’image est centrée et basta.
J’aurais bien aimé me débarrasser complètement des dimensions insérées « en dur » dans le code, mais comme les images à l’intérieur sont elles-même en responsive, donc de dimensions a priori inconnues, si je ne force pas les valeurs je me retrouve avec des images de 0 pixels de large.
Et encore merci aux copains qui m’ont expliqué la vie la semaine dernière :
▻http://seenthis.net/messages/273350
Super, #spip_blog
Par contre, ça commence à devenir le bazar entre
– image_responsive
– medias_responsive
– adaptive_images (►http://contrib.spip.net/Adaptive-Images-4458)
– modeles_media (▻http://contrib.spip.net/Plugin-Modeles-media)
– medoc (►http://contrib.spip.net/Modele-doc-unifie)
Un jour on arrivera à faire des trucs compatibles. :)
Et attention, il me semble que c’est #GET{fichier}|image_responsive{0}
et non pas #FICHIER|image_responsive{0}
afin qu’il prenne bien la vignette lorsque ce n’est pas une image.
Car là si tu fais <doc1234>
avec un PDF, ça va pas trop marcher non ?
Sinon, une remarque sur le figcaption
. Le but n’est pas seulement d’avoir une syntaxe HTML5 : en réalité mon premier besoin était de réunir les éléments titre, descriptif et crédits dans un même conteneur, ici de classe .spip_doc_intitules
(initialement ce n’était même pas un figcaption…). Avec le code de la dist
, il est impossible de faire des maquettes marrantes/modernes en utilisant des positionnements absolus (nécessaires pour faire des trucs modernes avec, par exemple, les descriptifs des images en dehors de la colonne de texte), parce qu’il n’y a pas de conteneur englobant.
Avec le code de la dist, il est impossible de faire des maquettes marrantes/modernes en utilisant des positionnements absolus (nécessaires pour faire des trucs modernes avec, par exemple, les descriptifs des images en dehors de la colonne de texte), parce qu’il n’y a pas de conteneur englobant.
Yé soui tout à fait d’acuerdo.
Il y a tellement de choses à améliorer dans la gestion des modèles d’images de toute façon… Mais c’est pas facile en essayant de ne pas casser les anciens trucs. ’Fin bon, il y a déjà moult discussions à ce sujet sur [dev] et [zone].
Nouveau #plugin pour #SPIP_3 : Raccourci ‹dame› blanche
▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/dame_blanche
Il s’agit d’une phrase du texte que l’on fait ressortir dans la maquette, histoire de rythmer la page et de faire ressortir un point accrocheur. La plupart des gens appellent ça l’exergue, mais c’est erroné : ça s’appelle une dame blanche (l’exergue, c’est une citation qui n’est pas tirée du texte lui-même, et qu’on met en début d’article ou de livre.)
Ici, on l’utilise avec le raccourci <dame>
:
<dame>La plupart des gens appellent ça l'exergue</dame>
Il y a déjà un plugin « exergue », mais :
– le terme exergue est fautif, et j’ai affaire à une utilisatrice qui n’acceptera jamais qu’on confonde les deux termes… ah mais !
– je voulais voir comment utiliser #textwheel dans un plugin ; je ne sais pas si on peut faire encore plus simple, mais c’est déjà vachement agréable (tu peux aller jeter un coup d’œil, vraiment c’est pratique) ;
– le style est dans un fichier, fonctionne dans l’espace privé et sur le site public, et correspond à mes habitudes ;
– je préfère utiliser <aside>
plutôt que <blockquote>
, parce que pour le coup ce bout de texte est en dehors de l’article. Donc : tu as intérêt à faire ton site en HTML5 si tu veux utiliser ce plugin.
Le fautif étant @booz, n’hésitons pas à le dénoncer !
(Et c’est là que je me rends compte que mon exemplaire du Code typographique de l’Imprimerie nationale – dans une édition désormais vintage – a disparu. Arg.)
Ouais parce que j’avais jamais entendu ce terme et ’ya pas grand chose sur le web… j’aurais bien lu un truc détaillé sur l’origine du nom ou quoi.
Tyto alba — l’Effraie des clochers, aussi appelée Dame blanche, pourrait faire une chouette idée de logo
(d’autant que certains écrivent typo alba)
Prenez garde !
La Dame Blanche vous regarde,
La Dame Blanche vous entend.
Pour moi, la dame blanche, c’est le fantôme qui prévient les conducteurs sur les routes de Maurienne la nuit...
Hello,
Super cette trouvaille du terme dame blanche.
Pour le plugin bien joué pour textwheel. Mais si je lis bien le code tu fais une extraction de la citation, qui est affichée une fois donc, hors du texte.
Dans le plugin exergue, le texte cité est affiché deux fois, une fois dans le texte de base, et une autre fois recopié en js dans un bloc stylé joli. La « dame blanche » est donc un ajout.
On peut également placer plusieurs dames blanches / exergues dans un même texte, à n’importe quel endroit.
▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/exergue
Pas facile de trouver des ressources en ligne qui parlent de cette dame blanche, effectivement.
En voici une : ▻http://fr.comp.graphisme.pao.narkive.com/5yXXidpd/comment-s-appelle#post18
@ari si j’ai bien compris la discussion que j’ai pointé (qui date d’il y a presque 10 ans tout de même), ce serait peut-être plus utilisé au Québec…
Bonjour,
Merci pour ce plugin.
Je m’apprête à l’utiliser sur un site et j’aimerais y rajouter :
– un bouton dans la barre typo
– une possibilité de passer un alignement (left|center|right)
Qu’en dis-tu @arno ?
D’autre part, le choix de <aside> pose un problème d’accessibilité : en effet, il faut que chaque bloc HTML5 soit immédiatement suivi d’un titre, ce qui n’est pas le cas ici.
Enfin, le texte que l’on écrit dans une dame blanche me semble faire partie intégrante de l’article que l’on écrit. Pourquoi le placer en <aside> et pas en <p> tout simplement ?
Puisque ce seen est ressuscité, je précise qu’après avoir utilisé le plugin exergue un temps, on préfère désormais une alternative simple et efficace qui s’efface facilement à l’export : un modèle exergue qui s’écrit donc <exergue|texte=le texte>
et produit toujours un <blockquote class="exergue">
SPIP a déjà une syntaxe pour les <blockquote>
qui est <quote>
(on aurait pu garder le même mot mais bref…), et on pourrait imaginer directement pouvoir lui passer une classe, puisque ça existe déjà. Du genre <quote exergue>Mon texte</quote>
.
On pourrait l’imaginer mais pour l’instant on utilise le <quote>
pour une chose, et des <blockquote class=
pour d’autres trucs. Mais de fait, pouvoir mettre des classes aux raccourcis serait chouette.
@baroug : est-ce que tu pourrais partager ton modèle exergue dans l’idée d’en faire un plugin avec le yaml qui va bien pour insérer_modèle ?
quel intérêt ? autant le… mettre dans /modeles ? Je comprend pas l’intérêt d’un plugin qui fait une chose aussi simple. Mais oui je peux le partager c’est extrêmement simple :
[(#REM) Affiche un exergue ]
[<blockquote class="exergue">
(#ENV{texte}|propre|PtoBR)
</blockquote>]
…et un peu de css of course…
Chose promise... Joyeux Noël : ▻http://zone.spip.org/trac/spip-zone/changeset/101216
kent1D/spip_hal · GitHub
▻https://github.com/kent1D/spip_hal
plugin #spip de connexion à #hal (►http://hal.archives-ouvertes.fr)
Modèle doc unifié
Patch unifiant le comportement et la syntaxe d’insertion des documents, pour soigner l’inconstance d’affichage dont souffrent les documents de SPIP. Désormais, c’est vous qui choisissez !
TagSieve : : Add-ons for #firefox
▻https://addons.mozilla.org/en-us/firefox/addon/tagsieve
Firefox lets you tag your #bookmarks, but it doesn’t give you a great way to browse your bookmarks by their #tags. TagSieve tries to.
Le repo (dont les inscriptions sont modérées, grml patientons...) est par ici :
▻http://dev.grue.in/projects/tagsieve
Et un fork qui propose pas mal de bons patchs est sur github :
Geolocater : : Modules pour #firefox
▻https://addons.mozilla.org/fr/firefox/addon/geolocater
Geolocater est un #module complémentaire Firefox qui donne la possibilité de définir plus d’une #géolocalisation et de passer de l’une à l’autre facilement.
Nous venons de lancer le nouveau site de l’Adresse, Musée de la Poste réalisé avec Mosquito :
▻http://www.ladressemuseedelaposte.fr
C’est comme toujours du #SPIP, #HTML5, #responsive.
– Le site utilise les nouvelles fonctionnalités que j’ai développées pour le #plugin image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
En particulier la définition de valeurs de largeur prédéfinies, pour éviter de fabriquer quelques centaines d’images. Le site a, à plusieurs endroits, des images qui occupent toute la largeur de l’écran ; donc il faut éviter de fabriquer avec le plugin autant de versions de l’image que de largeurs de la fenêtre d’affichage.
J’avais documenté ça là :
▻http://seenthis.net/messages/223187
– L’une des originalités du site est la possibilité de présenter le contenu d’une rubrique sous forme dite de « longform » ou de parallaxe. C’est-à-dire une de ces longues pages regroupant toute l’information sur page unique, avec un long scroll, tout en essayant graphiquement de rendre la consultation d’une longue page aussi attractive que plusieurs pages normales. Par exemple, les « 10 objects phares du musée » :
▻http://www.ladressemuseedelaposte.fr/Les-10-objets-phares-16
Les grandes images qui rythment la page, avec l’effet de parallaxe, ce sont les logos des articles de cette rubrique.
Les images de la page se chargent au fur et à mesure du scroll, simplement en utilisant l’option « lazy load » du plugin image_responsive. C’est bien pratique…
Pour la gestion du parallaxe, j’utilise le plugin jquery skrollr. J’avais indiqué il y a quelques temps comment rendre skrollr compatible avec le lazy load de image_responsive :
▻http://seenthis.net/messages/204550
– Enfin, comme c’est du SPIP, je peux intégrer facilement dans les pages longform les éléments que j’inclus habituellement dans un tel site. Voir par exemple ici :
▻http://www.ladressemuseedelaposte.fr/La-tete-dans-les-nuages
Il y a donc une colonne principe « à gauche » et une colonne d’informations spécifiques « à droite », on peut intégrer un calendrier, et évidemment un portfolio.
– Sinon, on a fait une présentation plutôt spectaculaire des vidéos embeddées :
▻http://www.ladressemuseedelaposte.fr/Pilatre-du-Rozier
et aussi une grande carte d’accès bien maousse :
▻http://www.ladressemuseedelaposte.fr/Travaux-Acces-Tarifs
– Enfin, j’ai récupéré le contenu d’un Wordpress préexistant pour réaliser la rubrique « Le Blog » (qui se gère désormais dans SPIP) :
▻http://www.ladressemuseedelaposte.fr/Le-Blog-48
J’avais fait un squelette dans SPIP permettant de récupérer le contenu d’un site Wordpress, livré ici :
▻http://seenthis.net/messages/213240
Sympa, tu devrais peut-être désactiver le zoom à la molette sur la page de la carte car comme celle-ci prend toute la largeur, elle « capture » le scroll quand on veut faire défiler la page.
Super,
par contre chez moi à partir de 1001px, je ne vois pas le menu principal en entier, il est toujours coupé. Et pourtant je suis en 1600 de large (la police est très grosse).
À 1001 ça s’arrête à « Programme », et en 1600 ça atteint « Bouti ». :)
Chez moi aussi le menu boutique n’est visible qu’en partie sur la page d’accueil même en écran large. Autrement chapeau, c’est très réussi :-)
Merci pour les explications sur les plugins SPIP utilisés.
(FF 27.0.1 sous Linux)
Ah oui, c’est corrigé. C’était à cause du changement de nom de domaine, alors que les CSS étaient encore calculées depuis l’ancienne URL. Et Firefox n’accepte pas de charger les webfonts depuis un autre domaine.
Drowning in Tools in the Web Development Industry
▻http://www.sitepoint.com/drowning-in-tools-web-development-industry
Since late July, I’ve curated a weekly newsletter focused on tools called Web Tools Weekly. Throughout each week, when going through my feeds (yes, RSS is alive and well) and doing various forms of other research, I’m constantly bookmarking new apps, scripts, #plugins, libraries, #CSS frameworks, productivity tools, testing tools, and more.
In fact, I could probably release that newsletter daily and I’d still have enough content. As of this writing, I have a categorized list of approximately 500 different apps, resources, scripts, libraries, plugins, etc. that I haven’t yet included in any issue. And let’s not forget about the 500+ tools that have made the cut in the first 30+ issues.
Tout à fait d’actualité en ce qui me concerne car je dois faire (humblement) un site et entre responsive, ajax, javascript, css, l’offre est pléthorique ... Foundation ou Bootstrap ? Et backbones, j’en ai besoin ? (a priori, non).
Bref, ça fait une semaine que j’essaye de comprendre dans toutes ces propositions lesquelles vont m’aider et lesquelles vont me noyer.
Dans les commentaires :
This was very helpful advice and encourages me to continue striving to make sure my basic HTML, CSS, and JavaScript skills are solid instead of chasing every new thing just because it’s new.
Ce doit être ce dont j’ai besoin ;-)
MixItUp
▻https://mixitup.kunkalabs.com
MixItUp is a #jQuery #plugin providing animated filtering and sorting.
Great for managing any categorised or ordered content like portfolios, galleries and blogs, MixItUp can also function as a powerful tool for engaging application UI and data-visualisation.
Metalsmith
▻http://www.metalsmith.io
All of the logic in Metalsmith is handled by #plugins. You simply chain them together. (…) Each plugin is invoked with the contents of the source directory, with every file parsed for optional #YAML front-matter
@fil
Bientôt il y aura autant de générateur de sites statiques que de développeur⋅euse⋅s web. :)
Mais sinon ça a l’air cool quand tout est développé en plugins dès le départ comme ça.
Bientôt il y aura autant de générateur de sites statiques que de développeur⋅euse⋅s web. :)
C’est comme les outils de build basés sur node.js. ^^
Sinon, c’est vrai qu’il a l’air sympa à première vue, j’ai pas eu le temps de bcp regarder.
Hey, j’ai mis les mains dedans. C’est plutôt très sympa.
On retrouve le même principe de fonctionnement que #wintersmith et une syntaxe proche de #gulp.
A la différence de #grunt / #gulp, ce n’est pas un moteur de tâches qui peut servir à faire de la génération de sites statiques, mais l’inverse.
On a donc plein de truc très utiles pour faire des sites web (gestion de permalinks, des titres, des collections de posts...), qui sont pénibles à refaire en grunt/gulp.
Et par rapport à wintersmith, c’est plus clair, plus facilement hackable (et sans #coffeescript).
J’ai même réussi à faire implémenter une fonctionnalité de livereload en 1 soirée (j’espère que l’auteur metalsmith-watch prendra en compte ma demande d’évo ^^).
Bref, je me demande si #wintersmith n’a pas du souci à se faire, chez moi.
Webshims lib - The capability-based #polyfill-loading JS library
▻http://afarkas.github.io/webshim/demos/index.html
“Webshims Lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable #HTML5 features, so that developers can write modern, interoperable and robust code in all browsers. It is built on top of #jQuery and #Modernizr.” Tags: #JavaScript polyfill HTML5 #plugin jQuery Modernizr #IE8
Je suis en train de le mettre progressivement en prod sur un gros site (essentiellement pour la validation des formulaires). Parmi les solutions de ce genre, c’est celle qui m’a paru la plus propre et la plus « future-proof » (et avec un support polyfillé de :user-error !). Par contre la doc est assez difficile à digérer (mais l’auteur travaille sur ce point).
Je suis preneur de retours, j’en ferais également, s’il y a des gens intéressés ou si vous avez des questions précises.
croppic is an #image cropping #jQuery #plugin
▻http://www.croppic.net
“croppic is an image cropping jquery plugin that will satisfy your needs and much more” Tags: #Art_Direction Responsive Web Design (RWD) #crop #librairie plugin jQuery #JavaScript image #coupe
Clairement, notamment pour définir la vue rapprochée dans un contexte responsive de petite taille, qui passe pour l’instant par un upload supplémentaire, dans le plugin de Cédric
Mmmh, non il me semble que pour ce point là ce n’est pas ça. Le but à terme c’est plutôt de définir le « point d’intérêt central » de l’image. Et du coup, de faire des |image_recadre
et des |adaptive_images
qui contiennent toujours le point d’intérêt. Sans avoir besoin de définir plusieurs images différentes, que ce soit par upload ou par modif en ligne.
La technique du #focal_point c’est ce que j’avais suggéré à Cédric comme approche idéale, le #crop étant un pis aller déjà pas mal… ;-)
La prise en charge du focal point est faite dans Koken, qui est open source et en PHP… #jdcjdr
Amélioration de mon #plugin #SPIP image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Il s’agit ici de limiter l’effet de « redraw » au chargement de la page. Le plugin, en effet, fait que la page se charge et s’affiche une première fois, avant de charger les images. Et pendant ce temps, la page est calculée et affichée en supposant que les images sont carrées. Du coup, après ce premier affichage de la page sans les images responsives, on se retrouve avec un « redraw » (la page est redessinée) durant lequel on « voit » nettement qu’il se passe quelque chose, puisque les éléments de texte (tout ce qui est hors images responsive, en fait) se déplacent. Le redessin de la page est donc très visible. Par ailleurs, dans le cas où il y a une vignette de prévisualisation avant le chargement de l’image complète, du fait des différences d’arrondi entre les trailles d’images, il n’est pas rare d’avoir alors un petit effet de bougé sur… 1 pixel.
De plus, cet effet de redraw visible se produit même quand on revient sur la page (dont l’ensemble est déjà en cache), puisque le principe même du plugin est qu’on redessinne la page forcément après l’avoir dessinée une première fois.
Dans le cas où l’on avait pas de vignette de prévisualisation (on charge le carré « rien.gif »), le javascript du plugin limitait les dégâts en « forçant » les dimensions des images contenant rien.gif, mais on avait quand même un effet de « bougé » après le premier affichage.
Pour moi, c’était le principal défaut de cette façon de réaliser des images responsives.
L’amélioration du jour s’applique de manière transparente pour le webmestre (il suffit de faire la mise à jour du plugin et de recalculer les pages - attention, recalculer aussi les CSS). Pour les images_responsive classiques (pas les nouvelles, verticales, que j’ai introduites dans la précédente mise à jour), la balise <img> est désormais intégrée à l’intérieur d’un <span>. L’image, elle, passe alors en position absolue à l’intérieur du spam, qui définit les dimensions de l’image.
Et comme on fait pour qu’un <span> adopte les proportions de l’image tout en restant responsive ? Avec la technique tirée de « Fluid Width Video » :
►http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Le span a une largeur de 100%, une hauteur de 0. Sa hauteur est définie précisément par un padding-bottom, qui est la proportion (par exemple 50% pour une image qui serait deux fois plus large que haute).
De cette façon, on a bien les dimensions de l’emplacement de l’image qui sont connues, dès le chargement de la page, par les CSS et le HTML, sans attendre le chargement des images et/ou du Javascript.
Il n’y a plus d’effet visible de bougé lors du redraw, puisque tout est déjà correctement positionné dans la page avant même le démarrage du javascript de chargement des images. Ce qui est épatant, c’est que la différence est également sensible lorsqu’on revient sur la page déjà en cache. On a désormais un effet de « surgissement » des images sans redessiner visiblement la page.
Un peu comme si on avait définit dans le code HTML les dimensions (width et height) des images, comme c’est préconisé, mais en restant en responsive.
#leaflet/Leaflet.heat
▻https://github.com/Leaflet/Leaflet.heat
A tiny, simple and fast Leaflet #heatmap #plugin. Uses simpleheat under the hood, additionally clustering points into a grid for performance.
#map
Et hop, un exemple d’utilisation :
▻http://tiles.kupaia.fr/article25.html
Basé sur cette source de données : ▻https://www.data.gouv.fr/fr/dataset/lieux-de-tournage-de-films-long-metrage-ods
Encore du nouveau sur mon #plugin #SPIP image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Cette fois, il s’agit de pouvoir calculer la taille de l’image en fonction de la hauteur, et non plus de la largeur, de la boîte qu’elle occupe. (Et il y avait un bug dans la version précédente, qui faisait qu’il n’y avait jamais d’image de prévisualisation.)
Pour cela, introduction d’une troisième variable :
[(#LOGO_ARTICLE|image_responsive{0,0,1})]
Je pense que c’est d’un usage très spécifique, parce que concevoir une interface (qui plus est responsive) en définissant les hauteurs de boîtes plutôt que les largeurs, c’est assez coton.
Au passage, il faut re-modifier le .htaccess.
Exemple minimal : on place les logos des articles les uns à côté des autres, et ils auront la même hauteur (celle de la boîte contenante : 120 pixels ; ou, automatiquement, 240 pixels en écran haute définition) :
<div style="height: 120px;">
<BOUCLE_articles(ARTICLES){par date}{inverse}{0,5}>
[(#LOGO_ARTICLE|image_responsive{0,0,1})]
</BOUCLE_articles>
</div>
Bonjour ARNO et un grand merci pour ce plugin.
Puisque le but ici est d’optimiser les images envoyées en fonction de la taille nécessaire, ne serait-il pas judicieux de passer en plus par le plugin smush pour réduire encorela taille de ces images ?
Pour l’instant |image_responsive|image_smush ne fonctionne pas je suppose que ce serait au javascript de permettre ce détour.
Qu’en penses-tu ?
Annotorious - Image Annotation for the Web
▻http://annotorious.github.io/index.html
Un « nouveau » script similaire à celui utilisé das le #plugin #Légendes pour #SPIP qui devrait permettre de gérer des légendes sous forme de polygones (le script de référence semble permettre de gérer des légendes sur les vidéos et l’audio ping @kent1).
Une nouveauté sur mon #plugin #SPIP image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
L’idée est de pouvoir désormais fixer arbitrairement quelles largeurs d’image on autorise.
Le principe initial d’image_responsive, c’est de charger l’image une fois qu’on a calculé la page, donc on connaît déjà la largeur réelle d’affichage de l’image. De cette façon, on charge exactement l’image à la taille à laquelle on l’affiche.
Du coup, il devient totalement inutile même de gérer la largeur réelle de l’image en amont. Ça fonctionnait bien dans mes maquettes précédentes, avec au final un nombre limité de tailles d’images différentes. En laissant faire le plugin, je fabrique certes beaucoup de tailles de la même image, mais pas de façon excessive.
Le hic, c’est lorsque j’affiche l’image carrément en pleine largeur de l’écran (habituellement, j’étais plutôt dans des largeurs d’affichage fixées). Là, je me retrouve avec la possibilité de calculer des centaines de versions d’une même image, en fonction de la taille de la fenêtre d’affichage.
Du coup, j’introduis la possibilité de fixer les tailles autorisées pour charger les images :
[(#LOGO_ARTICLE
|image_proportions{3,2}
|image_responsive{320/600/1024}
)]
Ici, je fabrique une image de proportions 3/2 (de largeur indéterminée dans ces proportions, je m’en fiche), puisque j’insère une vignette de prévisualisation de 320 (la première valeur). Le javascript qui charge l’image définitive, lui, ne chargera des images que de 320, 600 ou 1024 (en fait : plus les versions haute définition, donc potentiellement six versions de l’image). Exemple : si j’affiche l’image sur une largeur de 479 points, alors je charge l’image de largeur 600 (que je réduis donc à l’affichage).
On perd évidemment un peu de l’efficacité du plugin, puisqu’on charge une image un peu plus grande que celle qu’on affiche, mais cela évite d’avoir des centaines d’images différentes calculées dans certains cas.
Si on ne veut pas de vignette de prévisualisation mais les mêmes tailles autorisées au chargement a posteriori, la première valeur à indiquer est 0 :
|image_responsive{0/320/600/1024}
Je l’utilise sur la page d’accueil de ce site (#shameless_autopromo) :
▻http://festival-scenaristes.com
@fil A priori, la réponse est ici ▻http://fr.wikipedia.org/wiki/Synchronicit%C3%A9
Pour la séparation des valeurs, pourquoi as-tu choisi des / et pas des virgules comme on fait d’habitude ? (Si c’est par facilité de codage, je veux bien m’occuper de remettre les virgules ; si c’est pour conserver la possibilité d’ajouter une variable supplémentaire après ces valeurs, je n’y touche pas)
@fil : c’est parce qu’il y a déjà une variable qui suit (le chargement des images en lazyload est toujours là).
Avec ceci, tu limites à 3 tailles et les images ne sont chargées que si le scroll les affiche (un écran de marge, tout de même) :
|image_responsive{0/320/600/1024, 1}
Pour faire suite à ▻http://seenthis.net/messages/219734
Crayon de mots pour un article : un crayon pour un groupe de mots
▻http://marcimat.magraine.net/Crayon-de-mots-pour-un-article
HTML Slidy (1)
▻http://www.w3.org/Talks/Tools/Slidy2/#(1)
un javascript pour transformer une page HTML en diaporama/slideshow style PréAO dans la lignée du script S5 de E Meyer
Un plugin SPIP potentiel ?
#slideshow #javascript #préAO #s5 #slidy #diaporama #spip #plugin
Un petit #shameless_autopromo : je viens d’ouvrir les formulaires des inscriptions aux concours de la Fémis :
▻http://www.femis.fr/concours-general-25
C’est évidemment, comme le reste du site, du #SPIP #HTML5.
Tu vas me dire : ben c’est des formulaires… Oui, c’est des formulaires, donc le CVT de SPIP, et le #plugin #SAISIES que tu peux pas vivre sans si tu fais des formulaires.
Les choses rigolotes ici (parce que sinon, hein, « formulaires Web » et « rigolo », ça ne va pas ensemble dans la même phrase)…
– c’est un formulaire à onglets ; pour le coup, le passage en affichage à onglets et le passage d’un onglet à l’autre se fait directement en Javascript, et pas via le serveur (je l’ai fait une fois, il y a longtemps, avec déjà CVT, mais c’est super-relou à gérer ; en javascript, c’est tout de même beaucoup plus simple – normalement si pas javascript on se retrouve avec un formulaire sans onglets).
– l’aspect le plus sympa, c’est l’utilisation de Polyfiller.js (webshim) pour gérer les formulaires HTML5 directement du côté client :
▻http://afarkas.github.io/webshim/demos
Mais pas que : ici je valide chaque champ au fur et à mesure de la saisie, avec des codes couleur (vert c’est OK…). C’est pas bien compliqué à faire, mais je ne crois pas que ce soit un fonctionnement de base de webshims, et ça rend bien.
Ce qui ajoute un peu de complexité, évidemment, ce sont les onglets : je colorie la onglets également au fur et à mesure mais, surtout, au moment de la validation finale, je dois détecter le champ de la première erreur bloquante et activer l’onglet qui le contient.
Encore une fois, le code n’est pas compliqué (le javascript qui fait ça est directement dans la page HTML, alors tu peux aller regarder). La seule astuce, réellement, c’est de faire remonter le statut du champ (input, select en statut "error" ou "ok") dans une classe appliquée au <li> qui contient le truc.
– petites difficultés avec #SAISIES : je n’arrive pas à faire passer les valeurs max et min (pour les champs de type number), ça semble se perdre en route. Pour ceux-là, j’ai dû faire le HTML à la main. Et surtout, pas de "required" quand obligatoire=oui ; je corrige donc en javascript au chargement (j’ajoute « required » dans le <input> quand il est enfant de <li.obligatoire>).
À la fin de la saisie, on arrive sur une page qui fabrique un PDF récapitulatif, expédie un email, et (super-important) affiche un bouton de paiement en ligne vers la banque.
Alors du côté du paiement en ligne, un bug détecté ce matin : je balance le #NOM (enregistré dans la base de données) pour fabriquer le formulaire qui va vers la banque et – si si, c’est possible – le plugin « orthotypo » le corrige. Le cas qui a planté : ces gens qui saisissent leur nom en majuscules, du coup Orthotype ajoute un <span> pour signaler que c’est tout en majuscules. Évidemment, le système de la banque refuse de répondre quand il y a du HTML dans le champ « nom du client ». (Solution facile : une étoile et |textebrut)
@arno, il n’y a pas de saisie de type « number », donc je suppute que tu utilises la saisie « input » à laquelle tu passes le type « number » ? Chaque saisie a son HTML/squelette qui lui est propre et qui ne continent que les attributs qui lui sont dédiés. Or « input » ne gère que les attributs basiques, pas les ajouts des nouveaux types.
▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/saisies/saisies/input.html
Deux solutions :
– Soit tu ajoutes les trucs non prévus dans le paramètre « attributs », en chaîne de caractères complète (attributs=’truc="machin" bidule="chouette"’) qui va s’ajouter avant la fermeture de balise.
– Soit, plus propre sûrement, il faudrait ajouter (toi ?) une nouvelle saisie « saisies/number.html » qui gère les attributs propres à ce nouveau type. Peut-être en faisant une inclusion de la saisie « input » mais avec le paramètre « attributs » modifié en amont, un truc comme ça, pour ne pas doublonner du code (comme ça toute amélioration à « input » est prise en compte par les autres).
Pour le « required », il est présent dans « input » déjà. Il faut avoir HTML5 d’activé dans la configuration de SPIP.
[(#ENV{obligatoire}|et{#ENV{obligatoire} !={non}}|et{#HTML5}|oui) required="required"]
Pipelight, un multi-plugins Silverlight et Flash pour Linux
▻http://neosting.net/pipelight-linux
Vous savez sûrement que Silverlight et Flash sont des technologies propriétaires appartenant respectivement à Microsoft et Adobe, et que par conséquent, ces technologies vieillissantes ne sont pas compatibles avec Linux officiellement. À ce propos, Silverlight sera abandonné en 2021 (en tout cas dans sa version 5), mais l’implémentation des DRM dans l’HTML5 sera certainement effective […] #flash #linux #pipelight #plugins #silverlight
bbecquet/Leaflet.MagnifyingGlass
▻https://github.com/bbecquet/Leaflet.MagnifyingGlass
This #plugin allows you to add a “magnifying glass” effect to a #leaflet #map, able to display a portion of the map in a different zoom (and actually display different content).
La deuxième démo est la plus intéressante amha : ▻http://bbecquet.github.io/Leaflet.MagnifyingGlass/examples/example_multi.html
Adaptive #Images et #Responsive Web Design - Le blog Nursit
►http://blog.nursit.net/Adaptive-Images-et-Responsive-Web.html
Une solution prête à l’emploi pour résoudre le casse-tête des Adaptive Images, adaptée aux sites dynamiques (une de plus, oui)
Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, résolution et qualité des images utilisées dans le contenu éditorial d’une page web en fonction de l’utilisateur.