Skip to main content
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 ?

google-plus-entreprise

Créer une page Google+ rapidement

Après plusieurs mois d’attente, les entreprises peuvent enfin créer leur page sur Google+ !

Entreprises, vous allez enfin pouvoir communiquer sur vos produits et services, comme vous le faites déjà sur Facebook.

Pour cela, rendez-vous à l’adresse plus.google.com/pages/create

Ensuite, suivez les instructions. C’est extrêmement simple !
Choisissez un nom, une adresse de site web, une catégorie, un logo, un slogan, et c’est parti !

Google vous propose enfin différentes choses pour promouvoir votre page, comme envoyer l’url à vos cercles, ajouter un badge Google+ sur votre site.

A noter toutefois :
Vous ne pourrez ajouter des personnes à vos cercles de page que si et seulement si ces personnes ont d’abord ajouté votre page à leurs cercles.
Google ne propose pas encore d’url très référençable comme peut le faire Facebook. Il faudra donc pour le moment se contenter d’un gros numéro de série.

N’hésitez pas à visiter la page G+ WebJuice  et l’ajouter à vos cercles.

qr-code

Codes 2D gratuits pour vos publicités

Vous avez déjà dû voir l’un de ces codes barres en deux dimensions sur des affiches, magazines, flyers, ou même sur des sites à destination des mobiles.
A quoi servent-ils ?
C’est simple, à éviter de devoir taper de longues URL sur votre smartphone ! Prenez en photo ce code, et vous voilà sur le site internet ou l’application correspondant.

En pratique, il existe différentes normes de codes 2D.
La plus utilisée se nomme le QR Code, créé en 1994 par une filiale de Toyota. Son utilisation est maintenant une norme ISO, libre de droit (gratuite !) et permet d’encoder jusqu’à 4296 caractères alphanumériques, largement assez pour une simple adresse Web (l’utilisation la plus courante actuellement).

Le QR code (QR pour Quick Response) est un type de code-barres en deux dimensions (ou code matriciel datamatrix) constitué de modules noirs disposés dans un carré à fond blanc. QR veut dire en anglais Quick Response, car le contenu du code peut être décodé rapidement. Destiné à être lu par un lecteur de code-barres, un téléphone mobile, un smartphone, ou encore une webcam, il a l’avantage de pouvoir stocker plus d’informations qu’un code à barres, et surtout des données directement reconnues par des applications, permettant ainsi de déclencher facilement des actions comme :

  • naviguer vers un site internet, ou mettre l’adresse d’un site en marque-page ;
  • faire un paiement direct via son cellulaire (Europe et Asie principalement) ;
  • ajouter une carte de visite virtuelle (vCard, MeCard) dans les contacts, ou un événement (iCalendar) dans l’agenda électronique ;
  • déclencher un appel vers un numéro de téléphone ou envoyer un SMS ;
  • montrer un point géographique sur Google Maps ou Bing Maps ;
  • encoder un texte libre ;
  • etc.

(cf Wikipedia – QR Code)

Vous l’avez compris, de nombreuses utilisations sont possibles.
Parmi les plus courantes : permettre à l’internaute d’accéder à plus d’informations (sur un site mobile)

Le mobile (entendez principalement « le smartphone ») étant en plein boom, et son utilisation étant gratuite, ne vous privez pas de cette source de trafic non négligeable, et en pleine croissance.

N’hésitez pas à mettre un QR Code sur :

  • vos affiches publicitaires
  • vos flyers
  • vos menus
  • votre site (pour télécharger votre application iPhone, Android, … par exemple)

Pour les premiers cas, vous pourrez utiliser l’un des nombreux générateurs de QR Code disponibles en ligne, notamment l’excellent générateur du ZXing Project.

Pour votre site, vous pourrez préférer l’utilisation d’une bibliothèque dynamique, comme le plugin jQuery QR Code.

A vos téléphones, prêt, photographiez !

coming-soon-page

Coming Soon Pages efficaces

Vous allez « bientôt » lancer votre site, dans quelques semaines ou mois.
Le nom de domaine est réservé et vous n’attendez plus que la mise en ligne officielle pour communiquer efficacement.
N’attendez pas. Une coming soon page (page d’attente ou page de maintenance) peut être mise en ligne dès maintenant, et vous permettre de vous faire connaitre, de donner envie à l’internaute de revenir, voir de l’informer le jour du lancement, et de voir arriver vos premiers clients dès la mise en ligne.
Pour cela, voyons les principales composantes d’une bonne page d’attente.

Premièrement, la page doit être agréable à regarder. Évitez les « site en construction » et les logos représentant une barrière, un casque de chantier, …

 

La page d’attente doit donner envie, susciter la curiosité. Pour cela, son identité doit être forte, comme le sera votre site.
Mettez votre logo sur la page, et utilisez les couleurs et le style qu’aura votre site à son lancement.
Cette page d’attente, tout comme votre site, représente votre société, en l’attente  du site final.

 

La page d’attente doit également vous permettre de vous faire connaitre, de faire le buzz.
Utilisez donc les réseaux sociaux les plus adaptés à votre activité pour permettre aux internautes de vous suivre et de s’intéresser à vous : Twitter et Facebook maintenant indispensables, Flickr ou DeviantArt pour les artistes, MySpace pour les musiciens, …
Bien sûr, ces réseaux devront être alimentés régulièrement pour maintenir le suspense, l’attention, et donner envie aux internautes de relayer l’information.

 

En plus des réseaux sociaux, n’hésitez pas à intégrer un formulaire d’inscription à une newsletter.
Cela vous permettra d’informer tous les intéressés lors du lancement du site.
C’est aussi un moyen efficace de pousser de l’information régulièrement, si votre site nécessite un temps de développement long.

Pour aller encore plus loin, pourquoi ne pas mettre un petit formulaire de contact?

Après tout, ce n’est pas parce que votre site n’est pas en ligne que votre entreprise ne peut pas travailler !

 

Pensez également référencement !

Les moteurs de recherche (notamment Google) prennent en compte l’ancienneté d’un nom de domaine, son contenu, ses liens.
Donc faire du buzz est très intéressant pour générer des liens vers votre nom de domaine.
Mais pensez à mettre un peu de contenu textuel. Disons idéalement 200 mots (ou au moins 50) présentant votre entreprise, ses produits/services.
Votre texte doit contenir les expressions ou mots-clés sur lesquels vous souhaitez être trouvé.

 

Donnez envie de revenir régulièrement !
Donnez une date de mise en ligne précise (avec un compte-à-rebours) ou approximative, annoncez des évènements afin de donner envie à l’internaute de revenir voir votre site.

 

Pour résumer, votre page d’attente doit contenir dans l’idéal :

  • Un design attrayant
  • Les coordonnées de votre entreprise, avec une description optimisée pour les moteurs de recherche
  • Un formulaire de contact et d’inscription à une newsletter
  • Des liens vers vos réseaux sociaux pour vous suivre

Avec tout cela, vous devriez très rapidement voir les premiers visiteurs et clients sur votre site dès sa mise en ligne !
Voilà pourquoi ACcréation travaille sur cette page, qui bien que temporaire, a toute son importance.

 

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’à.

Les statistiques Google Analytics en temps réel

« Real Time » : Des statistiques en temps réel sur Google Analytics

Pour ceux qui ne connaissent pas encore c’est outil (incontournable pour tout webmaster), Google Analytics permet d’avoir des statistiques de fréquentation de votre site Internet et vous indique notamment combien vous avez eu de visite par jour, comment les visiteurs sont arrivés sur votre site Internet, de quelle région géographique ils sont originaires, combien de temps ils sont restés sur votre site web …

Jusqu’à présent, ces mises à jours étaient effectuées toutes les 24h, mais avec la sortie de « Real Time », vous pourrez désormais suivre les statistiques de votre site web en temps réel (à 2 secondes prêt).

Cette fonctionnalité n’est pas encore accessible à tous mais le sera d’ici 1 à 2 semaines.

Le menu « Temps Réel » apparait sous l’onglet « Tableau de bord » et vous permet de voir :
– le nombre de visiteurs présents sur votre site Internet à l’instant T,
– le nombre de visites sur les 30 dernières minutes,
– le nombre de visites sur les 60 dernières secondes,
– le top 20 des sites référents,
– les mots clés qui ont généré le trafic sur votre site Internet,
– la localisation géographique de vos visiteurs,
– les pages les plus actives.

Les statistiques Google Analytics en temps réel

Cette nouvelle mise à jour accessible gratuitement et sans modification de votre code sera bien utile pour mesurer notamment :
– l’impact des campagnes e-mailing / newsletter,
– le buzz créé par un twitt, un post sur facebook ou tout autre réseau social,
– la mise à jour, refonte, création de votre site Internet,
– l’impact de votre publicité (spot publicitaire, passage radio, article dans un journal, magazine …).

Ainsi, en fonction des résultats générés en temps réel, vous pourrez réaliser des actions au bon moment pour augmenter votre trafic lorsque celui-ci deviendra trop faible à votre goût.

 

Google Analytics Premium

Dans le même temps, Google annonce la sortie de Google Analytics Premium, une version payante de Google Analytics, destinée avant tout aux professionnels.

Elle coûte 150.000 $/ an (soit environ 90.000 €) et vous offre des résultats plus complets, de meilleurs outils d’analyse plus rapides et un support d’installation et d’utilisation par Google.

Cette fonctionnalité est déployée pour le moment uniquement aux États-Unis, Royaume-Unis et Canada.

Voici la vidéo de présentation réalisée par Google :

HTML5 : La nouvelle technologie suscite beaucoup d'intérêt

HTML5 : des expériences à voir absolument

A l’heure actuelle, HTML5 est l’un des sujets les plus populaires chez les développeurs.

Cette nouvelle technologie suscite beaucoup d’intérêt chez ces derniers, qui tentent des expériences incroyables que l’on aurait pas pu imaginer sans flash il y a encore quelques années.

Aujourd’hui, nous vous proposons de voir une collection incroyable d’expériences en HTML5, de sites en HTML5 ainsi que de tutoriels HTML5 pour ceux qui voudraient toucher de plus prêt à cette nouvelle techno !

ENJOY !!!

 

31 expériences HTML que vous devez voir

Attention vous allez en avoir plein les yeux !

Le pouvoir des fleurs en HTML5

 

50 sites Internet utilisant la technologie HTML5

50 sites utilisant HTML5

 

25 tutoriels HTML 5

Amusez-vous 😉

Tutoriels HTML5

faire-le-buzz

Comment faire du buzz avec un budget sur mesure

Faire parler de soi sur internet peut coûter cher, très cher.
Création de sites évènementiels, jeux en ligne, opérations virales, spots interactifs …, créés par des professionnels de la communication peut coûter plusieurs dizaines de milliers d’euros, voir centaines !

Mais le ticket d’entrée peut être de quelques centaines d’euros !
Pour cela, il vous faudra une bonne imagination, ou faire appel à une société spécialisée.

Retrouvez dans ce dossier spécial « L’Entreprise », comment faire du buzz autour de votre marque selon votre budget, et en évitant les pièges de la communication virale.

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.