Le Blog

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

Be Social

Social

A l'heure d'aujourd'hui un business sur Internet sans connection à des réseaux sociaux posséde de facto un lourd handicap. L'invitation au partage des pages d'un site est donc une pratique courante, voir indispensable. Cela ne dispense pas évidement d'alimenter régulièrement le site officiel et ses satélittes sur les réseaux sociaux de manière constante, il en va de l'@-réptutation.

Pour les développeurs de site il existe des solutions toutes faites comme :

qui proposent d'installer leur plugin pour accéder à tous les réseaux sociaux de son choix en vu de partager une page.

Une autre alternative et de coder soi même cette fonctionalité en utilisant les SDK des différents services. Pour savoir comment, lire cet article : http://blog.hubspot.com/blog/tabid/6307/bid/29544/The-Ultimate-Cheat-Sheet-for-Creating-Social-Media-Buttons.aspx

Une autre solution consite à utiliser les liens de partages (URL Share) que proposent les réseaux sociaux en lieu et place de leur plugins intégrés qui on le sait sont consomateurs de ressources et de bande passante. On trouvera une liste de ces pages  à cette adresse : https://github.com/bradvin/social-share-urls

Ce site : http://sharing.mxstbr.com/ permet de construire les boutons de partage vers les sites sociaux en utilisant des images SVG. Il s'inspire d'un article très complet : https://jonsuh.com/blog/social-share-links/ 

Un autre site très complet : https://simplesharingbuttons.com/ il propose notement une collection d'images aux format SVG que l'on peut télécharger ici  ( 512x512 ) ainsi que le code necessaire.

Exemple :

https://css-tricks.com/svg-sprites-use-better-icon-fonts/

https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/

http://codepen.io/DjF/pen/OyPQqy/

Dans cet article : https://web-design-weekly.com/2015/06/18/basic-performant-sharing-buttons/ on trouvera aussi le code SVG représentant les logos des 3 principaux réseaux sociaux, Facebook, Twitter et Google + et la façon de s'en servir.

A savoir :

l'URL doit être encodée. Exemple en PHP :

<?php echo urlencode('https://adresse-du-site.com/'); ?>

Catégories: Développement WEB

Commentaires: Pas de commentaires

0

Google Map

Google Map

Depuis la version 3 de l'API de Google Map de nombreux paramétres sont disponibles pour exploiter les possibilités du service. La documentation officielle :  https://developers.google.com/maps/

Il existe à présent une alternative ( très sympathique ) qui consiste à utiliser ce site :  https://www.mapbuildr.com/  et à utiliser sa superbe interface inter-active pour obtenir tout le code necessaire à l'intégration d'une carte personnalisée, thèmes inclus !

Un exemple avec le thème Lunar Landscape 

D'autres exemple sur Codepen :

Carte responsive :  http://codepen.io/hubpork/pen/xriIz

Carte customisée :  http://codepen.io/codyhouse/pen/szKvm

Carte customisée une fonction JS complette : http://codepen.io/clintioo/pen/jEOmZK

Recherche complette sur CodePen : http://codepen.io/search?q=google+map&limit=all&depth=everything&show_forks=false

Les plus créatifs pourront utiliser ce site :  https://snazzymaps.com/   pour créer leur propres thèmes  et obtenir uniquement le paramètrage de la partie "artistique" de la carte.

Pour la création et le partage de carte via les réseaux sociaux :  https://mapjam.com

Catégories: Développement WEB

Commentaires: Pas de commentaires

0

Galeries JavaScript

Couteau Suisse

Certains plugins sont étonnants par l'étendue de leurs possibilités, mais attention, fonctionnalités rimes aussi avec poids. L'utilisation d'un seul outil pour tout faire n'est pas un choix raisonnable. Les plugins multi-fonctions sont intéressants dans un site si on pense utiliser plusieurs de leurs fonctionnalitées au gré des pages.  Dans ce cas c'est une solution plus avantageuse dans la mesure ou une fois mis en cache par le navigateur ils seront opérationnels plus rapidement et cela facilitera le travail d'intégration puisqu'on utilise une seule logique et une seule syntaxe pour les paramétrer.  Dans les autres cas, celui ou on à besoin d'un caroussel simple les plugin mono-fonction sont à préférer.  Pour ces derniers la norme d'aujourd'hui est qu'ils soient à minima, responsive et utilisable en mode tactille.

Multi-fonctions

Galerie et slider

Sliders

Mono-fonction

A titre de comparaison le simple slider aujourd'hui responsive et utilisable en tactile : http://slidesjs.com/ ne pése que 12Ko, le grand gagnant du slide responsive catégorie 'slim" étant certainement responsiveslide, un plugin jQuery de 1Ko !!! (responsive mais pas tactille)

La liste officielle des caroussels proposés sur la page jQuery UI : https://plugins.jquery.com/tag/carousel/

Catégories: Développement WEB

Tags: jQuery, Galerie, JavaScript

Commentaires: Pas de commentaires