Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #w
  • #we
  • #web
RSS: #webdev

#webdev

  • #webdevelopment
0 | 25 | 50 | 75 | 100 | 125 | 150 | 175 | 200 | ... | 325
  • @jeanmarie
    jeanmarie @jeanmarie CC BY-NC-SA 25/11/2021
    2
    @arno
    2

    Le #no-code, nouveau sésame pour les non-initiés à la #programmation  ?

    Le mouvement no-code est devenu en trois ans une vraie alternative à la programmation. Des solutions comme #Bubble, #Webflow, #Airtable, #Glide permettent de créer un #site_web ou une #appli_mobile sans pour autant être un développeur confirmé.

    En gros,

    Cette nouvelle méthode va aider à décharger ces ingénieurs de l’écriture de codes à faible valeur ajoutée, une tâche qu’ils considèrent comme ingrate et qu’ils ont tendance à saboter.

    ▻https://usbeketrica.com/fr/article/le-no-code-nouveau-sesame-pour-les-non-inities-a-la-programmation

    donc ils créent des outils à « forte valeur » ajoutée pour que les utilisateurs et utilisatrices finales sabotent eux-même leur code, c’est ça ? Car j’ai du mal à croire que des applis #wysiwyg produisent un code aussi propre qu’un être humain qualifié. Sans parler de l’accompagnement.

    Bref, c’est encore une fois sur le marché lowcost que ça tire vers le bas...

    https://usbeketrica.com/uploads/media/1200x628/09/84429-code.jpg

    #développement #webdev (no-)#html #no_code

    jeanmarie @jeanmarie CC BY-NC-SA
    • @monolecte
      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 25/11/2021

      Le #wysiwyg en web, c’était Dreamweaver  : le pur cauchemar quand tu passais derrière. Le truc qui imbriquait les balises en mode infini sans jamais rien réécrire. Pas de commentaires, bien sûr. Du code de merde.

      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    • @biggrizzly
      BigGrizzly @biggrizzly CC BY-NC-SA 25/11/2021

      Et Ad0b€ InDesign ! ! ! Bon sang ! DreamWeaver, c’était presque W3C par rapport à InDesign !

      BigGrizzly @biggrizzly CC BY-NC-SA
    • @arno
      ARNO* @arno ART LIBRE 25/11/2021

      Toujours cette idée de nouveauté qu’elle est neuve et que c’est un nouveau sésame… C’est juste qu’on en a toujours bouffé sur le Web de ces promesses avec Dreamweaver, Director, Flash… depuis les années 90.

      Un aspect vraiment flippant de ces trucs, c’est qu’on continue de fabriquer des jeunes professionnels dont on a encouragé l’incompétence informatique, et qui vont en chier toute leur vie dans des boulots de merde où il n’y a pas d’argent à gagner.

      30 ans après, on continue à fabriquer des graphistes, designers, photographes… fiers d’avoir une maîtrise totalement superficielle de leurs outils informatiques. Des gens qui ensuite se lancent sur le marché en étant à la fois moins efficaces et moins « innovants » (y compris sur leur cœur de métier, c’est-à-dire les créations graphiques et visuelles) que leurs concurrents, et vont dépendre de prestataires informatiques qui vont la leur faire à l’envers systématiquement.

      L’impossibilité de défendre ton boulot, parce qu’il est toujours plus ou moins approximatif/amateur au moment du rendu, et les clients seront souvent insatisfaits, parce que la fin de la prestation est toujours bordélique (ça marche pas, ça marche pas bien, personne ne sait pourquoi parce que personne n’a la moindre compétence…). Donc végéter dans des petits boulots mal rémunérés et peu gratifiants.

      Et évidemment l’impossibilité de survivre quand le seul logiciel Wysiwyg que tu maîtrises disparaît (le massacre quand Flash a disparu, le massacre quand ton client peut s’acheter pour 5 dollars un template tout fait et que tu ne peux proposer rigoureusement aucune valeur ajoutée par rapport à ça…).

      Ça fait 30 ans que je vois passer des gens qui galèrent parce qu’on leur a fait miroiter qu’ils pourraient devenir des professionnels avec des outils Wysiwyg, et qu’une fois sur le marché professionnel, c’est une catastrophe et ils sont cantonnés comme tu dis au low-cost, où il y aura toujours quelqu’un d’encore moins cher, et pas forcément plus incompétent (genre à se retrouver au bout de 5 ou 10 ans sur une « place de marché » en ligne en concurrence avec des boîtes low-cost installées en Inde).

      ARNO* @arno ART LIBRE
    Écrire un commentaire
  • @olange
    Olivier Lange @olange CC BY-SA 11/05/2021
    10
    @02myseenthis01
    @arno
    @jeanmarie
    @rastapopoulos
    @monolecte
    @7h36
    @tofulm
    @ze_dach
    @marcimat
    @cy_altern
    10

    «Next Gen CSS: @container» de Una Kravets, CSS Tricks, 11.05.2021
    ▻https://css-tricks.com/next-gen-css-container

    « […] You can think of these like a media query (@media), but instead of relying on the viewport to adjust styles, the parent container of the element you’re targeting can adjust those styles.

    Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.

    No longer will the viewport and user agent be the only targets we have to create responsive layout and UI styles. With container queries, elements will be able to target their own parents and apply their own styles accordingly. This means that the same element that lives in the sidebar, body, or hero could look completely different based on its available size and dynamics. […] »

    #webdev #layout

    Olivier Lange @olange CC BY-SA
    • @arno
      ARNO* @arno ART LIBRE 11/05/2021

      Oh là là là là là là… !

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/05/2021

      ça fait tellement d’année qu’on attend ça…

      #CSS #intégration #web #responsive

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @jeanmarie
    jeanmarie @jeanmarie CC BY-NC-SA 20/03/2021
    10
    @spip
    @arno
    @fil
    @7h36
    @rastapopoulos
    @gblin
    @astier
    @dut
    @cy_altern
    @rezo
    10
    @arno @rastapopoulos @drbouvierleduc @fil @klaus @alexcorp

    En préparation d’un (potentiel) projet avec une compagnie de théâtre dont le site fera partie intégrante de la création finale, j’ai commencé à recenser des exemples et outils (dont certains trouvé ici même) pour mettre en place une narration sur le web.

    Si vous avez des exemples et des outils à ajouter, je suis preneur.

    ______________________________________

    LES EXEMPLES

    ▻http://www.framescollection.com/tunnelrats.html
    Peu de technique, mais une narration forte illustrée et rythmée graphiquement

    ▻http://www.framescollection.com/manly.html
    essentiellement graphique mais peu adaptable sur mobile

    ▻https://projects.lukehaas.me/scrollify/examples/apple
    principalement des animations visuelles et peu de texte

    ▻https://projects.lukehaas.me/scrollify/examples/layered-scrolling
    joue principalement sur les fonds (image ou vidéos) et peu de texte

    ►http://computer-grrrls.gaite-lyrique.net
    joue principalement sur le rythme des blocs de contenu

    ▻https://brest1937.kubweb.media/episode/heritage
    alterne animations et contenus textes/vidéos

    ▻https://www.nytimes.com/interactive/2015/09/17/nyregion/st-patricks-cathedral-pope-francis-visit.html
    très simple, repose sur l’image

    ▻https://www.liberation.fr/apps/2019/02/paris-populaire
    moins linéaire, on doit se balader sur la carte pour avoir accès aux contenus

    ►https://fabre.montpellier3m.fr/Correspondance d’@arno
    pour l’alternance de texte à lire (défilement vertical) et des photos des pages manuscrites (défilement horizontal)

    ▻https://www.bloomberg.com/graphics/2015-auto-sales
    haut niveau, avec animation de #SVG et tout

    ▻https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees
    idem, gros niveau, The Guardian quoi

    ►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin tout en SPIP / Noizetier par @rastapopoulos et @drbouvierleduc (cf commentaire)
    Site plus archivé mais tjs visible via ►https://web.archive.org/web/20190904140136/https://geoculture.fr/faire-bonne-chere-en-limousin

    ►https://www.nytimes.com/fr/2022/05/20/world/haiti-france-dette-reparations.html
    Pour l’intro et le zoom sur le carte

    ►https://uploads.knightlab.com/storymapjs/27497e92f064ef5616553b1c97c91106/walking-tour/index.html
    pour la navigation dans la carte

    ►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

    ______________________________________

    LES OUTILS

    How to implement #scrollytelling with six different libraries partagé par @fil
    ►https://pudding.cool/process/how-to-implement-scrollytelling

    Scrollama is a modern & lightweight #JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
    ►https://github.com/russellgoldenberg/scrollama

    Scrollify , A #jQuery plugin that assists scrolling and smoothly snaps to sections.
    ▻https://projects.lukehaas.me/scrollify

    ScrollStory is a jQuery plugin for building scroll-based stories. Rather than doing a specific task, it aims to be a tool to help solve general problems.
    ▻https://sjwilliams.github.io/scrollstory

    Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
    ►https://maxwellito.github.io/vivus

    graph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events can be used to update a chart’s state.
    ▻https://github.com/1wheel/graph-scroll

    enter-view . Dependency-free JavaScript library to detect when element enters into view. See demo. It uses requestAnimationFrame in favor of scroll events for less jank.
    ▻https://github.com/russellgoldenberg/enter-view

    Projects | Knight Lab partagé par @klaus
    ▻https://seenthis.net/messages/792645

    revealjs The HTML Presentation Framework partagé par @alexcorp en commentaire
    ►https://revealjs.com

    ______________________________________
    TAGS SUR SEENTHIS

    #art_directed_article / #scrollytelling, #narration et #Nouvelles_narrations / #webdoc / #longforms

    #webdev #spip_recette

    jeanmarie @jeanmarie CC BY-NC-SA
    • @arno
      ARNO* @arno ART LIBRE 20/03/2021

      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.

      ARNO* @arno ART LIBRE
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 21/03/2021

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

      jeanmarie @jeanmarie CC BY-NC-SA
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 21/03/2021

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

      alexcorp @alexcorp CC BY-NC
    • @arno
      ARNO* @arno ART LIBRE 21/03/2021

      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.

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 21/03/2021
      @drbouvierleduc @arno

      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.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 21/03/2021

      #spip_blog

      b_b @b_b PUBLIC DOMAIN
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 24/03/2021

      Merci pour vos retours forts inintéressants :)

      jeanmarie @jeanmarie CC BY-NC-SA
    • @dlechenne
      dlechenne @dlechenne 24/03/2021

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


      –
      j’ai en ai développé plusieurs avec des étudiant.es des Beaux-arts de Bordeaux ou j’enseigne.
      Ce ne sont que des images et ce n’est pas connecté à une base de donnée, par manque de temps pour un simple projet pédagogique, mais c’est faisable.
      ▻https://design-ebabx.fr/webapp/seahot
      ▻https://design-ebabx.fr/webapp/affluence

      dlechenne @dlechenne
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 15/04/2021

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

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 12/07/2021
      @thibnton

      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

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 23/05/2022

      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

      jeanmarie @jeanmarie CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 23/05/2022
      @astier

      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 @rastapopoulos CC BY-NC
    • @astier
      bricebou @astier CC BY-SA 23/05/2022
      @rastapopoulos

      @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

      bricebou @astier CC BY-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 20/11/2022

      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

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 12/02/2021
    2
    @spip
    @gblin
    2

    Emmet — the essential toolkit for web-developers
    ►https://emmet.io

    Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

    Découvert via cette vidéo :
    ▻https://www.youtube.com/watch?v=EhRPdUv1ZrA

    ARNO* @arno ART LIBRE
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 12/02/2021

      Grace à #vscodium, on peut passer plus de temps à apprendre les raccourcis qu’à coder :)

      Pour info, il y a des snippets pour #spip : ▻https://git.spip.net/spip-contrib-outils/snippets-vscodium

      #Emmet #vscode #webdev #spip_recette

      jeanmarie @jeanmarie CC BY-NC-SA
    • @marcimat
      marcimat @marcimat 13/02/2021

      Roh ! Je ne connaissais pas « lorem » ou « lorem5 » ... un indipensable :)

      marcimat @marcimat
    • @arno
      ARNO* @arno ART LIBRE 25/03/2021

      You can use Emmet with CSS!
      ►https://www.youtube.com

      ARNO* @arno ART LIBRE
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 4/09/2020

    Accéder à l’ancienne version de MicrosoftEdge | Microsoft Docs
    ▻https://docs.microsoft.com/fr-fr/DeployEdge/microsoft-edge-sysupdate-access-old-edge

    Utiliser les 2 versions du navigateur Microsoft Edge (Legacy et Chromium) sur un même ordi. _modification de la stratégie de groupe à faire avant d’installer la nouvelle version_

    #windows #webdev #microsoft_edge

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @alexis
    Alexis J. @alexis CC BY 9/04/2020

    hCaptcha - Stop more bots. Start getting paid.
    ▻https://www.hcaptcha.com

    Une alternative intéressante à reCaptcha. Do you use a captcha to keep out bots? hCaptcha protects user privacy, rewards websites, and helps companies get their data labeled. Help build a better web. — Permalien

    #vieprivée #webdev

    Alexis J. @alexis CC BY
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 8/10/2019
    1
    @tofulm
    1

    nfroidure/ttf2woff2 : Convert ttf files to woff2.
    ▻https://github.com/nfroidure/ttf2woff2

    Un convertisseur de polices TTF vers Woff2 en nodeJS
    Alternativement un outil en ligne : ▻https://www.aconvert.com/fr/image/ttf-to-woff2

    #convertisseur #font #TTF #Woff2 #webdev #outil #nodeJS

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @jeanmarie
    jeanmarie @jeanmarie CC BY-NC-SA 9/09/2019
    4
    @rastapopoulos
    @spip
    @reka
    @tofulm
    4
    @rastapopoulos

    #SPIP : un modèle pour mettre en forme le contenu des newsletters

    Un besoin qui remonte régulièrement quand on envoie des newsletter avec SPIP et le trio magique Newsletter/Mailsubscriber/Mailshot, c’est la possibilité de mettre en forme le contenu pour le rendre plus dynamique. Bien sûr, et c’est là que se cache le pot de pus, ça doit fonctionner sur toutes les plateformes et avec tous les logiciels, webmails compris.

    Principe

    J’ai donc utilisé l’astuce lue je ne sais plus où (de @rastapopoulos je crois ?) de passer par des sélections éditoriales (►https://contrib.spip.net/Selections-editoriales) pour afficher le contenu dans les newsletters.

    Il suffit donc de faire un modèle simple qui affiche ces sélections et le tour est joué.

    Pour ça, j’ai regardé ce qui se faisait chez Mailjet et le principe est d’avoir un template qui affiche de base tout en une colonne et, via des Media Queries, gérer les mises en forme plus complexes (ligne, 2 colonnes, etc...). Ça semble malin car les cas où on doit afficher le contenu en 1 colonne, c’est sur smartphone et ces applis sont les moins aptes à gérer Media Queries.

    –---

    EDIT 16/04/20 : C’est désormais un plugin indépendant sur la forge SPIP
    ►https://git.spip.net/spip-contrib-extensions/newsletters_modeles

    –---

    Il y a donc 2 fichiers

    La feuille de styles insérée dans le modèle de la newsletter :
    ▻https://gitlab.com/jmoupah/zcm/blob/master/css/newsletter_rwd.css.html
    le modèle
    ▻https://gitlab.com/jmoupah/zcm/blob/master/modeles/selection_newsletter.html

    Le modèle

    Affichage pleine largeur <selection_newsletterX>
    Affichage par ligne <selection_newsletterX|affichage=ligne>
    Modèle par colonne <selection_newsletterX|affichage=colonne>

    Le résultat

    https://stk.cousumain.info/modele_newsletter_zcm.jpg

    D’après mes 1ers tests, ça semble fonctionner sur pas mal de configs (Thuberbird, Yahoo/GMail/Zimbra webmail, GMail sur Android). Étonnamment ^^, MS Outlook n’affiche pas bien les 2 colonnes. N’ayant pas cette usine à gaz, je n’ai pas encore pu creuser. Et je n’ai pas encore pu tester sur Mail de MacOS non plus.

    Donc voilà, si qq1 veut tester et faire des retours, je prends.

    #spip_recette #webdev #integrationweb

    jeanmarie @jeanmarie CC BY-NC-SA
    • @boumla
      _dd_ @boumla CC BY-NC-SA 7/01/2020

      Hello,
      Je n’arrive pas à faire fonctionner le modèle. Si je sélectionne squelettes/newsletters/selection_newsletter.html j’ai une page blanche en previsu et lors d’un test d’envoi j’ai « Une erreur est survenue lors de la génération de la newsletter. »
      J’ai testé avec <selection_newsletter13> dans le texte de la newsletter. Il y a 2 articles (publiés) dans la sélection.

      Est-ce que squelettes/newsletter_rwd.css.html est au bon endroit ? Je comprends pas comment cette css est appelée, mais bon, ça c’est moi.

      _dd_ @boumla CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 8/01/2020

      Pas sûr de bien comprendre la question :)

      Il faut insérer <selection_newsletter13> dans le texte de la newsletter et prévisualiser la newsletter de façon classique.

      Et il faut ranger le squelette newsletter_rwd.css.html dans ton dossier css par ex et ajouter <INCLURE{fond=css/newsletter_rwd.css} /> dans les styles de ta newsletter.

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 16/04/2020

      Pour info, c’est désormais un plugin indépendant sur la forge SPIP : ►https://git.spip.net/spip-contrib-extensions/newsletters_modeles

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 28/04/2020

      Et c’est prêt à tester désormais : ►https://git.spip.net/spip-contrib-extensions/newsletters_modeles

      Vous trouverez les infos et mode d’emploi dans le readme.

      N’hésitez pas à tester et faire des retours sur la liste spip-dev ou dans les tickets git.

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 22/05/2020

      Et désormais dispo via SVP et ▻https://plugins.spip.net/newsletters_modeles.html

      Encore plus prêt à être testé !

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 6/09/2019
    3
    @tofulm
    @jeanmarie
    @b_b
    3

    Flexbox ou Grid Layout ? - Alsacreations
    ▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

    CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
    Voir aussi :
    – ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
    – ▻https://la-cascade.io/utiliser-grid-ou-flexbox
    – sur MDN :
    . ressources pour grid layout :
    concepts de base : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
    Références : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
    Exemples : ►https://gridbyexample.com/examples
    . ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout

    #CSS #grid #flexbox #layout

    cy_altern @cy_altern CC BY-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 7/09/2019

      Merci pour ces ressources

      #webdev #développement #intégrationweb

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 28/02/2019

    Top 10 #flutter Companies in 2019
    ▻https://hackernoon.com/top-10-flutter-companies-in-2019-d57cf5a5f6ec?source=rss----3a8144eabfe3

    https://cdn-images-1.medium.com/max/1024/1*6BMPHmcJBSI-GPWfvNpGrA.png

    Best of the best! Experts in Flutter around the globe!2019 is in its second month and the era of mobile application technology is continuously reaching new peaks. In the midst of the power struggle between companies to take hold of this division, Google has made its mark by releasing its own open-source SDK for app development.Flutter was announced in its alpha stage in May 2017 and towards the end of 2018, Google announced the first stable release of its brainchild at the annual Flutter conference in December. Flutter has proved to be a revolution in the Mobile application development scene with its intuitive design and cross-platform developmental features. Removing the need for JavaScript bridges for communication and it has become one of the fastest frameworks to be adopted by (...)

    #programming #mobile-app-development #ios #android

    Hacker Noon @hackernoon CC BY-SA
    • @hardyian
      hardyian @hardyian 8/07/2021

      https://www.cronj.com/frontend-development/html.html

      Interested to learn this language? Then head on to this tutorial and get to know all about HTML! Plus we have added numerous examples such that you can learn better! So happy learning! A good free online resource to provide a quick overview in front end stuff.

      #programming #webdevelopment #learnHtml #html

      hardyian @hardyian
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 22/10/2018
    1
    @tofulm
    1

    generatedata.com
    ▻http://www.generatedata.com/?lang=fr#t2

    Un outil open source écrit en JavaScript, PHP et MySQL qui permet de générer rapidement de gros volumes de données personnalisées dans une variété de formats pour une utilisation dans les logiciels de tests, bases de données...

    #outil #webdev #données #générateur #generetedata

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @ari
    Ari @ari 10/08/2018
    5
    @mukt
    @rastapopoulos
    @ninachani
    @aris
    @die_brucke
    5

    Syncope
    ▻http://nowodzinski.pl/syncope

    Super efficace pour définir des réglages typos de base (taille, interlettrage, longueur de ligne), permet aussi de caler un rythme vertical régulier entre titre, inters et paragraphes. Moins complexe que d’autres outils mais c’est aussi bien.

    Syncope is a WYSIWYG tool that helps web designers and developers chose the optimal vertical rhythm of the typography for their web pages.

    Basically, it’s a set of tools which adjust the rhythm and output the styles in a preferred, production–friendly format. It is also a lot of fun to play with! In fact, if it weren’t for that, this tool wouldn’t have seen the light of day.

    https://framapic.org/KNGrfxOTC7PQ/WXRLI0GzU95y.jpg

    #typographie #webdev

    Ari @ari
    Écrire un commentaire
  • @nicod_
    nicod_ @nicod_ 27/01/2018
    3
    @rastapopoulos
    @cy_altern
    @tofulm
    3

    a11y-outline
    ▻https://addons.mozilla.org/fr/firefox/addon/a11y-outline

    Une extension #Firefox qui remplace « Headings map », que j’utilisais beaucoup mais qui n’est plus compatible avec Quantum.
    On peut afficher simplement les landmarks #aria et les niveaux de titres <Hx> d’une page, ça semble parfait à première vue.

    #accessibilité #webdev

    PS : touche ESC pour fermer la popup

    Allez, plus qu’une extension pour vérifier/gérer les contrastes, genre ▻http://contrast-finder.tanaguru.com et j’aurai à peu près retrouvé mes fonctionnalités de webdev sur Firefox 60 (nightly).

    • #Quantum
    nicod_ @nicod_
    • @nicod_
      nicod_ @nicod_ 27/01/2018

      Ce script à mettre en bookmarklet semble pas mal du tout :
      ►https://khan.github.io/tota11y
      et porté sous forme de webextension :
      ▻https://addons.mozilla.org/fr/firefox/addon/tota11y-accessibility-toolkit

      nicod_ @nicod_
    Écrire un commentaire
  • @nicod_
    nicod_ @nicod_ 21/12/2017
    1
    @jeanmarie
    1

    devtools-highlighter
    ▻https://addons.mozilla.org/en-US/firefox/addon/devtools-highlighter

    Find and highlight elements on the page with this DevTools panel, using CSS styles and selectors.

    Un nouvel outil dans les devtools de #Firefox

    #webdev #css

    nicod_ @nicod_
    Écrire un commentaire
  • @nicod_
    nicod_ @nicod_ 3/11/2017
    4
    @rastapopoulos
    @spip
    @tofulm
    @mukt
    4

    Cache-cache #css – La vie en #ffoodd
    ▻http://www.ffoodd.fr/cache-cache-css
    #webdev #masquer #hidden #focus #a11y

    nicod_ @nicod_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 3/11/2017

      #idée_pour_spip, à intégrer dans le thème/framework CSS des choses disponibles dans l’admin

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @nicod_
    nicod_ @nicod_ 31/10/2017
    1
    @baroug
    1

    Lozad.js | lozad.js
    ▻https://apoorv.pro/lozad.js

    Yet another Lazy Loading JavaScript library, why?

    Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.

    Making this more efficient and performant is what #intersectionobserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.

    #webdev #images #lazy_load #performance

    nicod_ @nicod_
    • @b_b
      b_b @b_b PUBLIC DOMAIN 31/10/2017

      Ici aussi ▻https://seenthis.net/messages/628636 :)

      b_b @b_b PUBLIC DOMAIN
    • @nicod_
      nicod_ @nicod_ 31/10/2017

      Ah peut être, mais ça vient en automatique du flux RSS de mon marque page (scuttle), je contrôle pas systématiquement :)

      nicod_ @nicod_
    Écrire un commentaire
  • @nicod_
    nicod_ @nicod_ 26/10/2017

    Saying Goodbye to Firebug ★ Mozilla Hacks – the Web developer blog
    ▻https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug

    https://hacks.mozilla.org/files/2017/10/firebug-large.png

    The story of Firefox and Firebug is synonymous with the rise of the web.

    So long Firebug, and thanx for all the fish :)

    #mozilla #firebug #webdev

    nicod_ @nicod_
    Écrire un commentaire
  • @aris
    aris  @aris CC BY-SA 17/10/2017
    2
    @val_k
    @nhoizey
    2

    Essential Image Optimization
    ►https://images.guide

    https://images.guide/images/logo-banner.jpg

    We should all be automating our image compression.
    In 2017, image optimization should be automated. It’s easy to forget, best practices change, and content that doesn’t go through a build pipeline can easily slip. To automate: Use imagemin or libvips for your build process. Many alternatives exist.

    #web #webdev #best_practice

    aris  @aris CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 10/08/2017
    1
    @tofulm
    1

    GitHub - imagemin/imagemin : Tense, nervous, minifying images ?
    ▻https://github.com/imagemin/imagemin

    Utilitaire pour compresser les images web (jpg, png, gif) et les fichiers SVG. Disponible en ligne de commande, GUI, module Gulp

    #image #gulp #node #compression #optimisation #webdev

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 10/08/2017
    4
    @rastapopoulos
    @monolecte
    @b_b
    @mukt
    4

    Tanaguru Contrast-Finder
    ▻http://contrast-finder.tanaguru.com/result.html?foreground=%2300C0BD&background=%23FFFFFF&algo

    un outil en ligne pour ajuster les combinaisons de couleurs texte/fond afin d’avoir un contraste suffisant pour passer les tests d’accessibilité

    #accessibilité #RGAA #outil #webdev #contraste #css

    cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 10/08/2017

      #intégration #conception #web #design

      RastaPopoulos @rastapopoulos CC BY-NC
    • @monolecte
      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 10/08/2017

      Bien ! Dans ma première version de ma nouvelle interface, le contraste était insuffisant, mais je ne l’ai su que parce qu’une lectrice a commencé par dire qu’elle ne me lisait plus. Et parce que je lui ai demandé pourquoi, alors, seulement, elle m’a parlé de ses problèmes de vue et de mon problème de contraste.

      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    • @contrastfinder
      Contrast Finder @contrastfinder CC BY-SA 12/09/2017

      la nouvelle version (par les concepteurs de Contrast-Finder),
      avec une nouvelle URL :
      ►https://app.contrast-finder.org/?lang=fr

      pour contribuer c’est par ici :
      ►https://github.com/Asqatasun/Contrast-Finder

      pour l’histoire du projet #ContrastFinder :
      ►https://contrast-finder.org/#contrast-finder-history

      #a11y #couleur #contrast

      Contrast Finder @contrastfinder CC BY-SA
    • @monolecte
      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 12/09/2017

      Très utile, merci !

      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    Écrire un commentaire
  • @oletrouher
    OLT @oletrouher CC BY-NC-SA 22/04/2017
    8
    @fil
    @simplicissimus
    @raphael
    @7h36
    @fadixu
    @monolecte
    @ari
    @kent1
    8

    CSS Peeper – L’analyse de CSS, pépère.
    ▻http://feedproxy.google.com/~r/KorbensBlog-UpgradeYourMind/~3/ucEQDh_63TM/css-peeper-lanalyse-de-css-pepere.html

    http://korben.info/wp-content/uploads/2017/04/capture-decran-2017-04-14-14-37-03-650x715.jpg

    Si vous êtes sous Chrome et que vous trouvez que l’inspecteur de code pour analyser les styles d’un site web, n’est pas très pratique à utiliser, voici CSS Peeper, une extension qui va vous changer la vie. Grâce à CSS Peeper, plus besoin de partir en expédition dans les feuilles de style, il suffit de cliquer sur l’icône et de déplacer votre souris sur l’élément de la page qui vous intéresse, pour en obtenir tous les détails techniques. Styles appliqués, couleurs et même les assets, c’est-à-dire les éléments (dans ce cas, des images) qui sont appelés sur la page.

    Vraiment génial par exemple pour récupérer une image appelée par une CSS sans être obligé de gratter. Un outil indispensable pour les intégrateurs, designers et autres bidouilleurs de code en manque d’inspiration

    A télécharger ici. Source Cet (...)

    OLT @oletrouher CC BY-NC-SA
    • @fil
      Fil @fil 22/04/2017

      ▻https://csspeeper.com
      #CSS #webdev #excellent #merci

      Fil @fil
    • @nicod_
      nicod_ @nicod_ 23/04/2017

      CSS pépère ouais.

      Bon, c’est joli mais je vois pas trop l’utilité réelle.

      nicod_ @nicod_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 23/04/2017

      Mmmh je ne comprends pas, c’est un peu mieux présenté peut-être mais je ne vois pas ce que ça fait de plus que l’inspecteur de Firefox ou Chromium qui ont DEJA une fonction pour pointer n’importe quel élément de la page à la souris sans avoir à fouiller le HTML.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @fil
      Fil @fil 23/04/2017

      il y a aussi l’onglet qui permet de choper les images

      Fil @fil
    • @ari
      Ari @ari 24/04/2017

      Merci, je trouve ça bien plus accessible et vachement moins impressionnant que les inspecteurs pour des personnes qui découvrent les CSS. Et au niveau typo c’est aussi bien que les autres extensions spécialisées, mais ça propose aussi d’autres fonctions.

      Ari @ari
    Écrire un commentaire
  • @alda
    Alda @alda CC BY-ND 10/10/2016
    1
    @fil
    1

    @supports will change your life
    ►http://www.lottejackson.com/learning/supports-will-change-your-life

    Ok, ça ressemble à un appat à clic mais, effectivement, quand on fait du #css, @support ça change la vie.. — Permalink

    #informatique #webdev

    Alda @alda CC BY-ND
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 25/09/2016
    2
    @fil
    @rastapopoulos
    2

    ParisWeb
    ▻https://pixelastic.github.io/parisweb
    présentation de l’ensemble des conférence de parisweb (10 ans d’archives) avec un moteur de filtrage efficace
    #paris_web #conférence #webdev #recherche #filtre

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 9/08/2016

    Storage Inspector - Firefox Developer Tools | MDN
    ▻https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector

    The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:

    – Cache Storage (new in Firefox 47) - any DOM caches created using the Cache API.
    – Cookies - All the cookies created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.
    – Local Storage - All local storage items created by the page or any iframes inside the page.
    – Session Storage - All session storage items created by the page or any iframes inside the page.
    – IndexedDB - All IndexedDB databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.

    For the time being, the Storage Inspector only gives you a read-only view of storage. But we’re working to let you edit storage contents in future releases.

    #cookie #storage #local_storage #inspector #webdev #firebug #firefox_devtools #mdn

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @alda
    Alda @alda CC BY-ND 4/02/2016

    Comment valider une adresse email en #php
    ▻https://3v4l.org/hPqam

    Il y a beaucoup de sites qui refusent des emails parfaitement valides parce qu’ils trouvent qu’il y a des caractères bizarres, ou bêtement qu’il y a un TLD inconnu (voire pas de TLD)

    Pourtant valider une adresse email en PHP ça se fait en une ligne, sans regex, avec une fonction native du langage.(Permalink)

    #webdev

    Alda @alda CC BY-ND
    Écrire un commentaire
0 | 25 | 50 | 75 | 100 | 125 | 150 | 175 | 200 | ... | 325

Thèmes liés

  • #mobile
  • #javascript
  • #css
  • #web
  • #email
  • #webdesign
  • programminglanguage: javascript
  • company: github
  • #test
  • #css
  • #design
  • #jquery
  • #php
  • #js
  • #spip
  • #html
  • #scroll
  • technology: html
  • #css3
  • #marchand
  • #image
  • #outil
  • technology: android
  • #interfaces
  • #spip
  • #geek
  • #performance
  • #développement
  • #wysiwyg
  • #spip_recette
  • #nodejs
  • product: ipad
  • technology: gui
  • industryterm: front-end web development
  • programminglanguage: html
  • #layout
  • #rules
  • company: yahoo
  • product: iphone
  • operatingsystem: android