joyride-tour-presentation-site

Joyride – créer un tour de présentation de votre site

Joyride est un plugin Jquery qui vous permet de réaliser un tour de présentation des fonctions de votre site, simplement et rapidement, à l’aide d’info bulle design.

De quoi mettre un peu plus d’interaction dans votre site, et amener l’utilisateur à découvrir les fonctionnalités de votre site.

Pour cela, ajouter les quelques scripts nécessaires à votre page :


/* Attacher la CSS */

/* jQuery */

/* le plugin jquery Joyride */

A chaque étape de votre visite, mettez simplement un attribut id avec un nom unique à l’élément HTML désiré :


Créer une liste ordonnée contenant chacune des étapes de votre visite guidée. Vous pouvez spécifier différentes choses:

  1. Joyride est un plugin permettant faire des présentations de fonctionnalités de site

  2. Description de la fonction 1.

  3. Description de la fonction 2.

  4. Dernière fonction

    Pour finir, une belle description mise en forme...

    Il est évidemment possible de mettre en forme les bulles en HTML/CSS

  1. Présentation

    WebJuice vous permet de découvrir de nouveaux outils, des infos pratiques et utiles pour développer vos compétences, votre communication sur internet

  2. Naviguer

    naviguer sur le site à l’aide du menu principal

  3. Nos Services

    Découvrez les prestations proposées par ACcréation, éditrice de ce blog

  4. Rechercher

    Rechercher un article sur un sujet donné à l’aide du formulaire dédié

  5. Echanger

    Suivez-nous sur les réseaux sociaux WebJuice et ACcréation, ou en vous inscrivant à la newsletter

  6. Commenter

    L’article vous plait ? Vous avez une question ? Laissez un commentaire ! ou contactez-nous

  7. Partager

    Nous souhaitez partager votre joie de nous lire mais ne savez pas comment ? N’hésitez plus !

Finalement, lancer le plugin au chargement de la page, en précisant éventuellement des paramètres facultatifs :


Et voilà, ça fonctionne !
N’est-ce pas ?

Lire la suite

design-adaptatif

Trucs et astuces pour un design adaptatif (responsive design)

Le design adaptatif, ou responsive design, très à la mode depuis l’émergence du mobile, est l’art de faire s’adapter un site à la taille de l’écran l’affichant.

En d’autres termes, naviguez sur un même site depuis votre PC ou depuis votre tablette tactile ou votre mobile, le site sera toujours lisible (sans défilement intempestif), et beau, mais il se présentera différemment.
Par exemple, les colonnes de droite s’afficheront en dessous sur un petit écran, voir pas du tout, ou sous une forme différente afin de simplifier la lecture ou la navigation.

Alors quelles sont les bonnes pratiques pour avoir un site adaptatif ?

  • Approche « Mobile first » afin de vous concentrer sur l’essentiel de votre communication, et adapter ensuite le site pour afficher plus de choses pour les écrans le permettant.
  • Utilisez les @media CSS pour adapter la présentation de la page à la taille de l’écran.
  • Utilisez les librairies Javascript comme Respond.js ou CSS3 Media Queries afin d’apporter la prise en charge des @media aux navigateurs ne les comprenant pas par défaut.
  • Utilisez des « fluid layouts », ou zones adaptatives et relatives, afin de s’adapter à l’écran. Ne faites pas une CSS pour les iPhone, une pour les tablettes, …, car demain (et déjà hier) un écran avec des dimensions intermédiaires sortira.
  • Faites votre design en fonction de votre contenu. Les frameworks CSS sont à la mode, et utiles dans certains cas, mais font rarement l’affaire pour un site sur-mesure. Ne les laissez pas mettre votre créativité dans des cases.
  • Adaptez la taille de vos images à la taille des écrans avec img { max-width: 100%; }. Cela permet de gérer l’affichage, mais télécharge toujours un fichier unique (en général, le fichier en taille réelle). Pour pallier ce problème, essayer avec un script comme Responsive Images afin de télécharger l’image de la taille correspondant à celle de l’écran.
  • Utilisez le lazy loading pour vos images. Un petite librairie Javascript qui permet de ne télécharger les images que lorsque l’internaute aura fait suffisamment défiler la page pour que l’image se trouve dans la zone visible. On peut citer le très bon plugin jQuery Lazy Load.
  • Oubliez la perfection (mais essayez de l’atteindre). Il y aura toujours des personnes avec de très vieux navigateurs, ou Javascript désactivé. Faites en sorte que l’affichage de votre design dans ces conditions soit correct, que le site reste beau et utilisable, même si tout ne sera pas parfait (le site aura par exemple des images haute résolution alors que l’écran de l’internaute n’est pas très grand).

Cette façon de concevoir est récente, mais s’avère de plus en plus nécessaire, compte-tenu des périphériques variés ayant accès à internet (PC fixes, portables, tablettes, mobiles, télévision).
Suivre ces recommandations demande du temps et de la réflexion pour obtenir un site joli, bien fait, utilisé et utilisable, mais c’est important, et vous les connaissez maintenant, alors comme on dit, y’a plus qu’à.

Lire la suite

geoplugin-geolocaliser-internautes

geoPlugin – géolocalisez vos visiteurs sans rien installer

En temps normal, afin de localiser un internaute (à partir de son adresse IP), vous devez passer par une librairie serveur s’appuyant souvent sur Maxmind, une base de données gratuite et fiable, mais que vous devez installer sur votre serveur.

Vous pourrez maintenant utiliser GeoPlugin, une librairie Javascript qui vous permettra d’afficher sur votre site la ville, la région, le pays, les coordonnées GPS, … de vos internautes.
Cette librairie fait appel à un webservice (via Ajax) et ne nécessite donc aucune installation sur votre serveur.

Quelques lignes suffisent à sa mise en place :



Cerise sur le gâteau pour ceux qui auraient besoin d’autres technologies.
Vous pouvez obtenir le retour du webservice en JSON, en XML ou en tableau PHP sérialisé.
Et deuxième cerise, la librairie dispose également d’un convertisseur de devises.

Lire la suite

chosen

Chosen – moderniser vos listes déroulantes

Chosen est un plugin JavaScript qui rend vos longues listes déroulantes bien plus agréables à utiliser.

Cerise sur la gâteau, il est disponible en tant que plugin jQuery et Prototype, et a déjà été porté sur Motools et Drupal 7.

Pourquoi utiliser Chosen ?

Ergonomie

Au lieu de forcer vos utilisateurs à faire défiler la liste des 36000 communes françaises ou des quasi 200 pays, ils pourront désormais saisir une partie du nom de leur communes/pays pour réduire instantanément cette liste à ce qu’ils cherchent.

Amélioration progressive (Progressive Enhancement)

Chosen est basé sur Javascript, de façon non intrusive. Votre code HTML reste conforme aux standards HTML. Aucun problème pour les ordinateurs n’ayant pas Javascript activé.

De plus, les données postées par le formulaire reste également les mêmes que si la liste déroulante d’origine était utilisée. Aucun traitement particulier n’est donc à prévoir côté serveur.

Installation sans soucis

Ajouter les fichiers de Chosen à votre application et appeler le plugin. Chosen respecte automatiquement les optgroups, les items sélectionnés, l’attribut « multiple » et l’ordre de navigation au clavier (tabulation).

Lire la suite

tiny CircleSlider

Tiny Circleslider – un carrousel circulaire

Après les sliders vus et revus, les caroussels en 3D, en voici un petit nouveau, original et élégant, un caroussel circulaire : Tiny Circleslider

Il est basé sur la librairie JQuery et est très léger : 4ko seulement !

Ces principales caractéristiques :

  • Support de l’iPhone, iPad et Android
  • Support du défilement automatique, ou par rotation du « curseur » ou clic sur le rond de l’image à afficher
  • Option de fondu en fin de déplacement
  • Paramétrage du rayon du slider
  • Possibilité d’appel de callback après chaque mouvement
  • Facilement personnalisable

Lire la suite