Le Blog http://blog.flds.fr/posts/ Le blog laboratoire de F.L.D. Studio Thu, 23 May 2019 15:01:02 -0400 60 visiImg

Objet : visiImg.php

Version du 20/03/2018

Dépendance PHP : SimpleImage.class.php ( https://gist.github.com/miguelxt/908143  )

Facilités pour plugin javaScript : 

La classe visiImg.php permet de redimensionner si besoin des images et de les afficher. C'est une classe enfant de SimpleImage.class.php.

La redimenssion prend en charge deux types de concepts :

  • Redimension classique : l'image est redimensionnée avec les valeurs demandées.
  • Redimension responsive : l'image est redimenssionnée en plusieurs tailles afin de fournir une collection pour le balisage HTML responsif de type srcset.

Affichage de l'image :

La classe render()  redimenssionne et affiche les images avec la prise en charge de la technique du LQPI ( gif transparent ou petite image ) pour l'affichages d'une image à l'aide du plugin javaScript lazyload , ainsi que le balisage spécifique pour le navigateur Internet Explorer ( <=11 ) qui ne supporte pas les images responsives ( pas de srcset )

Initialisation de l'objet :

include("./somewhere/SimpleImage.class.php");
require_once("./class/VisiImg.php");
$vImg = new VisiImg\VisiImg();

Méthode d'affichage

Image non redimenssionnée.

Par défaut le dossier des images non redimenssionnée est :  ./images/

Pour le modifier utiliser la méthode : ->repImg('./dossier-des-images/');
Pour le reseter : ->repImg();

Méthode : ->render( $param1, $param2, $param3, $param4 = 0);

Affichage image, balisage HTML classique :

  • Paramétre 1    : Classe CSS pour img, minimum = ''
  • Paramétre 2 * : nom-fichier.ext 
  • Paramétre 3 * : texte alternatif
  • Paramétre 4    : Option pour le placeholder :
    1. 0 : valeur par défaut : pas de placeholder.
    2. 1 : retourne un gif transparent de 1x1 pixel.
    3. xx: redimensionnent une image pour la fournir encodée en Base64

Exemple : 

Affiche une image : balisage classique

 echo $vImg->render( '' , 'image.ext' , 'text-alternatif'' ); 

Affiche une image : balisage lazyload  (méthode LQPI de lazyload )

echo $vImg->render( 'lazyload' , 'image.ext' , 'text-alternatif'',  1 ); 

Affiche une image : balisage lazyload avec un placeholder (méthode LQPI de lazyload ), image en transparence avec la class : lazyload

echo $vImg->render( 'lazyload' , 'image.ext' , 'text-alternatif'',  20 );
Image redimenssionnée simple.
echo $vImg->render ( [
//'id' => 'monId', // si besoin d'un ID
'repImg' => './images/', // par defaut :  './galerie/'
'nomFic' => 'img11.jpg',
'width' => 200, // largeur demandée
'height' => 200, // hauteur demandée
'paysage' => 'crop', // méthode découpage
'portrait' => 'crop', //  resizeToWidth, resizeToHeight, resize, crop, cropFromTop
//'placeholder' => 20, // facultatif,1 ou x ( mini 6 )
'alt' => 'Mon Image',
'flagDestroy' => false // Supprimer image true/false, false par defaut
] );

Image redimenssionnée responsive.
echo $vImg->render ( [
'repImg' => './images/',
'nomFic' => 'img11.jpg',
'width' => 400,
'height' => 400,
'paysage' => 'crop',
'portrait' => 'crop',
//'placeholder' => 20,
'responsive' => 'full', // ou 'medium'
'sizes' => [
360 => 100,
480 => 100,
640 => 100,
820 => 100,
1300 => 100,
1500 => 100,
2000 => 100],
'class' => 'lazyload',
'alt' => 'Mon Image',// Affiche image imédiatement apres redim
'flagDestroy' => false
]);
Balisage lightBox

La classe renvoit une collections d'informations à l'aide de la méthode : html( 'Nom-de-la-clé ') utile pour concevoir le balisage HTML de l'affichage de l'image et le balisage HTML pour le plugin JS baguetteBox.

$img = $vImg->render ( [
'repImg' => './images/',
'nomFic' => 'img11.jpg',
'width' => 400,
'height' => 400,
'paysage' => 'crop',
'portrait' => 'crop',
//'placeholder' => 20,
// 'responsive' => 'full', // ou 'medium'
'sizes' => [
360 => 100,
480 => 100,
640 => 100,
820 => 100,
1300 => 100,
1500 => 100,
2000 => 100],
'class' => 'lazyload',
'alt' => 'Mon Image',// Affiche image imédiatement apres redim
'flagDestroy' => false
]);
echo '<a href="'.$vImg->html('baguette').'">';
echo $img;
echo '</a>';

Nouveaux paramétres Septembre 2018 version 1.2 :

preserveHeight :  true/false, preserver la hauteur de l'image (utile pour les map responsive en background )

Nouveaux paramétres Aout 2018 version 1.1 :

Pour les images responsives, il existe deux nouveaux paramétres :

  • flagOptimise : true par défaut / false si on souhaite fabriquer des images de tailles plus grandes que l'image originale ( utile pour les animations si utilisateur upload des images plus petites que le slider
    )
  • mediaQueries : Array des media querie personnaliés à utiliser , exemple :  [820,1300,1500,2000] ( utile pour l'affichage de miniature dans galeries type https://github.com/guoyunhe/flexbin )

Fonctions publiques

Valeurs retournées par : html('xxx') :

$vImg->html('xxx') ;

Retourne le balisage HTML :
->html('html') ;//url complette dernière image (la plus grande pour dataset et IE)  src,srcset et sizes
->html('src')
->html('srcset')
->html('sizes')
->html('baguette') ; // balisage responsif pour baguetteBox / idem ->hrefB(); 
->html('placeholder');// Image pour le placeholder (img ou base64)
->arrHtml['nomFicNew'] = nom netoyé et extension du fichier

Valeurs retournées par : flagIe()
->flagIe(); // Navigateur Internet Explorer <=11 : true/false
Valeurs retournées par : orientation()
->orientation(); // 'portrait' / 'paysage'
]]>
Sun, 04 Mar 2018 07:48:00 -0500 http://blog.flds.fr/posts/visiimg/ http://blog.flds.fr/posts/visiimg/
Ressources 2018 30 secondes de CSS

30 secondes de JS

Composants HTML et CSS et ARIA

Composants Responsifs

GitHub : https://github.com/trending

Divers

Prompt pour console

Voir la partie Varaible CSS et pseudo class

Date dans calendrier SVG

Upload file

TurboLink : https://github.com/turbolinks/turbolinks

  • https://dogstudio.github.io/highway/
  • https://css-tricks.com/updating-a-css-variable-with-javascript/
  • https://drome.js.org/
  • http://www.vuetoolbox.com/
  • https://alessandrodias.github.io/taste-your-scroll/
  • https://mciastek.github.io/sal/
  • https://github.com/lusakasa/sqorn
  • https://codepen.io/ainalem/full/YOraaR/
  • https://blog.bitsrc.io/customise-radio-buttons-without-compromising-accessibility-b03061b5ba93
  • https://chriscavs.github.io/t-writer-demo/
  • https://progressivetooling.com/
  • https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/
  • https://pepsized.com/beer-slider-responsive-accessible-before-after-slider/
  • https://vscodethemes.com/
  • https://blog.halolabs.io/understanding-javascript-objects-d31cd24ca60f
  • https://vscodecandothat.com/
  • https://yoksel.github.io/svg-filters/#/presets/dancingStroke
  • https://github.com/you-dont-need/You-Dont-Need-Momentjs
  • https://frontendnews.io/editions/2018-08-15-simple-camera-component
  • https://splitting.js.org/
  • https://medium.freecodecamp.org/time-saving-css-techniques-to-create-responsive-images-ebb1e84f90d5
  • https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/
  • https://css-tricks.com/using-feature-detection-to-write-css-with-cross-browser-support/
  • https://www.youtube.com/watch?v=DCZdCKjnBCs
  • https://www.smashingmagazine.com/2018/09/css-shapes/
  • https://codepen.io/shshaw/pen/pOVKjb
  • https://www.youtube.com/watch?v=eG0-3aWJ3Iw
  • https://scroll-out.github.io/
  • https://github.com/Paul-Browne/lazyestload.js
  • https://fineuploader.com/demos
  • https://github.com/ApoorvSaxena/lozad.js  <-------
  • https://www.sarasoueidan.com/blog/toggle-switch-design/
  • https://github.com/terkelg/prompts
  • https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082
  • https://glidejs.com/docs/components/breakpoints/
  • http://npm.anvaka.com/#/view/2d/parcel-bundler
]]>
Sat, 03 Mar 2018 05:47:00 -0500 http://blog.flds.fr/posts/ressources-2018/ http://blog.flds.fr/posts/ressources-2018/
PHP : XDEBUG xdebug

Debuger les scripts PHP avec XDEBUG

Mode opératoire pour le debugage des scripts .PHP en local dans un environement WAMP et VISUAL STUDIO CODE.

Etape 1 : le serveur PHP WAMP SERVER

Par défaut xdebug sous windows est déjà installé. Pour le vérifier, charger la homepage de wamp server et vérifier que xdebug est chargé.

Vérifier la configuration de xdebug : charger dans la catégorie outil de cette page : phpinfo() et vérifier la ligne : xdebug_remote_enable qui doit être à on

Pour le configurer il faut modifier le fichier php.ini et tout en bas créer la ligne :

  • xdebug.remote_enable = on

Arrêter le serveur PHP et le relancer

Etape 2 : l'editeur VISUAL STUDIO CODE

Vérifier dans les extensions si xdebug est installé.

Si ce n'est pas le cas, installer l'extention xdebug

  • Cliquer sur le bouton : debug
  • Dans la liste des configurations choisir : php
  • Un fichier de configuration .json est automatiquement crée

Utiliser XDEBUG

Placer des points d'arret dans le script

Lancer le mode debug de visual studio

Appeller le script dans le navigateur avec un paramétre type get : 

?XDEBUG_SESSION_START=vscode

La video de graphikart : xdebug exécution pas à pas

]]>
Fri, 26 Jan 2018 03:45:00 -0500 http://blog.flds.fr/posts/php-xdebug/ http://blog.flds.fr/posts/php-xdebug/
Oh my JS Liste des micros fonctions : scripts JavaScript

Dév. interne :  ℱℒ

Micro Librairie Version Rôle Mot clé 
 avisPage.js 1.0 Affichage des avis avisPage
 bkgCycle.js 3.8 Slider ul-li textes et images bckCycle
 mnuMob.js 1.1 Menu pour mobile mnuMob
 revealEl.js 1.0 Affiche images sur evenement revealEl
 validForm.js 1.0 Validateur de formulaire intégrée dans formulaire

Fonctions JS

Dév. externe

Micro Librairie Version Rôle  
   
baguetteBox.min.js 1.8.2 LightBox 
inview.js 0.6.1 Evenements sur Elements entrent/sortent du ViewPort 
lazyload.js  Chargement des images 
pace.js  Barre progression affichage des ressources 
van11y-accessible-accordion-aria.js 1.0.5 Accordeon 

Google Map

https://maps.googleapis.com/maps/api/js?key=xxx

 avisPage.js

Option 1 : pas de paramétres : 

    avisPage();
Option 2 : Paramétre class CSS de transition sur groupe visible :
        avisPage({'effetCss':'slideFromBottom'});
    

bkgCycle.js : 

http://preprod.visicod.pro/test/bkgCycle/build/

Gestion des animations CSS pour la transition des images Toutes ces classes sont facultatives.
  • cssIntro : class CSS pour afficher la première image
  • cssIn : class CSS pour introduction des images ( image suivante )
  • cssOut : class CSS pour sortir les images ( image suivante )
  • cssInBack : class CSS pour introduction des images ( image précédante )
  • cssOutBack : class CSS pour sortir les images ( image précédante )
  • cssIn et cssOut flagCss = false (defaut) : synchroniser les classes = true : activer les classes l'une après l'autre
Au total 5 combinaisons de gestions des classes CSS - supBackground : boolean (false par défaut), indique si il faut supprimer le background après l'affichage de la première image. Si oui indiquer le nom de la div qui contient le background.

        var arrImages = [ 'img/imgFashion.jpg', .... ]; var sliderImg = new bkgCycle( { 'arrImages' : arrImages, // Array des images
        (si images en background/sinon texte seul) 'idContainer' : 'bkgContainer', // defaut : bkgContainer (ID) 'prefix' : 'bkg',
        // defaut : bkg ( prefix ID des li ) 'modeSlider' : true, // defaut : true (mode slider) / false 'tempo' : 8000, // defaut
        : 8000 (8 secondes) 'idLoader' : 'bkgLoader', // defaut : bkgLoader (ID) ou autre / false : pas de loader 'whenLoaderHide':'first',
        // defaut : 'first' sup loader après affichage première image 'last' : après chargement de la dernière 'supBackground' :
        false, // defaut : false (supprimer l'image du background après première image affichée) ou ID de la div contenant le background
        'cssActived' : 'bkgActived', // defaut : bkgActived ou 'nom classe CSS' pour transition sur l'image active 'cssIntro' : 'bkgCycleIntro',
        // defaut : false ou 'nom classe CSS' affichage première image 'cssIn' : 'bkgFadeIn', // defaut : false ou 'nom classe CSS'si
        enchainement d'animation (si différent de cssActived) 'cssOut' : 'bkgFadeOut', // defaut : false ou 'nom classe CSS' si enchainement
        d'animation (si différent de cssActived) 'cssInBack' : 'bkgFadeIn', // defaut : false ou 'nom classe CSS' sortie mode back
        (retour arriere) 'cssOutBack' : 'bkgFadeOut', // defaut : false ou 'nom classe CSS' sortie mode back (retour arriere) 'flagCss'
        : false, // defaut : false. Drapeau gestion des animations CSS glbCssIn et glbCssOut (synchrones par défaut) 
        'flagTouch'     : false,                // defaut : false. Drapeau de gestion du touch sur les écrans tactiles
'idPrev' : false,
        // defaut : false ou Id bouton navigation précédente (si navigation dans le slider) 'idNext' : false, // defaut: false ouId
        bouton navigation suivante (si navigation dans le slider) 'callBack' : function() { // defaut : false. Fonction anonyme de
        callBack exécutée à la fin des transitions ...code... } });
    

Gestion des animations CSS :

  • cssActived : Classe par défaut opacity de 0 à 1 (voir css li)
  • cssIntro : Classe pour affichage de la première image
  • cssIn : Classe pour introduire l'image ( image suivante )
  • cssOut : Classe pour sortir l'image ( image suivante )
  • cssInBack : Classe pour introduire l'image ( image précédante )
  • cssOutBack : Classe pour sortir l'image ( image précédante )
  • flagCss : Drapeau de gestion des animations cssIn et cssOut ( si existent)
  •  false : animation schyncronisées ( synchrones )
  •  true : animations enchainées ( asynchrones )

Dans le cas des animations asynchrone, si on veux supprimer l'effet de fondu, modifier le CSS du li, suprimmer opacity 0/1 et remplacer par display:none/block. Adapter classe .bkgCycle .bkgActived en conséquence (transition: opacity 0;)

Fonction de callBack : voir exemple avec affichage d'une légende pour la dernière image.

mnuMob.js

Option 1 : pas de paramétres : 

            mnuMob();
        
Option 2 : Paramétre effet CSS de transition sur groupe visible :
                    mnuMob({  idMnuMob : 'mnuMobBtn', /* Id du bouton menu : défaut : mnuMobBtn */  idMnuMobNav : 'mnuMobNav' /* Id du menu
                    déroulant : défaut : mnuMobNav */ });
                

revealEl.js

    var reveal = new revealEl( {   'idContainer': 'img-gal-container', // ID du container des images. img-gal-container    
    'cssHide' : 'cssHide', // Class pour cacher les images. cssHide     'cssShow' : 'foldFromLeft', // Class pour afficher les
    images.(paire) null     'cssShowOdd' : 'foldFromRight', // Class pour afficher les images.(impaire) null     'nbrEl' : 6,
    // Nbr d'image àafficher. 6     'uiMore' : 'uiMore' // ID du bouton/lien Interface : En voir Plus uiMore   } ); // Ecoute
    evement interface utilisateur bouton/lien : en voir plus document.getElementById('uiMore').addEventListener('click',function(e){
      e.preventDefault();   reveal.revealEl(); }); function f_redimensionnement() { var result = 6; if('matchMedia' in window)
    { // Détection if ( window.matchMedia('(max-width:600px)').matches ) { result = 4; } else if ( window.matchMedia('(max-width:400px)').matches
    ) { result = 5; } // Modification du paramétre de nombre d'élements à afficher reveal.nbrEl(result); } } // On lie l'événement
    resize à la fonction f_redimensionnement() window.addEventListener('resize', f_redimensionnement, false); // Premier test
    quand la page est chargée f_redimensionnement(); // Premier affichage reveal.revealEl();
]]>
Sat, 02 Sep 2017 10:47:00 -0400 http://blog.flds.fr/posts/oh-my-js/ http://blog.flds.fr/posts/oh-my-js/
La mosaïque version Flexbox Mondrian

Introduction

Parmis les utilitaires que j'ais eu à concevoir il en exite un baptisé mosaîque. Il s'agit d'une classe sous PHP qui calcule la taille que doivent faire chaque images pour participer à la création d'un motif toujours carré. Pour facilier sa mise en oeuvre j'ai aussi conçu un utilitaire AddOn sous JavaScript qui permet d'utiliser les nombreuses options de la classe et surtout in fine d'optenir le CSS AdHoc pour réaliser l'affichage de la mosaïque d'images.

Le but de ce post est de transformer la mosaïque qui fonctionne sur le principe CSS des éléments flottants en display flex lorsque la taille de l'écran à atteint la taille de l'élément parent de ce composant.

En utilisant le même balisage HTML et pratiquement les mêmes classes CSS que dans le post précédant qui relate de la création d'une galerie d'images fluides et responsives à l'aide du système d'affichage flexbox.

Points communs et différences

S'agissant d'afficher des images il existe de nombreux point communs entre ces deux systèmes de galerie d'images. Le premier point concernne le balisage HTML de représentation des galeries. Toutes deux sont contenues dans un élément parent ( wrapper ou container ) qui défini le système d'affichage des enfants ( les images ).

Galerie : Balisage HTML

Le container dispose d'un affichage de type flexbox et ses enfants (les ancres) sont définis avec des tailles en pourcentage ( Taux d'occupation d'une image et d'une marge au sein du container )

    <div class="img-gal-container"> <a href="https://feimosi.github.io/baguetteBox.js/img/1-1.jpg" data-caption="Galerie
    2 - Image caption"> <figure> <img width="320" height="188" src="http://lorempixel.com/320/188/people" alt="Description
    image" /> </figure> <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
    </a>

... autres images ....


Mosaïque : Balisage HTML

Le container dispose d'un affichage de type block et ses enfants (les ancres) sont surchargés avec les classes CSS qui guident leurs positionnements (left,right,taille,marge, etc...).

    <div class="img-gal-container"> <a class="mos-s1 fleft" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg"
    title="Galerie 1 - Image caption1 description dans title"> <figure> <img width="700" height="525" src="http://lorempixel.com/700/525/people"
    alt="Description image" /> </figure> <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
    </a>


Le style CSS

Le style d'affichage des images et des effets de hover,active, etc... sont identiques pour les deux systèmes. La principale différence vient du traitement des marges pour l'affichage de la mosaïque et bien sur les classes de positionnement flottant des images.

Lorque la taille du viewport à atteint la taille du container parent de la mosaïque les rêgles du media-querie vont modifier le type d'affichage du parent pour le basculer en mode flexbox ainsi que modifier la taille des enfants afin d'en afficher deux par rangée  et nous utilisons aussi la technique simplifiée des marges droites comme expliqué dans le post précédant. Nous supprimons aussi toutes les rêgles concernant le positionnement flottant des enfants.

Exemple fonctionnel

See the Pen Mosaic vers galerie flex by Du Marais (@DjF) on CodePen.

]]>
Sun, 02 Jul 2017 16:28:00 -0400 http://blog.flds.fr/posts/la-mosaique-version-flexbox/ http://blog.flds.fr/posts/la-mosaique-version-flexbox/
Galerie Images display Flexbox Galerie images flexbox

Introduction

De tous les 'composants' qui sont passés au display:flex ( menu,footer, gabarit de site, etc...) la galerie d'images à été le plus compliqué à mettre au point. Le cahier des charges de la galerie d'images est le suivant :

  • L'utilisateur administre sa galerie d'images , il charge et retire des photos à sa guise, nous ne savons pas à l'avance combien d'images seront affichées.
  • Les images peuvent être en mode portrait et en mode payasage.
  • Les images doivent occuper tout l'espace possible.
  • La galerie doit être responsive et doit donc s'adapter à plusieurs résolutions et tailles d'écrans.

En attendant le display grid qui sera la prochaine révolution en matière d'écriture du CSS nous utilisons le display flexbox qui constitu à ce jour la façon la plus simple d'aligner des éléments les un à coté des autres.

La taille des images

Pour une occupation optimale des images au sein de leur container j'ais conçus un utilitaire qui fait ce travail à ma place (;+). Il fournit la taille width et height d'une image ainsi que la marge de droite. Jusqu'a présent avec le display float que j'utilise il me permet de créer des vignettes à la taille exacte de mon besoin.

Avec le display flexbox et le responsive la taille des images ne doit plus être vue comme une définition exacte en pixels mais plutot comme un pourcentage de place utilisée au sein d'un container.

En effet la contrainte responsive de la galerie nous amméne à la considération suivante : 

Sur un écran de smartphone, considéré aujourd'hui comme ayant une largeur maximale de 320px nous allons afficher une ou deux images par rangée. Dans ce cas la largeur minimale d'une image dans une galerie sera toujours de 320px . Pour en placer plusieurs lorsque la largeur du viewport le permet il faut donc fournir à flexbox des tailles d'éléments non plus en pixels mais en pourcentage.

Exemple pour un container d'une largeur de 1200 pixels devant contenir 6 images avec une marge de 6px entre chaque on effectue le calcul suivant : 

 ( largeur d'une image en pixel / largeur container en pixel ) * 100

Pour les images :

  • ( 195 / 1200 ) * 100 = 16.25%

Pour les marges :

  • ( 6 / 1200 ) * 100 = 0.5%

La gestion des marges

La gestion des marges ou goutières peut être gérée de différentes façon avec flexbox. Sur le l'élément container de la galerie celui qui a le display flex, nous pouvons utiliser la propriété : justify-content.

La valeur space-between permet de disposer une marge autour de chaque images. L'inconvenient c'est que les images n'occupent plus tous l'espace du container. De l'espace est disposé à gauche de la première image de la rangée et à droite de la dernière.

La valeur space-around semble mieux correspondre à notre besoin, mais lorsque par exemple nous prévoyons une galerie de 4 images par rangée et que l'utilisateur en charge 6, la seconde rangée contient alors deux images avec un grand espace au milieu ( pas très esthétique )

Il nous faut donc gérer nos marges nous même. C'étais déjà le cas avec le display:float et comme avec le display float il nous faut gérer la marge droite de la dernière image d'une rangée. En supprimant la marge de la dernière image de chaque rangée nos images vont bien occuper tous l'espace de leur container et la marge ne sera pas modifiée en fonction du nombre d'images affichées.

Avec le display float on utilse une class (exemple .last) qui contenait la rêgle suivante : margin-right:0; Cette classe étais appliquée coté serveur lorsque le script PHP de création du balisage de la galerie devais afficher la dernière image de chaque rangée. Avec flexbox il n'est plus necessaire de le concevoir coté serveur car on peut désormais le faire coté navigateur à l'aide du CSS.

A l'aide du selecteur : nth-of-type(Xn) nous allons pouvoir supprimer la marge droite de la dernière image de chaque rangée. X = le numéro de la dernière image. Ainsi par exemple dans une galerie prévue pour 6 images par rangée, pour supprimer la marge de droite de la dernière image nous écrivons :

Dans cet exemple nous ciblons l'élément a ( enfant ) contenant les images du container flex des images : .img-gal-container

        .img-gal-container a:nth-of-type(6n){ margin-right:0; }
    
Dans cette exemple nous ciblons l'élément a (premier enfant) contenant nos images du container flex des images : .img-gal-container

Le responsif

Le dernier point de notre cahier des charges concerne les versions responsives de notre galerie. En utilisant une largeur en pourcentage nous avons déjà répondu à cette contrainte. Néanmoins afficher 6 images sur l'écran d'un smarphone les rends si petites qu'elles en deviennent illisiblent et surtout difficilement cliquables au vue de leur petites tailles.

Pour afficher moins d'images par rangée et donc des images plus grande il faut recalculer de nouvelles valeurs, pourcentage d'occupation d'une image et pourcentage de la marge droite en fonction de la nouvelle largeur de la galerie et du nombre d'image que l'on souhaite afficher.

Dans la partie media-querie de notre CSS nous allons pouvoir effectuer ces opérations. Pour la nouvelle largeur d'une image nous utilisons la propriété flex-basis qui indique la taille d'un enfant au sein d'un container flex. 

/* 600px */
  @media screen and (max-width: 37.5em) { .img-gal-container a{ /* 2 images par rangée */ flex-basis: 49.5%; margin-right:1%;
} }
    

Attention

Souvenons nous que nous avons supprimé précédement la marge droite de toutes les 6eme images des rangées. Cette fois nous n'en affichons plus que 2. Il faut donc rétablir la marge de droite des 6eme images avec la nouvelle marge calculée pour le media-querie et supprimer celle des secondes images.

Exemple 

/* rétablir la marge droite de toutes les 6eme images des rangées */ 
 .img-gal-container a:nth-of-type(6n){ margin-right:1%;
            } 
/* sup la marge droite de toutes les 2eme images des rangées */ .img-gal-container a:nth-of-type(2n){ margin-right: 0;
            }
        

Simplifier la gestion des marges

Cette technique permet de modifier le nombre d'images affichées par rangées. On peut ainsi passer par exemple de 4 images à 3 images mais comme on le voit ici elle implique de nettoyer les marges précédements positionnées et d'en recréer de nouvelles. A partir du moment ou on affiche deux images par rangée on peut gérer les marges plus simplement :

  • Modifier le positionnement des enfants dans le container parent à l'aide de la propriété : justify-content: space-between;
  • Supprimer toutes les marges droite des images, c'est flexbox qui se chargera de l'espacement entre les images.
  • Modifier de manière arbitraire et non plus à l'aide d'un calcul optimisé la taille de chaque enfant en rêglant leur taille à : 49,5%

Conclusion

Pour remplir les conditions de notre cahier des charges nous avons utilisés les techniques suivantes :

  • Container des images en display:flex; et avec la propriété align-items: flex-start; pour les formats portraits et paysages mélangés
  • Taille des images ( taille physique constante d'une largeur de 320 pixel ) exprimées en pourcentage d'occupation du container parent dans le CSS.
  • Taille des marges exprimées en pourcentage dans le CSS et supprimée sur la dernière image de la rangée.
  • Adaptation du nombre d'images à afficher en fonction de la taille du viewport et gestion des marges droites en conséquence.

Exemple fonctionnel

See the Pen Galerie Images FlexBox 2017 by Du Marais ( @DjF ) on CodePen .

Cerise sur le gateau, l'exemple utilisée ici modifie l'affichage sur smartphone ( media-querie : 400px ) en modifiant la rêgle du container parent en justify-content:space-between; et en modifiant la taille des images affichées celon une séquence de 1er image en taille maxi et répetition toutes les 5 images, ceci créant un rythme visuel sur les petits écrans.

Pour automatiser et personnaliser le plus possibe le CSS d'une galerie d'images fluides et responsives l'exemple ci dessus utilise des variables CSS ainsi que l'instruction calc().

Supports navigateurs

calc()

Variables CSS

]]>
Sat, 01 Jul 2017 05:41:00 -0400 http://blog.flds.fr/posts/galerie-images-display-flexbox/ http://blog.flds.fr/posts/galerie-images-display-flexbox/
LINKS - 03-2017 https://gibbok.github.io/animatelo/

https://dollarshaveclub.github.io/scrolldir/

https://github.com/developit/unfetch

http://scrollanim.kissui.io/

https://dixonandmoe.com/rellax/

http://t-scroll.com/  (ne fonctionne pas sous IE10, CSS compliqué)

https://css-tricks.com/fun-viewport-units/

https://medium.freecodecamp.com/how-to-get-the-most-out-of-the-javascript-console-b57ca9db3e6d

https://una.im/local-css-vars/

https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b

https://css-tricks.com/making-animations-wait/

https://css-tricks.com/lets-look-50-interesting-css-properties-values/

https://github.com/hsnaydd/moveTo

https://www.appcues.com/blog/73-tooltip-plugins-made-with-jquery-css-javascript-or-more/

http://iterare.surge.sh/index.html

https://bttn.surge.sh/

https://twitter.com/hashtag/webdev?src=hash

https://joshuajohnson.co.uk/Choices/

http://maxlab.fr/javascript/comprendre-et-maitriser-npm-introduction/

http://cssicon.space/?utm_source=codropscollective#/icon/relieved-solid

https://www.webcomponents.org/

https://w3c.github.io/aria-practices/examples/landmarks/HTML5.html

https://jets.js.org/

https://sachinchoolur.github.io/lightgallery.js/

http://simpleslider.bitlabs.nl/

https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/

http://tawian.io/text-spinners/

]]>
Tue, 21 Mar 2017 17:17:00 -0400 http://blog.flds.fr/posts/css-2017/ http://blog.flds.fr/posts/css-2017/
Images et performances performance

La performance web est une préocupation récurante et complexe. Plus le contenu est riche plus elle se dégrade. L'idée est donc de diminuer le contenu en se passant du superflu pour fournir au plus vite une information pertinante.

Le cas le plus classique concerne l'affichage des images. Qu'elles soient optimisées ou compressées elles conservent la plupart du temps un poids conséquant. Si elles sont d'ordre purement décoratif on est tenté alors de ne pas les afficher.

Le cas le plus classique est celui de l'image de fond du body d'une page. En général il s'agit d'une image de grande taille dont le poids atteind facilement ou même dépasse les 200Ko. Sur un petit écran elle ne se voit pas, voir elle géne la lecture. Comment s'en passer ?

La première idée est d'utiliser les médias query pour la masquer. Exemple :

body{ background: url(../dossier/mon-image.jpg) no-repeat center top #abc; } 

@media all and (max-width: 320px ) { 
 body{
    background:none; 
    background-color:#abc; 
 } 
}

Visuellement ça fonctionne, lorsque la taille maximalle de l'écran est de 320px l'image de fond du body n'est pas affichée. Le problème c'est que le navigateur va quand même la télécharger !!! Le bénéfice sur les performances est donc nul. 

Image de fond de site

Ma solution : utiliser du JavaScript pour modifier les attributs CSS de l'élément body de la page.

JavaScript dispose d'une instruction très utile pour tester la largeur de l'écran et déclencher des événements, il s'agit de : window.matchMedia ( supporté par presque tous les navigateurs sauf IE8,IE9, source http://caniuse.com/#feat=matchmedia )

Son utilisation est assez simple dans la mesure ou les paramètres qui lui sont passés sont des instructions CSS, les mêmes que celles des média queries. Pour illustrer son utilisation je vais utiliser ici un pattern assez sophistiqué qui permet de charger plusieurs points de bascules (breakpoints) et en fonction de leur vérification (vrai/faux) modifier les éléments DOM de la page. On peut ainsi l'utiliser pour déplacer des div dans la page (réorganiser les blocs si on utilise pas flexbox) ou réaliser toute sortes d'opérations lorsque la taille de l'écran convient.

L'idée est donc de ne pas afficher l'image de fond du body de la page lorsque la largeur de l'écran maximale est de 320px ce qui revient à dire, ne pas afficher l'image de fond si on navigue avec un smartphone.

// Liste de window.matchMedia() dans un tableau
var ar_mqTests = [
 window.matchMedia('(max-width: 980px)')
],
nbrMqTest = ar_mqTests.length;
 // Fonction de test de tous les medias queries
 function f_testMediaQuery(ar_mqTest){
  if ( ar_mqTests[0].matches ) { // width: 980px media match ?
    document.body.style.background = "#000"; };
  }else{
    document.body.style.background = "url(images/fond.jpg) no-repeat center fixed #111";
    document.body.style.backgroundSize = "cover";
  } 
// Parcours du tableau
for (var i=0; i<nbrMqTest; i++){
 f_testMediaQuery(ar_mqTests[i]) // Executé au chargement de la page
 ar_mqTests[i].addListener(f_testMediaQuery) // Gestionnaire événement qui se déclenche lorsque une des conditions media querie est vérifiée et qui lance le test
}

En utilisant ce code est en inspectant l'onglet réseau de la page on constate que l'image de fond n'est pas chargée sur un écran dont la taille maximale est de 320px. Le css doit rester neutre avec juste un background-color.

Image dans un background

Si l'image à afficher se trouve dans un background ont peut facilement utiliser une autre technique entièrement basée sur du balisage HTML et du CSS pour ne pas l'afficher celon la taille de l'écran.

Exemple

Dans le balisage HTML on utilise une classe parent par dessus l'élément à afficher. Ce wrapper englobe une div vide.

<div id="parent-image">
 <div>
 </div>
</div>

Dans la feuille de style on défini un media querie qui s'applique sur la classe parent

#parent-image div{
 width:200px;
 height;100px;
 background-image:url('monimage.jpg');
}

@media all and (max-width: 320px ) {  
 .parent-image{    
 display:none;  } 
}

et le tour est joué. L'image ne s'affiche pas mais surtout elle n'est pas téléchargée.

Cette technique est expliquée dans la vidéo du Paris Web 2014  ( 30eme minutes ) : https://www.paris-web.fr/2014/conferences/responsive-web-design-clever-tips-and-techniques.php

]]>
Sat, 11 Jun 2016 06:06:00 -0400 http://blog.flds.fr/posts/images-et-performances/ http://blog.flds.fr/posts/images-et-performances/
Documentation DevWeb

Développer c'est avant tout être documenté.  Pour cela il existe les sites officiels mais aussi des agrégateurs qui permettent de consulter différentes informations à partir d'un seul point d'entré.

CSS

HTML

javaScript

Divers

]]>
Sun, 20 Dec 2015 09:59:00 -0500 http://blog.flds.fr/posts/documentation/ http://blog.flds.fr/posts/documentation/
jQuery or not jQuery Vanilla JS

jQuery ou Vanilla JS

jQuery c'est formidable ! Du JavaScript cross browser, des instructions intuitives, le chainage permettant une écriture concise (do more, write less), la quantité de plugin impressionante autour de la librairie ( la liste officielle ) ... la somme des atouts est bien supérieur à l'inconvenient de son poids.

La plupart du temps l'usage de jQuery est incontournable surtout pour utiliser des plugins type slider que l'on retrouve dans de nombreux sites Internet.

Ceci dit il est n'est parfois pas raisonnable de l'utiliser pour réaliser de petites opérations la ou le JavaScript natif reste et restera toujours plus rapide. Si on peux se passer de jQuery, il FAUT se passer de jQuery.

No jQuery

Quelques sites pour nous aider :

La bible : https://developer.mozilla.org/en-US/docs/Web/JavaScript

Les bases (Français) : http://jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html

En français : https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-fr.md issu de https://github.com/shaundunne/you-dont-need

Un tip par jour : https://github.com/loverajoel/jstips

Un article de fond : http://gomakethings.com/ditching-jquery/

Un article très demistificateur sur les fonctions anonymes auto-appelantes : http://sametmax.com/la-fonction-anonyme-appelee-immediatement-en-javascript-function/

Un site avec beaucoup d'Angular mais pas que, de haut niveau : http://toddmotto.com/

Exemple : http://toddmotto.com/what-function-window-document-undefined-iife-really-means/

Pattern de déclaration  : http://callmenick.com/post/instantiation-patterns-in-javascript

voir aussi : http://www.ryanatkinson.io/javascript-instantiation-patterns/

Programmation objet en JS : http://callmenick.com/post/javascript-objects-building-javascript-component-part-1

ES6 pour les humain : https://github.com/metagrover/ES6-for-humans

Charger son JS : https://css-tricks.com/case-study-boosting-front-end-performance/?utm_source=codropscollective

With jQuery

Si vraiment on ne peux faire autrement ou parce que jQuery est déjà dans le projet alors autant l'utiliser :

Si la problématique est de cibler plusieurs navigateurs est que l'on n'utilise jQuery que pour la puissance et la simplicité de ses sélecteurs, on peut aussi utiliser sizzle.js qui est le moteur de sélecteur CSS de jQuery et qui peut être executé de façon autonome. Sinon tester zepto.

]]>
Sat, 31 Oct 2015 09:18:00 -0400 http://blog.flds.fr/posts/jquery-or-not-jquery/ http://blog.flds.fr/posts/jquery-or-not-jquery/