Le Blog

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

Un point c'est tout

Un point c'est tout

Dans sa  première version  le plugin  jQuery LazyLoad  utilisais une image gif de 1x1 pixel en lieu et place de l'image à afficher en temps différé. Par défaut de couleur grise il étais simple de modifier cette image par défaut et d'en créer une autre d'une couleur plus approprié au thème du site.

A présent c'est toujours une image de 1x1 pixel, toujours grise mais cette fois directement embarquée dans le script au format d'encodage Base 64. C'est parfait pour l'optimisation du nombre de requêtes HTTP mais cela demande beaucoup de manipulations pour la changer. En effet il faut par exemple, créer une image de 1x1 pixel, la sauvegarder, lancer son navigateur, se rendre sur un service d'encodage, uploader l'image, l'encoder et enfin récupérer le code avant de le coller en lieu et place du point gris par défaut. Les plus consciencieux d'entre nous supprimerons aussi le fichier image source devenu inutile.

imgMake

Cet utilitaire répond à cette problématique de manipulations fastidieuses. Pas besoin de créer une image, il s'en charge, pas besoin de la supprimer, elle est virtuelle.

Interface de imgMake

Interface du générateur de code Base 64

Il ne fait que chose, créer une image de 1x1 pixel (1 point) de la couleur de son choix, il l'encode en Base 64 et nous retourne le résultat. Ne reste plus qu'a copier la chaîne fournie et à la placer dans le plugin LazyLoad . Pour cela, saisir la couleur en valeur HEXA ou utiliser le color picker ( les deux champs sont shynchronisés ), cliquer sur le bouton Générer et recopier l'encodage du point dans le pluging LazyLoad.

Remplacer le code dans LaeyLoad

Emplacement de la chaine à remplacer dans le plugin LazyLoad

A noter

Il s'agit d'un script HTML/CSS/JavaScript autonome. Nul besoin de serveur PHP ou autre pour le faire fonctionner. Download

Crédits :

  • http://formfactor.io/
  • https://github.com/amussey/hex-to-rgb.js
  • http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/

LazyLoad :

Utilitaires d'encodage Base 64 en ligne :

Glisser déposer

Autres

A savoir :

Il est tout à fait possible en PHP d'encoder une image ou tout autre chose à la volée :

<?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>

Catégories: Développement WEB

Tags: Utilitaire pour intégrateur

Commentaires: Pas de commentaires

0

Dessine moi une galerie

Dessine moi une galerie

Le petit prince à dit un jour à un intégrateur :  "S'il vous plaît … dessine moi une galerie."

Lorsque l'on doit intégrer une galerie d'images dans un site Internet, l'exercice consistant à aligner des photos en occupant tout l'espace dont on dispose et à calculer une marge harmonieuse entre elles devient rapidement un casse tête. Si en plus on doit y rajouter les bordures et les padding propre à chaque image, cela abouti assez rapidement à se prendre les pieds dans le tapis de la règle de 3 !

Ne s'agissant que de calcul pourquoi ne pas utiliser son ordinateur pour faire ce qu'il fait le mieux...des opérations. C'est chose faite avec ce générateur de taille d'images.

imgGal

imgGal-V3

L'interface permet de définir la taille du container qui comme son nom l'indique contiendra la galerie. Ensuite on précise combien on souhaite aligner d'images, la taille de la marge , la taille d'une éventuelle bordure et d'un padding. Précisons le format que l'on souhaite utiliser (numérique, reflex, carré ou vidéo) et cliquer sur le bouton Calculer. Il ne reste plus qu'a copier le code CSS qui nous est proposé.

L'algorithme du script est orienté « plus grande taille d'images ». Ne soyez pas étonné si les marges que vous avez saisies sont modifiées à la baisse, ceci est le résultat du calcul permettant de faire tenir toutes les images demandées sur une ligne.

Le mode de calcul manuel conserve vos marges mais vous prévient si tout l'espace disponible n'est pas utilisé. Une prévisualisation de la galerie sur deux lignes est affichée afin de se rendre compte du rendu.

A noter

Il s'agit d'un script HTML/CSS/JavaScript autonome. Nul besoin de serveur PHP ou autre pour le faire fonctionner. Download

Le titre de ce post à été réalisé grace à http://typetodesign.com/

Catégories: Développement WEB

Tags: Utilitaire pour intégrateur

Commentaires: Pas de commentaires

0

Le projet Mosaic

Conception A - 1923 - Piet MONDRIAN

Introduction

La légende dit que c'est en regardant le tableau « Conception A » peint en 1923 par Piet Mondrian que l'idée m'est venue...

Le projet mosaïque est née de l'envie de présenter une galerie de photos non plus sous la forme d'une suite d'images de tailles égales réparties en lignes et en colonnes mais sous la forme d'une mosaïque.

Des solutions existent déjà sous la forme de plugins de la librairie jQuery.

Une autre s’appuie sur les particularités du display de type flexbox et du pur JS.pour déterminer le ratio de l'image et lui appliquer la classe ad-hoc :  http://demosthenes.info/blog/929/Modern-Masonry-with-Flexbox-and-JavaScript


En pur CSS3 :  http://designshack.net/articles/css/masonry/


Toutes ces solutions fonctionnent très bien y compris en mode "responsive design", mais est-il raisonnable d'utiliser une librairie de presque 100Ko plus un plugin pour afficher 6,7, 10 images... La solution CSS flexbox ou mieux encore CSS pur, basée sur la propriété column-count ne fonctionnent sous IE qu'à partir de sa version 10.

C'est pour cette raison que le projet mosaic n'utilise que quelques lignes de règles CSS basées sur le modèle des flottants et un objet PHP. L'impact mémoire est très léger, l'affichage immédiat, l'activation de Javascript dans le navigateur sans importance.

Compatibilité des navigateurs pour le mode display:float ;

  • Internet Explorer 4.0
  • chrome 1.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5

La norme WC3 en français :  http://www.yoyodesign.org/doc/w3c/css2/visuren.html#float-position

Pré requis

Pour utiliser la mosaic il faut :
Un serveur PHP pour héberger et exécuter l'objet mosaic.php, quelques rêgles de style CSS et … c'est tout !

Paramétrer une mosaique

Pour paramétrer l'objet mosaic et en tirer tout le potentiel, une interface utilisateur à été développée. Elle est composé de deux niveaux. Dans le premier se trouve les paramétres obligatoires concernant les images à afficher et leur container. Il s'agit du mode standard . Le mode expert permet lui de gérer plus de paramétres. Interface

Interface de paramétrage de la mosaique en mode expert

Par défaut nous sommes en mode standard , seul les paramètres minimaux nous sont proposés :

  • Largeur du container de la mosaïque. (seul paramètre réellement obligatoire)
  • Marge souhaitée entre chaque images  ( 15 par défaut )
  • Taille de la bordure  ( 0 par défaut )
  • Format de l'image  ( Numérique par défaut )
  • Le mode (  Standard par défaut )

Remplir les champs et cliquer sur le bouton Générer permet d'obtenir, le code CSS à intégrer dans sa feuille de style et le code PHP pour utiliser la mosaïque. A noter que ce code PHP est en fait l'appel et le paramétrage d'une fonction qui sert d'interface entre le code qui héberge la mosaïque et l'objet mosaïque. Cette fonction reste à la charge du développeur. Voir : Fonction PHP

Cliquer sur le bouton Prévisualiser et 10 images seront affichées dans un nouvel onglet. Il est bien sur possible de modifier cette valeur selon ses propres besoins et de tester le comportement de la mosaique en fonction des quantités d'images à afficher. Cette prévisualisation fournie une information textuelle, les gabarits utilisés pour concevoir la mosaïque et une représentation graphique.  Les images sont obtenues à l'aide du serveur   http://fpoimg.com/

Comment ça marche ?

La question que doit résoudre l'objet mosaïque est : comment afficher une quantité de X images ?

Pour cela il dispose d'un ensemble de gabarits. Un gabarit représente une disposition et une quantité d'images. Ainsi il existe un gabarit pour afficher 1,2,3 images jusqu’à 9. Les gabarits sont constitués à l'aide de 6 forme de bases que l'on trouvent dans les règles CSS. Ci dessous les 9 gabarits utilisés par défaut. Notez la lettre A qui précedent la quantité. Les gabarits de classes A sont ceux que le programme utilisent par défaut. Il existe des gabarits B qui sont des gabarits de classe A en représentation inversée (mirroir) et aussi des gabarits de classe C qui affichent des quantités avec des représentation différentes et leur représentations inversée désignées par la classe D.

Les 9 gabarits

Les 9 gabarits classe A

Pour afficher une quantité d'images, il existe plusieurs façons de procéder.
On peut parcourir la collection des gabarits en partant des plus grands pour aller vers le plus petit.

Exemple pour afficher 18 images :

  • Gabarit 9 + Gabarit 8 + Gabarit 1

En parcourant la collection en sens inverse, du plus petit au plus grand on obtient :

  • Gabarit 1 + Gabarit 2 + Gabarit 3 + Gabarit 4 + Gabarit 5 + Gabarit 3

Comme on peut le constater le sens de parcours à une influence sur la hauteur totale de la mosaïque et aussi la taille des images affichées.

Comparaison Descendant/Ascendant

A gauche une représentation descendante de 18 images, à droite la même quantité en représentation ascendante.

Par défaut, en mode standard la collection est parcourue dans le sens descendant. Ceci permet d’obtenir une mosaïque de taille moyenne.
Les autres options sont obtenues en utilisant le mode expert.


Le mode Expert

En mode expert on accéde à une palette plus étendue de réglages de fonctionnement de l'objet mosaic.

Régler   l'ordre de parcours de la collection des gabarits. Par défaut le programme fonctionne avec des gabarits de classe A (Automatique) parcourus dans le sens descendant (du plus grand au plus petit). On peux modifier l'ordre en passant en mode ascendant et parcourir les gabarits en partant du plus petit pour aller vers le plus grand.

Afin d’optimiser le nombre de gabarits utilisés il est possible en mode parcours ascendant de compacter le résultat afin de minimiser le nombre de gabarits de taille 1,2,3 et 4 vers des gabarits contenant 2,4,6,et 8 images.

Exemple pour afficher 18 images :

  • sans compactage : Gabarit 1 + Gabarit 2 + Gabarit 3 + Gabarit 4 + Gabarit 5 + Gabarit 1 + Gabarit 2 
  • avec compactage : Gabarit 2 + Gabarit 8 + Gabarit 3 + Gabarit 5

En mode Descendant le mode regroupe permet d'utiliser le plus de fois possible les gabarits permettant de représenter les quantités.

Exemple pour afficher 18 images :

  • sans regroupement : Gabarit 9 + Gabarit 8 + Gabarit 1
  • avec regroupement : Gabarit 9 + Gabarit 9

Définir des gabarits préférés . Par défaut le programme utilisent les gabarits de classe A. On peut lui redéfinir les gabarits à utiliser à sa convenance soit en lui fournissant une collection complète (tous les gabarits de 1 à 9) pris dans différentes classes, soit quelque un uniquement.

Exemple : pour afficher 18 images avec des gabarits C3 et C5 :

  • En mode ascendant : C3 + C5 + A2 + C3 + C5
  • En mode descendant:  C5 + C3 + C5 + C3 + A2

Concevoir un  schéma d'introduction . Les premières images de la mosaïque utiliseront le/les gabarits sélectionnés avant de traiter la quantité d'images restantes en suivant la régle de parcours et les gabarits préférés..

Concevoir un  motif . Le programme utilisera les gabarits sélectionnés en les répétant afin de fabriquer un motif. Dans ce cas l'option  miroir  permet d'obtenir une représentation alternées (dans la mesure ou le gabarit miroir existe)

L'option Mélanger permet au final d'obtenir un résultat aléatoire et donc une représentation différente à chaque nouvel affichage de la page.

Fonction PHP

La  fonction f_imgMos() permet de réaliser l'interface entre l’environnement d'utilisation de la mosaïque (script PHP) et l'objet mosaic. Elle reste à la charge du développeur qui doit la concevoir en tenant compte de son environnement de travail et de sa source de données (Base de données, Array(), API Flickr, etc...)

La fonction reçoit deux paramètres. Le premier représente le nombre d'images à afficher et le second est un objet au format JSON contenant tous les paramètres necessaires à l'objet mosaic. L'avantage du compactage des paramètres de la mosaic au format JSON est que la présence ou l'absence des paramétres est facile à gérer,ils sont très explicites et leur ordre d'apparition sans importance.

Exemple utilisation de la fonction avec passage de paramètres au format JSON :

 
f_imgMosaic( Parametre_1 , '{ "width":"400", "height":"300", "test":true, "plugin":"fancyBox" }' );

A noter  : 

Parametre_1 : Un paramétres qui permet de comptabiliser le nombre d'images à afficher. Exemple : Le nombre d'image à afficher, le ID d'une galerie, etc...

Dans l'exemple les paramétres "test":true, et "plugin":"fancyBox", sont optionnels. Ce sont des paramètres ajoutés à l'objet JSON qui conviennent à l'utilisation de notre fonction. Si on souhaite utiliser plusieurs plugings comme SwipeBox et LazyLoad on définira la liste des plugins dans une seule chaine séparée par des virgules. Exemple : "plugin":"swipeBox,lazyLoad". La aussi rien n'est imposé. On peut rajoutter d'autres valeurs à sa convenance, en  fonction de ses besoins et les gérer au sein du code de sa  fonction.

Les images à afficher ont toute la même taille, celle de la plus grande.  C'est le code CSS qui permettra de les afficher en plus ou moins grand en fonction de leur emplacement dans la mosaique.

Appel et contenu de la fonction : f_imgMos()

Les seuls paramétres obligatoires de l'objet JSON pour déclarer l'objet mosaic sont :

  • width ( largeur d'une image = largeur du container )
  • height ( hauteur d'une image, en fonction du format choisi, numérique, reflex, carré ou vidéo )
  • Au sein de la fonction il faut disposer du code permettant d'obtenir les images et leur quantité.
  • Pour lancer la conception de la mosaique, utiliser la méthode ->make( Nombre total d'images )
  • Pour réaliser l'affichage des images utiliser la méthode ->getClass( N° de l'image )

Exemple contenu minimal de la fonction :

Lignes

  • 01 : Décoder l'objet JSON
  • 02: Isoler la valeur width
  • 03: Isoler la valeur height
  • 04: Le code pour récupérer les images et leur nombre
  • 05: Appel du code de mosaic.php si pas de fonction autoload ou de gestion des dépendances.
  • 06: Déclarer une instance sur l'objet mosaic, new mosaic;
  • 07: Passer le paramétre nombre d'image à afficher à l'objet mosaic à laide de la méthode make
  • 08: Déclarer une division container de la mosaique avec le code  CSS : wp-mosaic
  • 09: Dans une boucle de 1 à x ( x = nombre d'images à afficher) ou un foreach ...
  • 10: Appliquer une classe à la balise <figure> ( ou une balise <div> ) en utilisant la méthode getClass (N° de l'image )

A noter :  Utiliser la balise <img> dans préciser de taille pour les images.

//------------------------------------ 
function f_imgMosaic($param){ 
//----------------------------------- 
01 $decode = json_decode($param); 
02 $w=(array_key_exists('width',$decode)) ? $decode->width:'400';
03 $h=(array_key_exists('height',$decode)) ? $decode->height:'300'; 

04 // Ici le code de récupération des images et leur nombre : $nbrImg
//... 

 05 require 'mosaic.php'; 
 
06 $mosaic = new mosaic($param);

07 $mosaic->make($nbrImg);?>
 
08 <div class="wrp-mosaic"> 

09  <?php for ($i=0; $i < $nbrImg ; $i++) { ?> 
10  <figure class="<?php $mosaic->getClass($i);?>">
     <img src="...source image..."> 
    </figure> 
   <?php } // fin boucle ?> *
   </div>
   <?php } // fin fonction ?>

Download

Carnet de route :

Catégories: Développement WEB

Tags: Utilitaire pour intégrateur

Commentaires: Pas de commentaires