• Signaler les champs obligatoires
    http://romy.tetue.net/signaler-les-champs-obligatoires

    Comment bien signaler les champs de saisie obligatoire ? Avec l’astérisque conventionnelle, mais attention : c’est moins simple qu’il n’y paraît ! Voyons cela pas à pas… Baliser les champs obligatoires comme tels Cela se fait très simplement avec l’attribut HTML5 dédié, required, qui s’utilise comme suit…

    #required #HTML5 #a11y #formulaires #forms #astérisque #tutoriel



  • Bringing #html5 #games to life. Launching Eulercoder Games — QuickGames
    https://hackernoon.com/bringing-html5-games-to-life-launching-eulercoder-games-quickgames-dddd9

    Photo by Pawel Kadysz on UnsplashHello!Long wait is over. We are launching our latest product in the global marketplace today. Eulercoder is launching QuickGames — a global distributor of HTML5 and Android Games. We spent past three months in curating, building and testing our HTML5 games and today is the day we are ready to hit the market.QuickGames (An Eulercoder company) already partnered with many channel partners to distribute our games globally. We have over 230+ HTML5 games that we are distributing worldwide through our channel partners. Our simple pricing model and integration APIs make the integration of our games seamless and easy.This article covers all the information about QuickGames, our services, products, pricing model and basic FAQs.So let’s get started…QuickGames Partner (...)

    #game-development #gaming #gamenews


  • Using Ractive.js and #html5 Fetch API to consume #rest API
    https://hackernoon.com/using-ractive-js-and-html5-fetch-api-to-consume-rest-api-f03c47904202?so

    credit: https://burst.shopify.com/photos/developer-reviewing-javascriptRecently I was given a task to consume an open rest based API from Open Weather using Ractive.js and HTML5’s Fetch APIThe sample app here takes the city name as input and shows the corresponding weather information below it.Get the OpenWeather API keys for FREE!!!In order to get the JSON data from OpenWeather’s REST API, the first thing we need to do is get their free API key. The API can be called by simply passing in this app id as query parameter. That’s it!Setting the UI containerCreate an HTML5 element to be used as the front of the app. In our case, it’s div#container.Implement responsiveness using BootstrapJust for implementing the responsiveness, we’ve included the Bootstrap reference. The classes .row .col-md-6  (...)

    #ractivejs #es6 #javascript


  • Je viens de publier une #app de #musique : La Petite Renarde rusée. C’est une application essentiellement pédagogique, qui permet d’écouter une courte pièce d’orchestre dont les 13 différents instruments peuvent être « allumées » ou « éteintes ».

    On a fait ça avec Mosquito pour l’Arcal, et j’ai mis à profit les conseils échangés ici sur #Seenthis quant à l’API sonore du #HTML5.

    La version iOS est là :
    https://itunes.apple.com/fr/app/la-petite-renade-rus%C3%A9e/id1380054779?mt=8
    Et la version Android ici :
    https://play.google.com/store/apps/details?id=com.parisbeyrouth.petiterenarde

    Note : il faut tout de même une machine pas trop ancienne, parce que 13 pistes de son en même temps, ça bouffe de la ressource. (Astuce ici : au départ j’avais 13 fichiers stéréo, qui permettaient de reproduire la spatialisation de l’orchestre. Au final j’ai fait 13 fichiers mono, et je simule la spatialisation gauche-droite dans l’API javascript.)

    #shameless_autopromo


  • Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
    https://www.fondationcustodia.fr

    Comme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…

    Parmi les points à voir en particulier…

    – Un menu hamburger tout mignon.

    – Des #longforms pour la présentation des expositions :
    https://www.fondationcustodia.fr/Georges-Michel

    – Dans ces longforms, on peut présenter des collections d’œuvres avec mon raccourci <ligne>, qui présente les images sur une ou plusieurs lignes, en adaptant la taille des images pour occuper la largeur de l’écran :

    – Ou avec mon raccourci <slide>, qui présente les documents les uns à côté des autres sur une ligne.
    https://www.fondationcustodia.fr/Les-portraits-en-miniature-12

    Pour rappel, « ligne » et « slide », c’est dans mon #plugin « Insertion avancée d’images », documenté ici :
    http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images

    On trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci <img|shape> :


    C’est pas toujours évident à utiliser à bon escient, mais là ça donne un aspect « imprimé » particulièrement chic je trouve.

    – Dans les « formes longues », un problème usuel, c’est la navigation verticale « trop » longue, et donc l’utilisation d’une sorte de table des matières pour pouvoir naviguer rapidement. Mine de rien, c’est toujours assez problématique. Là j’ai développé une solution que je trouve bien sympathique, avec une table des matières en haut à gauche de l’écran, qui se plie/déplie, au fur et à mesure du scroll, et au survol, pour indiquer où on est et qui, évidemment, permet de naviguer au clic :

    Détail mignon : pour réaliser le graphisme de ce petit menu, il n’y a pas une seule image, c’est entièrement réalisé en CSS.

    – Il y a une maquette assez sympa pour la présentation des « Collections », avec des panneaux qui défilent horizontalement (et c’est responsive, la présentation change assez radicalement sur téléphone ou tablette) :
    https://www.fondationcustodia.fr/les-portraits-en-miniature

    – Il y a aussi une présentation avec un « méga-zoom » sur les images, pour la présentation des œuvres des « Catalogues », mais comme le contenu n’est pas encore en ligne, alors je reposterai un message pour que tu ailles voir quand ce sera prêt.

    – Quand on clique sur la loupe de recherche, hop un grand pavé recouvre l’écran :

    – Enfin, sur ce site, je me suis particulièrement astreint à ce que toutes les animations/interactions/transitions soient autant que possible réalisées sans Javascript. Du coup, on peut naviguer sur le site avec Javascript désactivé, avec un minimum de dégradations (essentiellement : des images responsive qui vont rester en basse définition). Mais le menu hamburger se déploie, avec ses sous-menus animés, comme si de rien n’était ; le système de « table des matières » des longforms fonctionne très bien, avec ses animations au survol, les sliders un peu partout fonctionnent de manière transparente… (et évidemment : des interactions « au doigt » moins riches sans Javascript).

    – Enfin la page d’accueil obtient un score de 100/100 sur mobile avec PageSpeed, et 97/100 sur ordinateur, c’est chouette.

    À l’intérieur du site, j’ai le plugin Saisies qui me fait chuter la moyenne sur quelques pages, en m’insérant violemment des appels à un fichier CSS et un fichier Javascript (ah, c’est vache !). :-))

    #shameless_autopromo

    • Un effet que j’aime bien sur ce site : j’ai mis des dégradés colorés sous les grandes images, pour avoir quelque chose qui s’affiche avant que les images soient chargées.

      Ce qui donne par exemple, avant chargement de l’image :

      et une fois l’image chargée :

      Ce que je réalise directement dans le squelette ainsi :

      #image_haut {
              background-color: [#(#LOGO_ARTICLE_RUBRIQUE|couleur_extraire)];
              background: linear-gradient(to bottom,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,1})] 0%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,5})] 25%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,15})] 75%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,19})] 100%
              );
      }
      #image_haut:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              content: " ";
              z-index: 1;
              background: linear-gradient(to right,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{1,10})] 0%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{5,10})] 25%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{15,10})] 75%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{19,10})] 100%
              );
               mix-blend-mode: soft-light;
      }
    • @realet Je viens de mettre en ligne une détection du focus en javascript, pour plier ou déplier le menu hamburger selon qu’on est sur un lien dans le menu ou en dehors.

      Je fais ceci :

              $("#menu_flottant a").on("focus", function() {
                      $("#afficher_menu").prop("checked", true);
              });
              $("body > *:not(#menu_flottant) a").on("focus", function() {
                      $("#afficher_menu").prop("checked", false);
              });


  • Validation des formulaires de données - Guides pour développeurs Web | MDN
    https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire

    Une des fonctionnalités de HTML5 est de pouvoir valider la plupart des données des utilisateurs sans avoir recours à des scripts. On utilise pour cela des attributs de validation sur les éléments du formulaire.

    et pour quelques exemples basiques : http://dmouronval.developpez.com/tutoriels/html/formulaires-html5

    #validation #formulaire #web_dev #html5



  • Microdata : kesako ? Exemples pratiques > Growth Hacking France
    http://growthhackingfrance.com/microdata-kesako-exemples-pratiques

    Avec l’arrivée du HTML5, de nouveaux éléments sont venus renforcer le sens des composant des pages sémantiques des sites internet.
    Par exemple on a vu apparaître de nouvelles balises ( <header> , <section> , <article> , <nav>…) Qui permettent de structurer la page en indiquant simplement « il s’agit du menu de navigation, il s’agit d’une section de la page… » sans avoir à ajouter des attributs comme c’était le cas avant.

    Parmi ces nouveautés HTML5, ont été ajoutées les microdata, ou microdonnées.
    Les microdata ont le même but et le même genre de fonctionnement que les microformats, mais permettent une maîtrise et une précision encore plus importante. Microdata et microformats sont donc différents, mais fonctionnent tous les deux et peuvent cohabiter sur une même page.
    Les microdata n’ont pas encore de normes, mais des recommandations ont été définies par le W3C.

    Les microdata sont des attributs supplémentaires permettant de préciser certains aspects sémantiques des éléments. Ils sont donc tout à fait dans la même ligne que les microformats puisqu’ils ajoutent des métadonnées dans le code HTML d’une page internet.

    #xyzaeiou
    #web_semantique #html5



  • On a livré aujourd’hui le site de l’OPPIC (L’Opérateur du patrimoine
    et des projets immobiliers de la Culture) :
    http://www.oppic.fr

    Évidemment, #SPIP, #HTML5 et #responsive, avec Mosquito.

    Les principales originalités :

    – le système de recadrage « intelligent » (souvent qualifié de « direction artistique »), avec mon #plugin Centre image : on indique avec une petite croix dans l’espace privé le centre d’intérêt de l’image, et ensuite les recadrages responsive de l’interface publique se font autour de ce point (et non systématiquement au centre de l’image comme on fait usuellement) ; au passage : les grands logos changent beaucoup de proportions selon les proportions de l’écran (vertical/horizontal, et taille) ;

    – les pages « projets » :
    http://www.oppic.fr/article76.html
    avec deux colonnes qui scrollent à des vitesses différentes (selon la taille de l’écran), et des raccourcis et des outils pour fabriquer différents cadres (pavé foncé en haut à gauche avec les mentions des architectes, maîtres d’œuvre…), un pavé avec les budgets (et système de « gros » chiffres, et dans le texte des petits pavés avec les prestataires…

    – des #longforms (formes longues) :
    http://www.oppic.fr/rubrique18.html
    avec mes outils permettant d’installer des images qui se fondent sous le texte, et une collection complète de modèles de texte (une, deux, trois, quatre colonnes, etc.).

    #shameless_autopromo

    • Bonjour

      Super et merci pour le partage :) ça m’a permis de découvrir Photoswipe que je ne connaissais pas et qui va me rendre bien service pour un nouveau projet.
      Un petit truc : dans le title du href des images : Ecole d’architecture de Strasbourg. Chantier au 4 juin 2013. ©Bob Fleck - <span class="caps">OPPIC</span> , le span class="caps" n’est pas interprété...
      Bonne nouvelle année à tous
      Cilou


  • HTML5 Geolocation
    https://www.sitepoint.com/html5-geolocation

    The Geolocation API of HTML5 helps in identifying the user’s location, which can be used to provide location specific information or route navigation details to the user.

    Using geolocation - Web APIs | MDN
    https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

    The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
    The geolocation object

    The geolocation API is published through the navigator.geolocation object.

    etc.

    HTML5 Geolocation
    http://www.w3schools.com/html/html5_geolocation.asp

    Locate the User’s Position
    The HTML Geolocation API is used to get the geographical position of a user.
    Since this can compromise privacy, the position is not available unless the user approves it.

    Using HTML Geolocation
    The getCurrentPosition() method is used to return the user’s position.
    The example below returns the latitude and longitude of the user’s position

    Handling Errors and Rejections
    The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user’s location

    Displaying the Result in a Map
    To display the result in a map, you need access to a map service, like Google Maps.
    In the example below, the returned latitude and longitude is used to show the location in a Google Map (using a static image)

    Location-specific Information
    This page has demonstrated how to show a user’s position on a map.
    Geolocation is also very useful for location-specific information, like:
    Up-to-date local information
    Showing Points-of-interest near the user
    Turn-by-turn navigation (GPS)

    Client-Side Storage - HTML5 Rocks
    https://www.html5rocks.com/en/tutorials/offline/storage

    This is an overview of client-side storage, a general term for several separate but related APIs: Web Storage, Web SQL Database, Indexed Database, and File Access. Each of these techniques provides a distinct way to store data on the user’s hard drive, instead of the server, where data usually resides. There are two main reasons to do this: (a) to make the web app available offline; (b) to improve performance. For a detailed explanation of the use cases for client-side storage, see the HTML5Rocks article, “Offline”: What does it mean and why should I care?.

    The APIs share a similar scope and similar principles. So let’s first understand what they have in common before launching to the specifics of each.

    Building A Simple Cross-Browser Offline To-Do List With IndexedDB And WebSQL – Smashing Magazine
    https://www.smashingmagazine.com/2014/09/building-simple-cross-browser-offline-todo-list-indexeddb-websql

    #html5


  • Flash d’Adobe à l’agonie - LinuxFr.org
    http://linuxfr.org/news/flash-d-adobe-a-l-agonie

    Un historique à la « Rise and fall » de la technologie Flash :

    Flash Player et sa technologie sous‐jacente, tous deux développés par la société Adobe, n’en finissent plus d’agoniser. Sommes‐nous en train d’assister aux derniers soubresauts  ?
    [...]
    Dans la première partie de cette dépêche, nous présenterons Flash et reviendrons plus en détail sur son histoire, son apogée, ses concurrents, puis sa chute vers l’oubli.
    La seconde partie nous permettra de détailler les technologies du moment, afin de donner quelques pointeurs aux développeurs et designers Web souhaitant se mettre au goût du jour.

    A noter un paragraphe sur l’émergence de la spécification EME qui menace de DRMisation l’ensemble des contenus du web :

    En effet, en 2013, Google, Microsoft et Netflix publient conjointement un brouillon de spécification W3C nommé « Encrypted Media Extensions » (EME ; version actuelle de la spécification), ce qui n’est rien de moins qu’un standard pour autoriser les DRM dans la norme HTML5. Le but est donc de contrôler la visualisation/écoute de media en streaming (vidéo et audio), d’en empêcher le téléchargement, etc.
    À ce jour, EME est déjà implémenté dans Mozilla Firefox (sous Windows seulement), Google Chrome, Apple Safari et Microsoft Explorer et Edge, à savoir l’ensemble des plus gros navigateurs du marché. Et bien sûr les services majeurs comme Netflix et Youtube fournissent déjà du contenu DRMisé par EME en HTML5.

    #flash #propriétaire #standardisation #HTML5 #SVG #EME #standard #animation #jeux #streaming


  • Comment travailler avec des icônes en SVG
    https://la-cascade.io/comment-travailler-avec-des-icones-en-svg

    Remarque : quand vous exportez un SVG depuis un outil de design, il comprendra souvent du markup et des métadonnées inutiles, ainsi que des données excessivement précises pour le chemin (dans l’attribut d). Essayez l’outil SVGOMG and comparez le code avant et après pour voir ce qui est supprimé ou simplifié.

    #web_design



  • #Hors-jeu - Le #football, cartes sur table - Upian, #ARTE, BR
    https://horsjeu.football/aide

    Le dernier #webdoc de #Davduf et Arte : à l’occasion de l’Euro 2016, #investigations dans le monde du Foot sous forme de 99 cartes à collectionner.
    Le principe pour accélérer la découverte des cartes étant de les partager, il est conseillé de se créer (au moins !) 2 comptes... #tricheur ? mais c’est le thème du jeu : l’important c’est de gagner !

    9 ALBUMS D’INVESTIGATION DE 11 CARTES
    Le football, cartes sur table
    Un documentaire en ligne à collectionner de David Dufresne & Patrick Oberli

    AVANT MATCH - HORS-JEU C’EST QUOI ?
    Hors-jeu repose sur le principe bien connu des cartes de foot à collectionner de notre enfance. Le site se découpe en 9 albums d’investigation, de 11 cartes chacun. Chaque carte révèle un témoignage vidéo inédit ou un document exclusif. Hors-jeu se joue sur tous les terrains (ordinateurs, téléphones, tablettes).

    VESTIAIRES - HORS-JEU C’EST OÙ ?
    Pour être sur la feuille de match, l’inscription (gratuite) est nécessaire. Hors-jeu accepte tous les logins et schémas de jeu connus : courriel, Twitter, Facebook, Google+. C’est en étant inscrit que votre collection démarre. Pour de bon.

    COUP D’ENVOI - HORS-JEU C’EST COMMENT ?
    Une fois inscrit, chaque jour, vous allez recevoir un nouveau paquet de cartes. Ouvrez-le comme s’il s’agissait du match de votre vie. Ce paquet peut contenir LA carte que vous espériez. Ou quelques doublons. Toujours des pépites. Et parfois des nouvelles importantes.
    Pour compléter rapidement votre collection, sans attendre l’arrivée quotidienne d’un nouveau paquet, plusieurs options de jeu s’offrent à vous. La plus efficace : le partage. Car Hors-jeu croit au partage, aux centres de formation et à la société de contribution. Pour échanger vos cartes, toutes les tactiques sont possibles : par courriel, par lien, par Facebook, par Reddit, par Twitter, sur notre forum, par SMS, de vive-voix. Vous trouverez toutes ces possibilités à droite de chacune des cartes.
    Plus vous échangez de cartes, plus vous augmentez vos chances de récupérer de nouvelles cartes. Les trophées vous indiquent où vous en êtes au score. Attention, certaines cartes sont plus rares que d’autres. Vous ne pourrez les partager qu’un petit nombre de fois, ce qui les rendra plus difficiles à récupérer. Bon match !


  • Pas mal de boulot pour faire évoluer Flip-Zone (#SPIP, #HTML5, #responsive…) :
    http://www.flip-zone.com

    Le premier but est de faire une page d’accueil avec un immense image, façon « plein écran » (particulièrement spectaculaire sur une grande tablette…) :

    Il y a plusieurs aspects techniques intéressants, ici.

    (1) D’abord ce n’est pas réellement plein écran, comme j’ai pu le faire sur certains sites : c’est simplement qu’il y a deux proportions d’images. Une version horizontale si l’écran est horizontal, et une version verticale si l’écran est vertical.

    Quand j’essaie de réellement « remplir » l’écran lui-même, il y a plusieurs problèmes :
    A. Ça me fait des maquettes aux proportions aberrantes, avec ces gens sur PC aux écrans très horizontaux, la barre de menu au dessus, et des saloperies qui font qu’au final, on doit calculer une maquette en 1365x300 pixels…
    B. Techniquement, l’image qui s’affiche là-dedans à des dimensions inconnues, et donc je ne peux pas choisir l’image par feuille de style, mais en attendant que Javascript démarre après le rendu du DOM. Donc pas de <picture>, ce qui est très problématique désormais.

    Du coup, cette version propose différentes tailles d’images, de résolutions (écran Retina), et de proportions (horizontal, vertical) en fonction sur support, et dont les dimensions sont directement connues avant même l’affichage de la page ; donc accessibles en CSS et media queries, donc nativement avec la balise <picture>. La grande image de Une est donc directement gérée par une seule balise dans un gros <picture>. C’est donc fait avec mon #plugin Image responsive :
    http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive

    La grosse particularité de cette page, c’est d’avoir un effet de profondeur, avec le mannequin qui se « détache » du fond, avec en dessous le logo Flip-Zone qui apparaît. Certes j’ai bien un PNG dans l’espace privé avec le mannequin détouré, mais ce n’est surtout pas ce que j’affiche sur le site public (avec des images de cette taille, un tel PNG ferait un fichier monstrueux). Ce que j’affiche, c’est exactement le JPEG déjà utilisé « en dessous », mais avec un masque de détourage qui est une image en niveaux de gris (calculée rapidement en PHP à partir de la couche alpha du fichier PNG). Et pour réussir à afficher une image JPEG avec un masque de détourage dans le HTML, je fais un petit montage en SVG. (De fait, au lieu d’utiliser un JPEG de fond plus un gros PNG par dessus, j’utilise le JPEG de fond, je réutilise le même fichier JPEG par dessus, en le détourant avec un JPEG en niveaux de gris de taille réduite.)

    Ce qui amène à une autre difficulté : il faut que cette <image> dans le SVG soit elle-même responsive (la même que le <picture> de l’image de fond), ce qui n’est pas possible directement (même avec des CSS, je n’ai pas réussi à contrôler l’image qui s’affiche à cet endroit). Solution : je fais le <image> du SVG avec rien.gif et j’y insère en Javascript le résultat de ce qui s’affiche dans le <picture>. De cette façon c’est la <picture> nativement responsive qui gère le choix du bon fichier. J’ai abordé ça ici :
    http://seenthis.net/messages/479467
    Et la méthode pour aller chercher le currentSrc de l’image responsive :
    http://seenthis.net/messages/470853

    Même topo, en fait, pour l’image du masque de détourage en niveau de gris, c’est récupéré d’un <picture> (que je cache). Astuce ici : l’image du masque est deux fois plus petite que l’image affichée, parce que je n’ai pas besoin d’être ultra-précis à cet endroit.

    Et la dernière difficulté avec ce SVG, c’est que je ne peux pas changer dynamiquement ses proportions (fixées par la viewBox). Solution pour l’instant : il y a deux SVG dans la page à cet endroit : une avec les proportions horizontales et une avec les proportions verticales, et leur affichage est contrôlé par média queries. En dehors du « texte » des balises du SVG surnuméraire, ça ne pèse pas plus lourd, puisque de toute façon c’est le même contenu (tiré des <picture> ailleurs dans la page) qui y est inséré dynamiquement), la seule différence étant la viewBox « en dur » des deux SVG…

    (2) Auparavant l’aspect responsive des menus supérieurs était géré de deux façons :
    – sur un écran pas trop étroit (petite tablette), les derniers éléments à droite (ceux qui « dépassent » de l’écran) étaient placés dans un petit menu déroulant ;
    – sur tout petit écran, remplacement par un menu hamburger et une navigation « cachée » dans un slider à gauche de l’écran.

    C’est désormais remplacé par un menu horizontal qui dépasse (si nécessaire) de l’écran, et qu’on peut scroller automatiquement horizontalement. On verra bien si c’est efficace.

    Ah, un gain notable : comme je n’ai plus de gestion d’un menu « hors page » avec décalage complet de la page « vers la gauche », je n’ai plus besoin de placer toute la partie scrollable de la page dans un élément spécifique (en scroll:auto) alors que le body n’était plus scrollable. Mine de rien, ça provoquait parfois des bugs d’affichage lors du scroll (notamment sur pages longues, notamment sur Safari). Là je reviens à un très traditionnel scroll sur le <body> de la page, et je n’ai plus ces bugs bizarres au scroll.

    (3) Dans la précédente version de la page d’accueil, le but était d’avoir une page très courte. Mais ça ne semble plus trop la mode (les magazines font des pages d’accueil à scroll quasi-infini), et surtout parce qu’on veut mettre en avant le fait qu’il y a des articles désormais (en anglais essentiellement), le choix est désormais inverse, avec une page très longue.

    En revanche, calculs amusants (dans les boucles SPIP) pour alterner les articles (un article de temps en temps) et les collections de photos (parfois plusieurs par jour). Et essayer de conserver une certaine construction logique pour les photos (par Couture/Prêt à porter/Mariage…, et par saisons…).

    Pour le poids, une possibilité était de charger la longue page (sous la grande image) en "ajaxload" (on charge la page avec juste le haut, et dans un deuxième temps on lance le chargement du bas de page). En pratique ça donne des résultats très désagréables, notamment quand on fait « back » vers la page d’accueil (on perd le positionnement dans la longue page). De la même façon, mon plugin d’images responsives permet de les gérer en lazy load, mais ça ne me semble plus utile : ça bloque le preloader et ça fait un effet désagréable quand on revient sur la page déjà en cache.

    En pratique, j’ai l’impression que les navigateurs récents se débrouillent très bien tous seuls pour gérer les chargements et la mémoire si on utilise directement la balise <picture>.

    Faudra voir à l’usage.

    (4) La construction de la liste essaie de grouper les collections de photos de manière logique, notamment par saisons (genre : « Printemps-été Automne-hiver 2016-2017 ») :

    Cette partie a un peu les mêmes principes que le haut de page : effet de « transparence » sur une partie détourée d’une image, géré via un morceau de SVG qui évite de balancer un PNG ; et slider horizontal automatique pour le responsive.

    Ah, je n’ai pas évoqué comment faire des liens qui s’affichent « en dessous », mais tout de même cliquables (et qui apparaissent au survol ou au clic). Et ça se gère directement en CSS sans Javascript. C’est un vieux truc que j’utilise depuis longtemps : il y a en réalité deux fois le même contenu, parfaitement superposés (par exemple l’ensemble des vignettes, ou le menu de navigation supérieur…). Et la version du dessus est masquée, et n’apparaît qu’au survol (ou au clic). L’« astuce » importante est que l’élément est masqué uniquement en avec opacity:0, et devient visible avec opacity:1 ; si on jour avec display, ça ne fonctionne plus correctement en tactile, puisque le premier clic sera intercepté pour faire le changement d’affichage (alors que le changement d’opacité se fait sans désactiver le touch).

    (4) Des petits effets de pseudo 3D :


    Au survol de certains éléments (les liens vers les vidéos), il y a un effet de surgissement 3D avec une petite animation. Ce qui est marrant, c’est qu’il n’y a rigoureusement aucun Javascript pour gérer ça, c’est purement CSS.

    J’aurais pu systématiser ces effets, mais ça oblige tout de même à recourir à mon « truc » de masque de détourage en SVG, un peu lourd, puisqu’il faut tout de même une seconde image (le masque en niveau de gris) pour chaque. Et puis graphiquement ça aurait un peu tourné au cirque, et j’essayais plutôt d’introduire de la variété dans cette longue liste.

    (5) Ça devrait fonctionner presque entièrement sans Javascript et directement au chargement de la page en CSS, y compris les diverses petites animations de survol. Avec les progrès des navigateurs, à l’affichage ultra-fluide, les pré-loaders, etc., c’est devenu très important d’avoir la page entièrement construite dès le premier affichage, sans calculs Javascript. L’effet de « fluidité » est vraiment important. (Tu me diras que ça a toujours été important, mais a. on ne pouvait pas toujours faire autrement, b. les progrès de fluidité d’affichage des navigateurs rendent les pages « pas très fluides » vraiment perceptibles).

    (6) Un peu partout (notamment en énorme sur le haut de page), j’ai le logo Flip-Zone qui apparaît et qui change de couleur en fonction de l’environnement. Auparavant je faisais autant de fichiers graphiques (PNG) que nécessaire. Maintenant c’est du SVG directement intégré dans le DOM, et colorisé par feuille de style. C’est une astuce que j’utilise de plus en plus fréquemment (ça permet notamment de changer la couleur d’une icone non seulement en fonction du contexte, mais tout bêtement au survol d’un lien hypertexte).

    (7) Sinon, ce n’est pas totalement nouveau, mais les pages des « articles longs » sont pas mal (encore une fois, c’est du SPIP), notamment avec ses images installées sur une même ligne, plus large que la colonne de texte, et positionnées de manière responsive :
    http://www.flip-zone.com/Caftan-silhouettes
    Celle-ci est plus marrante, parce que l’effet de « lignes » fonctionne avec un mélange d’images et de vidéos, et l’image finale en fond d’écran (tout en bas de page) :
    http://www.flip-zone.com/Nicolas-Jebran-5957


  • Internet Explorer 11.0.9 et #seenthis ne s’aiment pas, mais pas du tout.

    J’ai pris un joli Lenovo Ideapad avec écran tactile et Windows 8.1 pour voir commenr le web se présente au commun des consommateurs. Je constate que l’état de seenthis/#SPIP est accablant. Il est prèsque impossible de participer aux discussions.

    D’abord on a l’impression que les commentaires ne sont pas enrégistrés parce qu’une foi qu’on appuié sur le bouton enrégistrer il ne se passe plus rien. On voit apparaître son commentaire seulement une fois la page rechargée.

    Impossible d’éditer ou de supprimer notre commentaire, les liens respectifs sont et restent invisibles. Après plusieues essais je remarqe qu’ils apparaissent tant que j’appuie sur la bordure inférieure de l’article, mais dès que j’éloigne mon doigt ils se cachent à nouveau.

    Dommage, il faut d’abord passer un cours d’apprentissage internet avancé avant de pouvor utilser #seenthis. Je crains que ce soit ce genre de détail qui nous enferme dans un petit monde contestataire composé de gens qui aiment tout prendre en mains, bricoler des trucs et relever les défis.

    Est-ce que c’est difficile d’améliorer ces détails ?

    #bug #html5 #css #dom #Internet_Explorer


  • h5ai · modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee
    https://larsjung.de/h5ai

    h5ai is a modern file indexer for HTTP web servers with focus on your files. Directories are displayed in a appealing way and browsing them is enhanced by different views, a breadcrumb and a tree overview. Initially h5ai was an acronym for HTML5 Apache Index but now it supports other web servers too.

    #Arborescence #HTML5 #Répertoire_(informatique) #Serveur_web #Tri_arborescent


  • Important pour les amateurs de #HTML5 : avec les récentes mises à jour iOS 9.3 et OSX 10.11.4, les nouvelles versions de Safari comprennent enfin la balise <picture> qui permet de gérer des images #responsive (c’est-à-dire qu’on ne charge pas la même image selon les dimensions ou l’orientation de l’écran).

    C’est important parce que c’est le dernier gros navigateur à adopter cette balise, et c’est d’autant plus important, c’est que si on s’enquiquine à faire des images adaptées à l’affichage sur smartphone, évidement Safari pour iOS est l’un des principaux concernés.

    Et pour rappel, pour gérer ça automatiquement dans #SPIP, j’ai mon chouette plugin image responsive :
    http://seenthis.net/sites/328805
    http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive


  • On lance (#shameless_autopromo) un site en une page : Zone Capacity
    http://zonecapacity.com

    #SPIP #HTML5 #responsive… et ça utilise une partie de mes outils de #longform (formes longues).
    – Une originalité est l’insertion de SVG qui s’animent « tout seul » quand on scrolle.
    – Il y a aussi mes portfolio présentés sous forme de lignes dans lesquelles toutes les images adoptent la même hauteur tout en occupant toute la largeur de l’écran (quand c’est possible). Cette partie est évidemment responsive.


  • Lancement du premier épisode de la BD en ligne « Le Portrait d’Esther », « une bande dessinée numérique de Romain Bonnin et Pierre Jeanneau », consacrée aux biens juifs spoliés durant la guerre, pour le compte des Musées d’Angers :
    http://portrait-esther.fr

    C’est évidemment du #SPIP #HTML5 #responsive. Mais la grosse nouveauté ici, c’est la gestion d’une bande dessinée animée (« turbomedia », mélange de BD statique et d’animation) avec un outil que j’ai développé.

    Le principe de cet outil est de permettre d’ajouter des « scènes » (ou des « cases » si c’est une BD) dans les articles de SPIP, et à chaque scène d’ajouter (par glisser-déposer) des « couches » qui s’empilent les unes au-dessus des autres (façon Photoshop). Ça donne par exemple ce genre d’interface :

    La scène a une durée qui définit la durée des animations de l’ensemble des couches. Chaque couche a une situation de départ et une situation finale, le système fera l’animation en interpolant entre le départ et l’arrivée, éventuellement avec un délai défini pour chaque couche (par exemple l’apparition de plusieurs phylactère les uns après les autres).

    Les éléments qui peuvent être animés sont : position horizontale, position verticale, zoom, flou, opacité, visibilité.

    C’est très succinct parce que l’idée n’est pas de faire un outil d’animation de dessin animé, mais d’animer les scènes dessinées par l’illustrateur. C’est donc un outil conçu pour être simple pour que le dessinateur puisse lui-même concevoir les animations. Mais c’est déjà à mon avis plus amusant que les outils de « turbo-media » que j’ai vus pour l’instant (qui sont plutôt une succession d’images façon « click-click-click »).

    Bon, ce premier épisode n’est pas encore extrêmement animé, ce que j’ai vu de l’épisode II l’est déjà plus. On est en train d’apprendre ce qu’on peut faire avec l’outil (« nous » étant le dessinateur, le scénariste, Mosquito et moi) et quel équilibre trouver entre la narration « classique » et l’animation.

    Avec Emmanuel, on est très curieux d’avoir des retours là-dessus, des idées, tout ça. On se dit qu’il y a des choses intéressantes à faire avec ça, mais on n’a pas encore les idées très fixées.

    Sinon, un détail rigolo, c’est la première fois qu’on utilise mon réglage « Ken Burns » sur une image intégrée dans l’article. Ici sur le portrait de Pétain, effet de zoom lent :
    http://portrait-esther.fr/article11.html
    Le raccourci pour faire ça est :
    <img11|right|large|largeur=360|kenburns=1.4>

    • ça marche super bien, sur la bédé, les petites ruptures, les petits déplacements et décalages, l’arrivée des bulles dans un second temps.

      J’ai remarqué qu’en grand (grand) écran, le temps de chargement des images fait qu’on a d’abord l’image floue pendant un délai trop long… tu devrais peut-être précharger ?

      PS : pense à régler le favicon

    • Superbe !

      Pas de problème avec Chrome (47 me dit gg) que j’ai ouvert parce que j’en avais avec Safari (un vieux, 6.1.6, le tout sous MacOS 10.7.5) chargement un peu long, parfois affichage partiel de l’image).

      Du point de vue de l’interface, ce serait bien que le lecteur puisse savoir a priori s’il y a une animation ou pas.

      Dans les 2 environnements, je n’ai pas d’image du maréchal :-(
      Heureusement, j’ai (un bout) du son
      http://www.marechal-petain.com/sons/message30101940t.mp3

    • @azerttyu Oui, la présentation « mode planche », c’est une idée à développer.

      Je l’avais proposé, mais ce projet-là ciblait spécifiquement les téléphones portables, en fait. Du coup pas de mode planche. De plus, on se tâtait pour introduire différentes sortes de transitions entre les planches : actuellement c’est un fondu enchaîné, mais on se disait qu’on pourrait avoir différents effets (slide vers la gauche, slide vers le bas…). Et dans ce cas, le mode planche pouvait entrer en conflit avec des enchaînements de cases plus spécifiques (genre : on prévoit un slide vers le bas pour passer à la case du dessous, en utilisant un élément commun aux deux cases, histoire de faire un effet marrant, mais quand on passe en mode planche l’effet est tout cassé…).

      Bref : sur ce projet on l’a écarté, mais c’est tout de même quelque chose à voir.

    • @simplicissimus Il y a une petite animation (très discrète) en haut au centre de l’écran qui dure le temps que se déroule l’action. Pas d’animation si pas d’action.

      C’est pas super-visible, parce que sinon ça devient trop envahissant au détriment de la lecture de la BD. (Surtout sur un téléphone portable, on est quasiment sur le dessin.)

    • Superbe ! Nickel sur Chromium mais même souci que fil et intempestive sur Firefox (c’est super lent et je n’ai pas l’animation qui indique que ça charge) (Firefox à jour sur OSX).

    • Super intéressant ! Je serais curieux de voir l’outil côté privé.

      Pour avoir participé à une expérience turbomédia de mon côté je suis très curieux de voir apparaître ce genre d’outil, et sous spip en plus !

      Par contre comme il a été dit, j’ai buté de première abord sur le préchargement trop long, je ne sais pas si c’est prévu mais j’ai démarré sur mon ordi en plein écran directement et les anims saccadent bien chez moi... Je dois tester sur mon smartphone pour voir ce que ça donne.

      Niveau narratif je trouve les fondus pesants et inutiles. C’est un code cinématographique particulier qui marque l’ellipse, le passage d’une période à une autre... Donc, restons simple !!

      Avec ma petite expérience je peux confirmer que ce mode de lecture (le turbomédia et toutes ses formes) pousse le lecteur à cliquer assez rapidement (et c’est bien addictif pour le coup). Il faut donc impérativement que la machine suive et toute attente pour cause de chargement devient insupportable (si on reste dans l’esprit du turbomédia). La règle est qu’une anim ne doit pas dépasser 3 secondes dans ce cadre, c’est le max avant le prochain clic.

    • Très intéressant mais je ne sais pas si je profite de tout. Techniquement
      J’ai un vieux mac en 10.6.8 dont le processeur a crié très fort avec !
      – Firefox 43.0.4 ça bloque sur le premier écran qui reste en fond noir et où rien n’est cliquable.
      – Safari 5.1.10 c’est mieux mais les fondus sont par à-coups.
      – Opéra 12.16, le menu en colonne gauche reste ouvert et ça fait des sauts, le panneau en glissé horizontal n’existe pas (41).
      – Chrome, ok.

      Je suis curieuse du processus mais j’ai pourtant quelques critiques. Je comprends que c’est l’effet expérimental qui fait qu’entre BD/Animation/Internet/Interactivité/Films muets/ ça fait beaucoup à connaitre comme codes narratifs qui s’entrechoquent (6) mais je trouve pas ça très étonnant au final, comme si un code annulait l’autre. Il ne doit pas être facile que les « animations » soient pertinentes pour éviter notamment le renforcement de la linéarité du récit (un comble sur du numérique) comme avec une deuxième case qui est noire puis se remplit après (31). Le mode de lecture restreint l’action du lecteur au clic avancer/reculer, il pourrait cliquer pour autre chose peut-être ? Concernant les fondus, je me souviens que dans le montage film certains monteurs interdisaient d’utiliser les fondus de façon systématique parce que c’est trop facile et que ça ramollit, mais j’ai l’impression que c’est dut à mon ordi qui passe les panneaux en fondus. Une des scènes que je trouve la plus réussie est celle (70-73) où Jakob doit prendre la décision de se séparer du tableau.

      Ah, et aussi ce serait chouette d’avoir la possibilité de rejouer une animation avec un bouton recharger.

      Merci en tout cas de faire toutes ses recherches, j’avais abandonné avec regrets Director et Flash parce qu’ils ne correspondaient pas à une ligne politique aussi intéressante que celle de SPIP et j’espère retrouver des envies grâce à tes nouvelles idées !

    • il a fallut que je m’y reprenne à plusieurs fois pour que tout charge. J’avais l’impression à vos commentaires que je loupais quelque chose. Ce qui est perturbant c’est que je ne sais pas quand il faut que j’attende que ça charge ou quand je peux avancer dans l’histoire car c’est une image seule... J’ai aussi des pages blanches, je ne sais pas si c’est fait exprès. Puis cela clignote à partir des pages 68/69. A lire les posts précedents, il doit y avoir du son, que je n’ai pas. Je suis sous firefox 43.0 sous linux mint.