Le Blog

Le blog laboratoire de F.L.D. Studio
0

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

Catégories: Développement WEB

Commentaires: Pas de commentaires

0

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();

Catégories: Conférence

Commentaires: Pas de commentaires

0

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.

Catégories: CSS

Tags: flexbox, Galerie

Commentaires: Pas de commentaires