Tutoriel

Testez le chargement de votre site avec webpagetest.org

Publié le par Anne-Gaële Wulkow

Toujours plus vite

Le souci de vitesse de chargement d’un site Web n'est pas un nouveau paramètre : depuis le début du Web, le temps de chargement d'une page est un facteur important de succès : à l'époque la bande passante d'une connexion Internet était si faible, souvenez-vous il y a 20 ans, les modems 57k étaient souvent ce qu'il y avait de mieux. Du coup, une page ne devait pas peser plus de quelques centaines de kilo-octets pour pouvoir être chargée convenablement. Aujourd'hui, les connexions de 50 MBit ou plus ne sont pas rares.

Avec l'augmentation de la bande passante, la situation s’est raisonnablement relâchée, du moins en théorie. L'utilisation croissante d'appareils mobiles et d'écrans toujours plus grands à haute résolution (il y a 20 ans, les plus grands avaient une diagonale de 19" avec 1.200 x 800 pixels, aujourd'hui, 27" avec 2.560 x 1.440 pixels ou plus) propulse le site opérateur dans une situation similaire à celle d'il y a vingt ans : plus de bande passante, mais de plus en plus de données sont transmises - c'est un peu le même problème que l’on rencontre avec la batterie de nos smartphones : elles sont de plus en plus puissantes, mais les appareils consomment de plus en plus d'énergie...

La vitesse de chargement en tant que facteur de classement (Ranking-Faktor)

Aujourd'hui, le temps de chargement prend une nouvelle dimension : les moteurs de recherche, notamment Google, intègrent le temps de chargement dans le calcul de l'index. Autrement dit, plus un site Web est lent, moins il sera bien positionné dans les résultats de recherche. Dès lors, les développeurs ont bien pris en compte ce paramètre, autrefois quelque peu délaissé.

Facteurs qui influencent le temps de charge

Il existe plusieurs niveaux où les optimisations peuvent être ressenties sur le temps de chargement. D'une part le niveau infrastructure qui regroupe l'hébergement et les techonologies employées et d'autre part le site web en soi, c'est-à-dire sa structure et ses contenus.

Niveau d'hébergement : infrastructure, serveur Web, mise en cache (caching)

  • Infrastructure : d'une manière générale, il y aura des différences signifiantes en hébergeant votre site sur un serveur dédié ou sur un hébergement mutualisé - à priori, le site en dédié sera plus performant et surtout plus stable sur toute la durée de vie, la performance n'étant pas partagée avec d'autre sites (plus ou moins gourmants). La vitesse de chargement est aussi en étroite relation avec la connexion Internet du centre de données et la façon dont les routeurs sont connectés aux serveurs. L'infrastructure du datacenter n'influence pas que la vitesse mais aussi ce l'on appelle le délai avant le premier octet (Time to first Byte) : il s’agit du temps nécessaire au premier octet du serveur pour arriver au client.
  • Serveur Web : le serveur Web peut également jouer un rôle dans l'optimisation. En général, les serveurs Web avec Nginx sont plus rapides qu'Apache – cependant, avec un peu de configuration, cela n’est pas systématiquement le cas. Le choix du logiciel a donc une influence sur la vitesse. Les paramètres tels que keep alive augmentent aussi de manière significative le temps de chargement, car la connexion au serveur Web ne doit pas être „renégociée“ après chaque requête HTTP.
  • La mise en cache est un sujet complexe car il existe plusieurs niveaux de mise en cache (CDN, HTTP reverse proxy comme Varnish Cache, local cache, cache de base de données comme memcached ou Redis, ...). La mise en cache est l'un des moyens les plus efficaces pour réduire le temps de chargement, en fonction de la manière dont elle est utilisée. Il convient de noter que tout ne peut pas toujours être mis en cache - les pages avec une fréquence élevée de changement comme, par exemple, les portails d'information qui souhaitent que les visiteurs voient toujours les dernières nouvelles.

Niveaux du site : HTML / JS / CSS, éléments média

  • Sans même évoquer un HTML défectueux, avoir une structure de page correcte joue un grand rôle. La structure HTML d'un document doit toujours être aussi légère que possible, et une imbrication bizarre doit, autant que possible, être évitée. Ainsi, si ce n'est pas absolument nécessaire, les éléments HTML ne devraient pas être insérés via Javascript.
  • Les éléments multimédias, c'est-à-dire les images, doivent toujours être optimisés pour l'appareil - une grande image utilisée pour un PC de bureau doit être chargée dans une version plus petite pour un affichage sur smartphone.

Vérification de la vitesse de votre site Internet avec www.webpagetest.org

webpagetest.org permet à quiconque de mesurer et d'analyser le temps de chargement de son site Web gratuitement (accessible publiquement).

C'est aussi simple que ça

Pour commencer une analyse du site Web, vous avez seulement besoin de :

  • URL : entrez l'URL du site, de préférence en incluant https et les www, sinon le renvoi existant sera inclus dans le temps de chargement.
  • Lieu : d’où la mesure doit-elle être effectuée ? La localisation géographique joue également un rôle important - même si webpagetest.org intègre un facteur de correction dans les résultats
  • Navigateur : il peut être important de savoir quel navigateur est testé. Selon l'emplacement choisi, les options proposées peuvent différer. Vous pouvez également sélectionner les navigateurs mobiles.
  • Nombre de tests : il est recommandé d'effectuer plusieurs tests pour obtenir une moyenne plus significative.
  • Vue répétée : il s'agit du temps de chargement si un client (navigateur) charge une deuxième fois une page pour permettre de mieux considérer les mises en cache - il est recommandé de sélectionner la première vue et la vue répétée.

Vue d'ensemble des résultats

6 indicateurs (A à F - A est la meilleure note) sont utilisés pour une évaluation rapide des résultats.

Voici la signification des 6 indicateurs :

  1. Premier octet (First Byte Time) : il s’agit de la durée de réception du premier octet du serveur Web. Cette valeur ne peut pas être modifiée de votre part. La valeur dépend essentiellement de l'environnement d'hébergement physique (centre de données, serveur) et de l'utilisation actuelle des systèmes.
  2. Keep-alive enabled : option du serveur Web qui maintient la connexion entre le serveur et le navigateur ouverte évitant ainsi que la négociation TCP soit renouvelée à chaque fois. Une page Web a souvent 100 éléments ou plus à charger - une optimisation à priori légère mais qui peut faire la différence.
  3. Compress transfer : il s’agit également d’un paramètre de serveur Web. Le serveur Web peut compresser les données afin que moins de données soient transférées. Les navigateurs modernes peuvent gérer la transmission de données compressées sans exception.
  4. Compress images : ici, les opérateurs du site sont en demande. L'indicateur montre à quel point les images chargées sont compressées. La taille peut-elle être réduite (sans perte de qualité) ?
  5. Contenu statique du cache (Cache static content) : les éléments affichés proviennent-ils du cache ou proviennent-ils directement du serveur Web ?
  6. Utilisation du CDN (Effective use of CDN) : le contenu provient-il d'un CDN (Content Delivery Network) ?

Résultats de performance

Le tableau supérieur montre d'autres valeurs indispensables à prendre en compte comme le résultat du test de vitesse. Ici, la vitesse de l'affichage du site est décomposée en niveaux pour mieux identifier où sont les temps de chargement.

  • Load Time : temps de chargement de la page du site Web. La partie Fully Loaded mesure le temps de chargement plus 2 secondes, pour permettre aux éléments chargés via Javascript d'être pris en compte.
  • Premier octet (Time to First Byte - TTFB)  : temps nécessaire pour le premier octet du serveur au navigateur lorsque le site Web est appelé pour la première fois.
  • Démarrer le rendu (Start Render) : le temps nécessaire au navigateur pour commencer à afficher le site Web.
  • Indice de vitesse (Speed Index) : l'indice de vitesse est une valeur permettant d'évaluer la vitesse mesurée. Plus cette valeur est petite, mieux c'est. Voici quelques informations détaillées sur la façon de calculer cet index : https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

Détails - diagramme en cascade

Dans le diagramme en cascade, il est très facile de voir combien de demandes sont générées par le chargement de la page et à quelle vitesse les demandes individuelles sont traitées. Sur la base de codes couleurs, les demandes peuvent également être classées selon leur type : requête DNS, HTML/texte, JavaScript/texte, image ou autre type de contenu.

Détail du contenu

La section "Content Breakdown" est particulièrement intéressante pour voir les relations (quantité en nombre de fichiers ou en kilo-octets) entre texte, CSS, Javascript et images. Cela permet également de déterminer plus facilement où se situe le plus grand effet de levier lorsqu'il s'agit de définir des priorités pour l'optimisation.

Analyse d'images

L'élément relativement nouveau "Image Analysis" permet l'analyse de fichiers d'images. Cet élément vérifie chaque image, évalue la compression et la note (A-F). Il est également possible d'utiliser le service cloud moyennant des frais, mais sans obligation. Vous pouvez faire les optimisations vous-même - il existe de nombreux programmes d'édition d'image qui peuvent être utilisés à cette fin. Il y a aussi un article dans ce blog sur l'optimisation de l'image.

Un outil professionnel gratuit

webpagetest.org est un projet mature qui peut vraiment aider à l'optimisation de site Web. On apprécie particulièrement sa gratuité et son utilisation sans inscription. Parfois, vous devrez patienter un peu pour que votre demande d'analyse soit faite... vous n'êtes pas la seule personne à utiliser ce service.

WordPress: créer un site Web privé pour la famille et les amis

Publié le par Anne-Gaële Wulkow

Dans un cadre privé, il n'est pas rare que vous ne souhaitez pas partager vos photos, vos vidéos et vos documents écrits avec tous.

Cependant, les partager avec vos amis et votre famille peut être intéressant. Facebook apparait parfois comme la solution idéale et facile. Beaucoup de personnes l’utilisent en pensant que le contenu reste bien privé - sans commentaire ...

Nous vous proposons une autre option (beaucoup plus sécurisée) : la création d’une page d'accueil WordPress accessible uniquement aux utilisateurs enregistrés. Pour que les visiteurs n’aient pas à se souvenir de leur mot de passe à chaque connexion, nous allons évidemment offrir la possibilité de s'inscrire – vous, votre famille et vos amis - via le login Facebook.

Méthode

Comment faire ?

  • Limiter l'accès
    • Configurer le plugin Members pour définir des rôles sur WordPress et rediriger l'accès à la page d'accueil du site Web via la page de connexion
    • Installer le plugin de l'éditeur des rôles WordPress (User role editor) pour créer une capacité individuelle
    • Personnaliser le fichier functions.php du thème pour cacher le contenu de la page d'accueil aux utilisateur ayant le rôle abonnés
    • Créer une page avec des informations pour les utilisateurs connectés, mais qui n'ont pas encore les autorisations appropriées
  • Installer / configurer un plugin pour permettre aux utilisateurs Facebook de se connecter sans identifiant ni mot de passe (Facebook Login)
    • Créer une application Facebook
    • Configurer le plugin WordPress Social

Limiter l'accès à la page d'accueil

Configurer le plugin "Members"

Ce plugin a deux fonctions pour notre cas d'utilisation :

  1. Interdir l'accès aux contenus de facon générale : les visiteurs doivent être inscrits.
  2. Créer un nouveau rôle Famille & Amis : en tant qu'administrateur, nous pouvons déplacer manuellement les abonnés (qui n'ont pas encore d'autorisations) au nouveau rôle Famille & Amis

Nous installons le plugin et nous nous occupons des paramètres :

  • Activation du site privé. Seul les visiteurs autorisés ont accès au contenu du site Web ; toutes les requêtes redirigent le visteur à la page d'inscription / de connexion tant que le visiteur n'est pas identifié.
  • Désactivation Feed. Aucune personne ou service non enregistré ne peut recevoir d'informations sur le contenu du site Web.

Les autres paramètres prédéfinis peuvent rester.

Créer une capacité individuelle

Le plugin d’éditeur de rôles utilisateurs (User Role Editor)  est populaire et gratuit. Il permet d’attribuer des rôles sous WordPress. Nous allons créer une nouvelle capacité pour notre projet et vérifier si le visiteur a ou non cette autorisation.

Nous créons ainsi une capacité appelée oooooxooooo et nous l’assignons au rôle "Famille et amis" ainsi qu'au rôle d'administrateur. Si votre site contient des utilisateurs utilisant d'autres rôles  (éditeur, ...), vous pouvez également les y attribuer. Dans tous les cas, NE PAS assigner la capacité au rôle "abonné" !

Paramètres supplémentaires des fonctions.php

Le plugin membres n'est malheureusement pas suffisant pour notre projet. En effet, avec ce plugin, vous pouvez uniquement inciter les visiteurs à s’inscrire. Par défaut, un utilisateur connecté a accès à tous les contenus (pages / articles) du site. Mais même si vous définissez les autorisations d'utilisateur sur toutes les pages et tous les articles, le visiteur non autorisé (par défaut, c'est le rôle abonné) obtient, par exemple, les titres des articles, seul le contenu est verrouillé.

Ce n'est pas ce que nous souhaitons ; nous voulons bloquer complètement l'accès à tous ceux qui n'ont pas explicitement l'autorisation de voir les contenus..

Code pour fonctions.php

function my_page_template_redirect(){
  if( is_user_logged_in() && ! current_user_can( 'oooooxooooo' ) && ! is_page( 'stop' ) ){
    wp_redirect( home_url( '/stop/' ) );
    exit();
  }

}

add_action( 'template_redirect', 'my_page_template_redirect' );

Pour bloquer complètement le site, les visiteurs non autorisés doivent être redirigés vers une page spécifique. Pour cela, nous ajoutons un code supplémentaire au fichier functions.php du thème.

Voici quelques brèves explications :

  • Chaque thème a une functions.php. Ce fichier central contrôle le comportement d'un thème et relie différents fichiers ensembles.
  • Le code supplémentaire vérifie 3 éléments :
  • Le visiteur est connecté
  • Le visiteur n'a pas la capacité oooooxooooo
  • Le visiteur n’est pas déjà sur la page Stop

Les 3 conditions remplies, le visiteur est renvoyé à une page "Stop".

Code pour fonctions.php Multisite

function my_page_template_redirect(){
  global $blog_id;
  if( is_user_logged_in() && ! current_user_can_for_blog( $blog_id, 'oooooxooooo') && ! is_page( 'stop' ) ){
    wp_redirect( home_url( '/stop/' ) );
    exit();
  }

}

add_action( 'template_redirect', 'my_page_template_redirect' );

Page d’informations (Stop) pour les utilisateurs rejetés

Les visiteurs qui s'inscrivent sans avoir les autorisations nécessaires ne doivent pas être simplement renvoyés sur une page blanche ou vers un message d'erreur. Il est, effectivement, préférable de les avertir qu’ils n’ont pas les droits pour accéder à cette page Web et les renvoyer vers le propriétaire de la page. Une information supplémentaire peut être indiquée aux utilisateurs de Facebook qui utilisent cette connexion pour la première fois et ne disposent donc pas encore d'autorisation.

Connexion Facebook

Afin de ne pas avoir avoir à inscrire tous vos amis au préalable et de les forcer à mémoriser des nouvelles données d'accàs, nous installons une fonction de connexion à Facebook. Comme vous l'avez probablement déjà vu, nous allons mettre en place un bouton "Connectez-vous avec Facebook" sur la page de connexion du site Web.

Quel que soit le plugin de connexion Facebook utilisé, nous avons besoin d'une application Facebook, à laquelle le plugin peut se connecter si un utilisateur de Facebook souhaite se connecter.

Application Facebook

Pour créer une application Facebook, connectez-vous ici : https://developers.facebook.com. L'explication ne va pas dans trop le détail, mais en suivant la procédure ci-dessous, vous devriez y arriver facilement.

Bien sûr, vous devez avoir des données d'accès Facebook, sinon inscrivez-vous.

  • Créez une nouvelle application
  • -> Créer l'ID de l'application - Nom d'affichage + email de contact
  • Contrôle de sécurité (Captcha)
  • Paramètres : Sélectionnez une catégorie, ajoutez une plateforme -> Site Web -> Entrez l'URL (sans slash à la fin). Enregistrez
  • App Review : publier et confirmer
  • Copiez et collez les codes dans WordPress

Configurer un plugin WordPress Social Login

Nous utilisons maintenant comme plugin WordPress Social Login : ce plugin est gratuit et peut également être utilisé pour Google, Twitter et beaucoup d'autres réseaux.

Pour que la connexion fonctionne comme souhaité, nous allons configurer les points suivants :

  1. Copier et coller les données de l'application Facebook dans le plugin
  2. Les enregistrements et les demandes d’inscription sont autorisées
  3. Les utilisateurs connectés via les réseaux sociaux reçoivent le rôle «Abonné» - c'est le groupe par défaut, mais vous êtes libre de le définir explicitement

En tant qu'admin, pour être informé qu’un nouvel utilisateur Facebook s'est inscrit, effectuez ce paramétrage : Paramètres > Connexion sociale WP > Widget> Paramètres avancés > Notification > "Notifiez uniquement l'administrateur de blog d'un nouvel utilisateur".

Ajout des données Facebook App

Paramètres généraux

Autorisation pour les nouveaux enregistrements

Facultatif : Supprimer la barre d'administration

Si vous souhaitez que les utilisateurs du groupe «Famille & amis» ou les non-administrateurs ne voient pas la barre d'administration, vous pouvez la cacher. Pour cela, un code est ajouté dans les fonctions.php :

function remove_admin_bar() {
if( ! current_user_can('administrator') && ! is_admin() ){
show_admin_bar(false);
}
}
add_action('after_setup_theme', 'remove_admin_bar');

En résumé

Nous avons modifié un site web existant, de sorte que le contenu ne peut être vu qu'après inscription du visiteur - si le rôle correspond.

Le login seul ne suffit pas, le visiteur peut ne pas appartenir au groupe des abonnés (rôle par défaut) et doit avoir une autorisation supplémentaire oooooxooooo. Les visiteurs qui ne l'ont pas sont redirigés vers une page définie au préalable qui les informe du manque de droits nécessaires pour voir les contenus du site.

Ensuite, nous avons mis en place un «connecteur Facebook» : les utilisateurs de Facebook peuvent se connecter sans entrer de mot de passe. Les utilisateurs de Facebook nouvellement inscrits sont en attente de votre autorisation et ne peuvent accéder à quoi que ce soit avant votre validation. Attention : si le visiteur utilise un adblocker, la connexion Facebook peut échouer.

En tant qu'administrateur, vous êtes automatiquement informé des nouveaux enregistrements. Si vous connaissez l'utilisateur de Facebook, vous pourrez lui attribuer le rôle «Famille & Amis».

WordPress : partagez des articles ou des pages Web sur Facebook ou Twitter – en toute confidentialité

Publié le par Anne-Gaële Wulkow

Auparavant, vous ne trouviez les boutons de partage uniquement sur les blogs, en-dessous des articles ; de nos jours, on les voit aussi sur un grand nombre de sites d’entreprises. Les boutons de partage servent à inciter les visiteurs d’un site Web à partager une contribution qu’ils jugent intéressante pour leur propre réseau. Les visiteurs peuvent aller plus loin et même la recommander – dans la majorité des cas, sont partagés : son titre, une introduction et une image sur leur propre „feed“ (fil d’actualité). En fonction de la plateforme sociale choisie, l’article est alors vu par leur „amis“ ou leurs „followers“.

Comment cela fonctionne-t-il ou que devez-vous faire en tant qu'opérateur de site Web pour intégrer cette fonctionnalité ?

Dans la majorité des cas, ça fonctionne ainsi

La plupart des boutons de partage utilisés sont déjà actifs lorsqu'un visiteur se rend sur la page Web où ils ont été placés, révélant ainsi une adresse IP, y compris l'heure et des informations sur le navigateur, l'appareil et la résolution. Si par hasard, vous êtes connecté (sur un autre onglet par exemple) au réseau, l'opérateur du réseau social peut déjà identifier le visiteur dans le même temps et utiliser les données collectées (à des fins publicitaires notamment).

Les visiteurs sont suivis sans leur consentement

En ce qui concerne la protection des données, la CNIL impose aux opérateurs de sites d'informer les internautes et de recueillir leur consentement avant l'insertion de cookies ou autres traceurs. Il n'est également pas permis de transmettre les données d'un utilisateur à des tiers, sans les informer à ce sujet. Dans la plupart des cas, les opérateurs de sites Web indiquent cette information dans les pages mentions légales (Impressum en allemand), cependant cette page n'est pas forcément la page d'entrée. De plus, les utilisateurs devraient être informés AVANT que les données ne soient transmises ...

Indépendamment des règlementations ou des lois en matière de protection des données, il parait évident de respecter la confidentialité du visiteur et de ne pas transmettre de données (aussi futiles puissent-elles paraitre) officieusement à des tiers.

Faisons une petite aparté : il y a quelques années (2011) Google est entré en litige avec un commissaire à la protection des données de Hambourg concernant l'intégration de Google Analytics aux sites Web. De nombreux sites Web utilisent le service «gratuit» de Google pour analyser l'activité des visiteurs. Dans ce cas, les données sont envoyées à Google à chaque appel de page (adresse IP, périphérique, navigateur, page accessible, etc.). Le commissaire à la protection des données a menacé de sanctionner tous les gérants de sites Web intégrant Google Analytics. Cela n'a pas eu lieu, Google a apporté quelques modifications à son intégration, ainsi une partie des données transmises est rendue anonyme (dernier byte de l’adresse IP supprimé). Mon conseil : utilisez simplement Piwik, une alternative Open Source qui respecte la confidentialité.

Voici une solution : avec Shariff, partagez vos données en toute confidentialité.

Pour les sites Web WordPress, il existe une extension gratuite appelée Shariff Wrapper qui permet l’intégration de différents boutons de partage. Shariff supporte entre autres les réseaux sociaux suivants : Facebook, Twitter, Google+, Pinterest, Linkedin et Xing.

Le plugin est particulièrement intéressant, car il peut être positionné individuellement avec des shortcodes. Aussi, la fonctiondo_shortcode() donne la possibilité d’intégrer l’affichage des boutons de partage de manière individuelle.

Pourquoi Shariff permet le partage de manière conforme à la protection de données ?

Contrairement à la plupart des intégrations de bouton "partager", les données ne sont pas transmises à des tiers lors de l'appel de la page. La fonctionnalité (via javascript) n'est activée que lorsque vous cliquez sur l'image correspondante. (Il n’y a pas d’intégration d’iframe). C'est aussi simple que ça !

Installation et configuration de Shariff

Etape 1

Il n’y a pas plus simple :

  • Installer Shariff Wrapper
  • Activer le plugin

Pour effectuer la configuration, cliquez sur Paramètres > Shariff, dans la barre latérale gauche.

Étape 2 : Paramètres de base

Ici, nous spécifions quels services doivent être affichés et dans quel ordre. Les réseaux individuels sont séparés par le symbole „pipe“ (|). Les autres options de cette page concernent les pages /les éléments et la position de l'annonce. Tous les Post Types standards et personnalisés (custom) sont répertoriés.

Par exemple, après toutes les contributions : provoque l'affichage, sur la page de la contribution et sous le texte, de la barre avec les boutons Partager.

Nous avons donc tous les éléments dont nous avons besoin. Dans la capture d'écran, il y a des PostTypes que vous n’avez pas, ne vous inquiétez pas que votre vue ne soit pas identique à celle de l’illustration.

C'est à vous de décider d'afficher les boutons dans les contributions protégées par mot de passe. A noter : le partage d'un site protégé ne mènera pas loinsi les visiteurs ne connaissent pas le mot de passe.

Étape 3 : Design des boutons

Toutes les options ne seront pas revues en détail, seulement les plus courantes et les plus importantes :

  • Design des boutons Shariff : 5 types de boutons sont disponibles, avec ou sans compteur, carré ou rond, coloré, blanc ou gris
  • Taille du bouton : petit, moyen ou large
  • Placez les boutons horizontalement sur toute la largeur : oui / non. C’est une histoire de goût
  • Organiser verticalement les boutons Shariff : par défaut, les boutons sont disposés côte à côte, ils peuvent également être empilés les uns sur les autres. Attention, si l'option «étirement» est utilisée, il se peut que le rendu ne soit pas des plus réussi...
  • Alignement des boutons Shariff (dans le widget) : gauche, droite ou centré. Shariff distingue si les boutons sont affichés sur une page, sur une publication ou dans un widget.

Ces autres options sont séduisantes :

  • Titre sur tous les boutons Shariff : intégrer une courte introduction pour expliquer les boutons ou les faire émerger visuellement
  • Masquer les boutons jusqu'à ce que la page soit complètement chargée : ceci est très utile pour empêcher les éléments de sauter continuellement pendant le chargement de la page
  • Ouvrir des liens dans un pop up (nécessite JavaScript) : je ne l'utiliserais pas personnellement, mais pourquoi pas...

Le choix de la langue peut être sélectionnée ici, bien que cela n’est pas grand chose à voir avec le design.

Étape 4 et 5 : Statistiques - Nombre d'actions

Étape 4 et 5 : Statistiques - Nombre d'actions

Étape 4, nous n’aborderons pas les options avancées..

Si vous devez indiquer à quelle fréquence une contribution ou une page a été partagée, la zone de statistiques est intéressante.

  • Activer les statistiques : définissez la case à cocher pour activer le compteur.
  • Afficher les comptes sur les boutons : comme indiqué sur l'onglet Design, les chiffres sont affichés sur le bouton.
  • Cacher les comptes quand ils sont mauvais : très pratique pour cacher le fait que le post n'a pas suscité de grand intérêt et donc peu de partage.

Paramètres pour Facebook : attention, nous allons décrire ici une action déjà plus élaborée ! Créez une application Facebook. Copiez l'ID et le code „Secret“ et intégrez-le ici

  • ID de l'application Facebook : il s’agit d’une combinaison de nombres
  • Facebook App Secret : il s’agit d’une longue combinaison de chiffres et de lettres

Voici comment créer une application Facebook

Vous pouvez vous inscrire ici : https://developers.facebook.com. Les données d'accès Facebook sont indispensables, sinon vous devez vous inscrire.

  • Créez une nouvelle application
  • Nom d'affichage + email de contact -> Créez l'ID de l'application
  • Contrôle de sécurité (Captcha)
  • Paramètres : Sélectionnez une catégorie, ajoutez une plateforme -> Site Web -> Entrez l'URL (sans slash à la fin) (enregistrez)
  • Rendre l’App Review publique et confirmez
  • Copiez et collez les codes dans Shariff

Autres paramètres et informations

Il y a 3 autres éléments Shariff intéressants : aide(Help), statut (Status) et classement (Ranking). L'aide et le statut ne sont initialement intéressants que si quelque chose ne fonctionne pas ou si vous n’avez pas réalisé les paramétrages que vous souhaitez. Dans la section de classement, les contributions et les pages sont répertoriées par nombre d'actions, si l'option de statistiques a été activée.

Utilisation individuelle de Shariff avec des codes courts (shortcodes)

Il arrive que l’on souhaite placer des boutons de partage tout à fait autre part comme cela est possible avec un plugin. Dans ce cas, vous pouvez décocher toutes les cases dans la zone de configuration de base (de sorte que les boutons ne s'affichent nulle part) et les placer ensuite avec un code court à l'endroit souhaité. Un code court offre la possibilité de placer une fonction dans une zone de texte d'une publication ou d'une page. Voici un exemple :

[shariff theme="round" buttonsize="small" align="flex-end" services="facebook|twitter"]

Les attributs exacts peuvent être pris à partir de la page d'aide des paramètres de Shariff.

WordPress : Créer des formulaires de contact avec, en option, l’envoi d’une copie à l’expéditeur

Publié le par Anne-Gaële Wulkow

Mailto ou formulaire de contact – telle est la question.

Dois-je proposer sur la page d'accueil de mon site Web un formulaire de contact ou tout simplement une adresse e-mail cliquable pour accéder au programme de messagerie installé localement ? Pour répondre à la question il faut se mettre à la place du visiteur : que préfère t-il ? Quelles expériences ont été faites à ce jour ?

Mailto - Web 1.0

Mailto représente le paramètre de l'attribut href dans la balise d'ancrage adresse mail l’adresse mail avec laquelle le navigateur est chargé d'appeler le client de messagerie par défaut et TO: le champ pré-rempli avec l’adresse spécifiée. Il est également possible de prédéfinir d'autres domaines tels que l’objet ou même le contenu du courrier.

Exemple : adresse mail avec les champs pré-remplis .

Etant donné que les champs blancs href et d'autres caractères spéciaux ne sont pas autorisés, ils doivent être remplacés par des codes hexadécimaux (% 20 = espace, %27 = apostrophe).

Très bien ! Mais attention, cela n’est pas dénué de problèmes :

  • Si aucun programme de messagerie électronique est installé sur l'appareil, rien ne se passe (le navigateur s’ouvrira si, par exemple, l'utilisateur utilise Gmail). Néanmoins, l'adresse étant indiquée, le message peut être envoyé à une date ultérieure.
  • Des robots d'exploration malveillants analysent les sites de fond en comble pour trouver des adresses de courrier électronique et les utiliser ensuite pour envoyer des spams (ou pour utiliser l'adresse comme expéditeur). Cependant, une adresse de type info@ - est quasiment toujours spécifiée et est de toute façon utilisée par les spammeurs.
  • Si vous voulez obtenir certaines informations d’une personne en particulier comme un numéro client ou des paramètres XY qui vous permettent d'identifier à quelle équipe interne le message est adressé, la méthode du mail cliquable ne vous mène malheureusement pas très loin...

Formulaires de contact 1.0

Les formulaires de contact n’existent pas depuis hier. La qualité a été améliorée de manière significative, cela s’explique sûrement du fait qu’il y ai de plus en plus de propriétaires de sites Web, utilisant un CMS (WordPress pour la plupart), et s’appropriant ce genre d'extension.

Revenons aux anciens types de formulaires de contact : beaucoup contenaient des bugs et généralement aucune validation n’était prévue (l’envoi d’un formulaire vide était souvent possible) ; c’est pourquoi nous avions des doutes quant à la bonne livraison des messages. De plus, l'expéditeur ne recevait que rarement une copie de son message.

Créer des formulaires de contact conviviaux avec Gravity Forms

En utilisant WordPress, vous avez accès à de nombreux plugins dédiés aux formulaires, comme par exemple Contact Form 7. Ce dernier est très populaire (plusieurs millions d'installations actives à ce jour) et digne de confiance. Cependant nous allons vous donner un exemple de construction de formulaire de contact avec Gravity Forms qui est un plugin particulièrement ergonomique mais qui nécessite l'achat d'une licence. Je precise à ce stade que l'utilisation de Gravity Forms est gratuite avec les tarifs d’hébergement WordPress managé de SaaS Web.

Que peut-on attendre d'un formulaire de contact moderne ?

Liste non exhaustive des fonctionnalités. Tout d'abord, du côté de l'utilisateur du formulaire :

  • Responsive Layout, le formulaire est adapté à tous les appareils de visualisation
  • Champs clairement identifiés, indiquant aussi s'ils sont obligatoires ou facultatifs
  • Stockage des données déjà saisies pour la validation, validation dynamique possible sans possibilité de soumettre le formulaire sans que les champs obligatoires n’aient été remplis correctement.

Qu'en est-il de l’accessibilité ?

  • Pour les personnes utilisant un clavier au lieu d'une souris, il est pratique de pourvoir naviguer d'un champ à un autre avec la touche TAB
  • Pour améliorer l'expérience d'utilisaton des personnes handicapées qui utilisent des lecteurs d'écran, ajouter des balises HTML spécialisées

Du côté de l'opérateur :

  • Création facile du formulaire
  • Champ avec sélection pré-programmée des fonctions (champ de texte, champ réservé aux adresses e-mail, téléphone, multi-sélection ...) et la validation appropriée du champ
  • Validation obligatoire Oui / Non
  • Logique conditionnelle : visibilité d’un champ spécifique sous condition qu’un autre soit complété
  • Assembler des champs par glisser-déposer
  • Envoi des données de formulaire à un opérateur ou une tierce personne
  • Affichage d’une confirmation de livraison à l’expéditeur - éventuellement, rediriger l'utilisateur vers une autre page
  • L’expéditeur a la possibilité de recevoir une copie des données saisies

Pour les designers et les administrateurs :

  • Les champs du formulaire peuvent être étendues avec des classes CSS pour faciliter la mise en page du formulaire
  • Eventuellement une fonction Honeypot/Captcha

 

Créer un formulaire de base

Après avoir installé Gravity Forms, vous pouvez créer votre premier formulaire - donnez-lui un nom. Ensuite, déterminez les champs.

  • Étape 1 : Créer une case à cocher si l'utilisateur veut obtenir une copie par e-mail
  • Étape 2 : Créer la notification ainsi que la logique pour envoyer la copie si la case a été cochée

Option d'installation pour obtenir une copie de données

L’étape 1 doit être effectuée dans la page de création du formulaire.

Déplacez, d’un clic de souris, l’élément Cases à cocher de la droite vers l’emplacement souhaité. Par défaut 3 cases sont proposées, vous en supprimez donc 2 et indiquez votre phrase, par exemple "Envoyez-moi une copie des données du formulaire de contact". Vous pouvez cocher la case, ainsi elle sera pré-cochée dans le formulaire.

Pour la deuxième étape, sélectionnez les éléments internes du formulaire sous « Paramètres »> « Notification ».

Ici, nous avons défini les paramètres suivants :

  • Nom : ce champ est obligatoire, mais sans grande importance
  • Envoyer à : « Sélectionner un champ »> « E-mail » de la liste déroulante; si vous avez nommé le champ E-mail de façon différente, sélectionnez dans la liste, bien sûr, le nom que vous lui avez donné. Veuillez noter que le champ e-mail est évidemment un champ obligatoire.
  • De : nom de l’expéditeur: les utilisateurs verront alors le nom de l'expéditeur de l'e-mail
  • Votre e-mail : celui-ci peut être modifié
  • Objet : tout simplement l’objet de l'e-mail
  • Message : insérez ici votre texte. Il est possible d'insérer des champs préalablement remplis. Pour ce faire, cliquez sur l'icône à droite de l'éditeur visuel. Bien sûr, vous pouvez également ajouter un message d'accueil ou tout autre texte.
  • Logique conditionnelle : cocher la case pour activer la logique. Ensuite, sélectionnez le champ qui doit être rempli comme condition.

Gravity Forms, c’est si simple !

En fait, on peut aussi éviter du travail, ne pas demander à l'utilisateur du formulaire s'il souhaite recevoir une copie, mais tout simplement de le faire... mais je pense qu'un utilisateur, surtout s'il a fait de mauvaises expériences dans le passé, ne va pas s'attendre à recevoir un double et se sentira donc peut-être gêné d'utiliser le formulaire.

Pour en revenir à la question du début de l'article concernant le choix entre le formulaire de contact ou l’adresse email, pourquoi ne pas proposer les deux et laisser le choix au visiteur ?

OpenProject, mode d’emploi suite et fin

Publié le par Anne-Gaële Wulkow

3. Exécution

Pour l’exécution de vos projets, vous bénéficiez là encore de différents outils. Maîtrisez l’ensemble de vos projets avec un tableau de bord détaillé (Issue tracking), performant et personnalisable. Le flux d’activité (Activity stream) vous permettra aussi de savoir qui a travaillé sur quoi, quand et quelles actions ont été réalisées. Il vous sera également possible d’organiser des réunions depuis l’outil (Meetings). Enfin, vous utiliserez le glisser-déposer pour modifier des tâches, en rajouter ect…

Le tableau de bord pour une vue d’ensemble

Grâce au tableau de bord (issue tracking), vous pourrez gérer tous les livrables et les activités de vos projets avec des fonctionnalités de collaboration puissantes.

Ayez une vue d’ensemble de toutes vos actions - tâches, risques, fonctionnalités, bugs et bien plus encore - avec la possibilité de définir des flux de travail et des champs personnalisés pour adapter OpenProject à vos besoins. Conservez toutes les informations en un seul endroit.

Gestion du flux d’activité (activity streams)

Obtenez des rapports d'état instantanés et restez informé en temps réel de toutes les activités de vos projets.

Organisez des réunions (Meetings)

Utilisez la fonction Meetings pour gérer les agendas et compte-rendu et informer les participants du projet des derniers développements.

Vous avez la possibilité d’y intégrer des tâches et d’envoyer des notifications par email aux participants.

Méthode agile : SCRUM

Scrum (boite à outils) est une méthode agile dédiée à la « gestion de projet » qui a pour objectif d’améliorer la productivité de son équipe. Scrum tient son origine du terme sportif de rugby signifiant: mêlée ; car tous les acteurs doivent restés soudés dans l’accomplissement de leur tâche pour atteindre l’objectif final.

Scrum est idéal pour développer un schéma d’organisation de développement de produits complexes.

Grâce à cette méthode, utilisez le tableau de tâches pour organiser les livrables en tâches individuelles et mettre à jour leur statut par glisser-déposer.

4. Performance & contrôle

Créez des rapports personnalisés et managez votre budget

Par projet, vérifiez le temps passé à chaque action et les coûts alloués et créez des rapports personnalisés. Ces rapports vont vous permettre de suivre le temps et les coûts consacrés à un projet pour un aperçu précis et actuel.

Créez et managez vos budgets

Planifiez le coût à chaque phase du projet. Cet outil vous permettra d’avoir, en un coup d’oeil, un apercu de l’état budgétaire de votre projet. Phase par phase. Action par action.

5. Une communauté active et un accompagnement performant par SaaS Web.

OpenProject dispose d’une large communauté très active. Vous êtes libre d’accéder depuis le Forum à des discussions traitant de l’ensemble des fonctionnalités du logiciel.

Témoignage client :

« En tant que principal fournisseur Suisse de solutions de pompage, turbines et systèmes, nous nous félicitons de l’utilisation du logiciel open source sans avoir à gérer sa maintenance. Avec Open Project managé par SaaS Web, nous sommes toujours à jour et en mesure de planifier et de réaliser tous nos projets dans les meilleures conditions. » Christian Vetterli, Responsable de la technologie et de la logistique, Vice-président exécutif de la société Häny.

SaaS Web assure l’hébergement et la gestion de vos applications : updates, upgrades, services de sécurité 24/7 (patchs de sécurité, gestion des malwares, correctifs, sauvegardes de données). Confiez-nous l’infogérance de vos projets et concentrez-vous sur l’essentiel : votre métier !

Nous terminons cet article avec une dernière nouveauté : la possibilité d’intégrer le logo de votre entreprise vs le logo OpenProject. Plus personnalisable, la version 7 d’OpenProject permet aux utilisateurs de définir leurs propres schémas de couleurs pour créer leur propre identité d'entreprise dans OpenProject.