Nouvelle année, nouveau projet : Lancez votre e-boutique !

L'année 2018

Chaque nouvelle année est synonyme de nouveaux défis, de créativité et de nouveaux projets. 2018 ne fera pas exception car 1 année, c’est aussi 365 opportunités ! Saisissez la vôtre, transformer votre idée en entreprise et lancez-vous sur le Web. Pourquoi ? Comment ? Nous vous donnons quelques pistes de réflexion.

Pourquoi se lancer sur Internet ?

Les chiffres parlent d’eux-mêmes.

D’après l’étude du Credoc réalisée en 2016, 85% des Français ont accès à Internet, 18h par semaine sont consacrées au surf sur Internet et 60% des Français ont effectué au moins un achat en ligne en 2016. L’étude de la Fevad réalisée au second trimestre 2017 en France va dans le même sens. Ce sont près de 20 milliards d’euros qui ont été dépensés sur Internet ! Le panier moyen baisse légèrement mais cela s’explique par une hausse de la fréquence d’achat. Cette croissance touche aussi le nombre de cyberacheteurs. L’offre s’élargie également avec près de 208 000 sites marchands actifs. Cette embellie et ce marché prometteur ne concerne que la France, imaginez donc le potentiel de développement à l’international.

Des avantages certains.

Que vous soyez créateur d’entreprise ou dans le cadre d’un développement d’entreprise, vous allez bénéficier d’avantages certains rapidement.
Dans le cas d’une création d’entreprise, il vous sera possible de devenir votre propre patron avec un coût de lancement peu élevé ou du moins facilement maitrisable. Cela vous offre la possibilité, et même la chance, de pouvoir envisager des essais de produits, de marchés, de positionnement ou tout simplement de vous faire la main. Sur le Web, vous avez le droit à l’erreur sans que l’investissement financier ne vous plombe au premier faux pas.

Dans le cas du lancement d’une PME sur le Web, vous allez pouvoir bénéficier d’opportunités de croissance comme nullepart ailleurs. Etendez vos revenus, votre activité ou encore votre offre. Vous pourrez aussi accéder aux marchés mondiaux à moindre coût et élargir rapidement votre clientèle. Le coût de lancement est là aussi bien moins élevé que l’ouverture d’une succursale, par exemple.

Comment se lancer sur Internet ?

Il y a différentes étapes essentielles qui nécessitent du temps et de la réflexion notamment dans le cas d’une création d’entreprise.
La réalisation d’un benchmark et l’étude du marché, du secteur d’activité et des concurrents présents sont un énorme travail de base. Ce travail nécessite engagement, rigueur et précision.

Pour réaliser une étude de marché il faut, tout d’abord, définir quels critères sont importants. Les plus fréquents sont les suivants :

Sélection du secteur géographique : avec Internet, vous pouvez vendre dans le monde entier. Attention cependant à ne pas vouloir commencer trop grand. Certes, plusieurs outils permettent la création de sites Web multilingues mais mieux vaut commencer petit et sur un marché ou un pays spécifique pour appréhender toutes les difficultés avant de s’ouvrir davantage. Il est nécessaire de prendre en considération votre capacité de travail et l’organisation de votre entreprise. En effet, si une équipe est dédiée par pays dès le lancement de votre activité sur Internet, lancer un site Web en multilingues est potentiellement envisageable.

Pour lister la concurrence directe et indirecte, vous pouvez commencer par une observation naturelle : lors de vos propres achats sur Internet ou lors de discussions entre amis, des noms de marques, de produits apparaissent et ressemblent à ce que vous envisagez de proposer ? Notez-les et renseignez-vous par la suite.

Quand le choix de la solution technique à choisir se présente, l’accompagnement par un spécialiste est important. De nombreux paramètres doivent être pris en compte lors de la création d’une boutique en ligne.

Il existe plusieurs types de sites Web : site vitrine, e-boutique, blog… Vous devez, dans un premier temps, définir les grandes fonctions du site. Souhaitez-vous présenter un service, un produit ou une entreprise ? Souhaitez-vous vendre 1 produit ou plusieurs types de produits ? Souhaitez-vous communiquer, donner de l’information ?

Ensuite viendra le choix, l’achat et la gestion du nom de domaine et le choix de l’hébergeur. Pour des questions de praticité, il est judicieux de choisir d'être hébergé chez le prestataire qui a réservé votre nom de domaine et celui qui réalisera les prestations de développement et leurs mises à jour. Ce dernier point est crucial mais malgré tout souvent oublié, ce qui a des conséquences parfois catastrophiques.

Prestahop, WooCommerce, Magento…votre prestataire sera à même de vous conseiller sur le choix de la plateforme technique en fonction de vos besoins, de votre budget. La différence qui réside souvent entre un contrat d’hébergement chez un prestataire ou chez un autre est la prise en main ou non de l’administration de la plateforme technique. Une fois celle-ci mise en place, qui va s’occuper d’assurer les mises à jour, les upgrades, les services de sécurité 24/7 (patchs de sécurité, gestion des malwares, correctifs, sauvegardes de données). Se tourner vers un prestataire qui assure des services managés est la meilleure solution.

Services managés = Business simplifié. Keep it in mind !

Performance, technicité, service client : découvrez les bonnes résolutions de SaaS Web Internet Solutions

Les bonnes résolutions

Après une petite recherche effectuée sur le Web, j’ai appris que les résolutions les plus plébiscitées sont, tenez-vous bien :

  1. Perdre du poids - après le foie gras, la bûche et les coupes de Champagne, c’est compréhensif.
  2. Faire du tri - je n’ai pas besoin de voir votre boite email pour savoir que cela pourrait bien vous concerner.
  3. Economiser – qui ne souhaite pas le faire ?
  4. Profiter plus de la vie – en créant son propre business en ligne peut-être ? Si vous avez des idées, nous avons les solutions techniques.
  5. Assurer sa forme et sa santé pour les années futures - après le foie gras, la bûche et les coupes de Champagne, c’est compréhensif.

Est ce que SaaS Web s’y retrouve ? Penchons-nous maintenant sur les résolutions de votre expert du managed Hosting.

  1. Continuer d’être performant et pointilleux sur le plan technique
  2. Continuer à nourrir notre blog pour vous apporter de la documentation sur notre secteur et nos produits. Vous fournir des chiffres clefs et des articles qui prennent un peu de hauteur sur notre activité.
  3. Remodeler nos services et refondre le site pour être encore plus clairs et miser plus sur nos points forts : l'hébergement pro

A bientôt.

Testez le chargement de votre site avec webpagetest.org

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.

Use cases : de nouvelles pages dédiées aux cas d’usage pour vous y retrouver.

Nous avons lancé de nouvelles pages sur le site saasweb.net/fr dédiées aux différents use cases auxquels SaaS Web peut apporter des solutions.

Les compétences et les champs d’intervention de SaaS Web étant divers et variés, il nous a semblé important de remettre de l’ordre et de bien identifier chaque besoin clients puis de mettre en face les réponses que nous pouvons apportées.

Intitulé Use cases, cet onglet indique, pour chaque catégorie :

  • E-commerce
  • Sites Web & Portails Internet
  • Développement
  • Management de projet
  • CRM moderne
  • Communication et
  • Management du Savoir d'entreprise...

...les points forts de SaaS Web et ce que l’expérience et les connaissances techniques de nos experts vont apporter ainsi que les applications idéales pour répondre au plus juste à chaque cas identifiés.

Nous espérons ainsi faciliter la compréhension de nos champs d’intervention et permettre à tous nos prospects de bien identifier de quelle façon SaaS Web peut leur apporter du soutien, un accompagnement ou une solution.

N’hésitez pas à nous faire part de vos commentaires et vos attentes.

Bonne journée

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

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

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 ?

WordPress : Réalisez très simplement un site multilingue avec WPML

De nos jours, nous rencontrons de plus en plus de sites Web multilingues. Cela semble simple à mettre en place et même aller de soi, encore faut-il avoir les bons outils.

Que faut-il considérer lorsque l’on développe un site multilingue ?

  • Ai-je besoin d’un rapport 1:1, c'est-à-dire qu'à chaque page du site correspond une page dans l'autre langue (ou les autres langues) ?
  • A contenu équivalent, faut-il une URL propre à chaque langue ? Ai-je besoin d’un nom de domaine différent pour chaque langue (par ex site-web.fr pour le contenu en francais et website.com pour la version en anglais) ?
  • Ai-je besoin d’un sélecteur de langue ? Le sélecteur renvoie-t-il sur la page traduite correspondante ou sur la page d’accueil de la langue choisie ? Le visiteur doit-il être redirigé automatiquement vers le contenu correspondant à la langue de son navigateur ?
  • Les résultats d’une recherche doivent-ils uniquement afficher ceux de la langue dans laquelle la recherche a été faite ?
  • Le code source du site indique-t-il la langue pour les moteurs de recherche ?
  • Est-ce qu’une équipe qui travaille sur les contenus d’une langue a accès aux contenus des autres langues ou est-ce que les accès sont séparés ?

WordPress et le multilingue en général

 Il est important de savoir que WordPress ne possède pas, à l’origine, de fonction pour le multilinguisme du moins, pas directement.

Par le biais du mode Multisite (network) qui permet la création de sous-sites plus ou moins indépendants, il est possible d’utiliser les sous-sites comme des variantes linguistiques. Plus de détails par rapport à cette option plus loin dans cet article.

WordPress propose donc la création de sites multilingues via plugin : nous pouvons en citer quelques uns comme WPML (sans doute le plus populaire, payant), Polylang (freemium) ou encore MultilingualPress (payant).

Multilingue : la méthode manuelle sans outils

En théorie, un site Web multilingue peut être réalisé sans plugins et avec quelques efforts de programmation : les variantes linguistiques sont créées comme des pages principales, par exemple, « de » et  « fr » Les pages des variantes sont alors créées dans chacune des langues en sous-pages de « de » et « fr ». Pour que les menus allemands ou francais soient affichés au bon moment, il faut modifier le/s template/s et ajouter un « aiguillage » qui permet d’afficher tel ou tel menu selon la racine de l’arborescence (« de » ou  « fr »).

Aussi faut-il rajouter dans ses templates les markups HTML qui identifient la langue affichée pour que les moteurs de recherche puissent indexer les contenus correctement. En ce qui concerne les widgets, il existe des plugins comme par exemple Content Aware Sidebars qui permet d’afficher des widgets selon des critères choisis ; ainsi il est possible d’indiquer que telle page affiche un widget à contenu allemand et une autre, dans la même sidebar, un widget à contenu français.

Mais ne nous attardons pas trop sur cette option pour créer un site multilingue, ce n'est pas vraiment pratique. Surtout, la chose se complique lors de l'utilisation de WooCommcerce par exemple...

Multilingue avec WordPress multisite

Comme nous l'avons décrit ci-dessus, le mode Mutlisite de WordPress est une option à part entière pour créér des sites multilangues.

Pour ce faire, il faut installer WordPress en version multisite. Ce n'est pas difficile, mais les installeur 1-click que les hébergeurs proposent dans leurs Packs ne sauraient le faire. Ainsi, il ne faut pas hésiter à mettre la main à la pâte (!) ou éventuellement demander à l’agence de votre confiance de vous aider ;-).

Une fois Multisite mis en place, on découvre d’emblée une des grandes différences par rappport à la version standard de WordPress : il existe un Super-Admin. Le Super Administrateur peut accéder aux autres sous-sites et installer des thèmes et plugins. Les « Admins » normaux sont responsables du sous-site qui leur a été attribué, mais ils ne peuvent pas installer des plugins comme des thèmes WordPress, ils ne peuvent qu’activer ou désactiver les plugins et themes installés par le Super Administrateur. Aussi il est important de savoir, à ce stade, que tous les plugins ne sont pas compatibles au mode Multisite.

En tant que Super Administrateur créons par exemple, 2 sous-sites, l’un en « de », l’autre en « fr » et nous définissons deux équipes qui gèrent les deux sous-sites. Les mêmes utilisateurs peuvent avoir accès aux 2 sous-sites, ou seulement à l’un des deux. Cette séparation des accès est une fonctionnalité demandée par certains propriétaires de sites Web : des équipes distinctes pour des variantes linguistiques distinctes. Il est clair qu'une telle fonctionnalité est plutôt intéressante pour les grandes entreprises ou du moins celles avec des flux de travail strictement définis.

Cette séparation en sous-sites a l’avantage de maintenir des sites assez indépendants, mais en même temps, l’inconvénient est que, avec le temps, les deux sous-sites peuvent évoluer trop différemment et donc ne plus correspondre aux lignes marketing.

Pour connecter deux sous-sites, il existe différents plugins comme par exemple Multisite Langue Switcher, qui permet entre autre d’attribuer à chaque page sa correspondance dans l’autre sous-site (ou sous-sites)

Le multilangue avec WPML

Concentrons-nous maintenant sur le coeur du sujet de l'article : WPML (WPML = WordPress MultiLingual). Je ne vais pas vous expliquer en détail toutes les fonctionnalités du plugin, nous allons nous focaliser sur l’essentiel.

Contrairement au mode multisite, WPML ne demande pas de préparation particulière de WordPress, c’est-à-dire qu’il n’est pas indispensable de prendre des mesures très en avance dans le temps. Certes, pour revenir sur l'option « Multisite », il est possible de convertir un site WordPress „normal“ en version multisite en important les contenus dans un sous-site, mais c’est assez compliqué et sujet à erreur.

WPML est composé de plusieurs modules, il n’est toutefois pas indispensable de tous les installer. Le module principal est « WPML Multilingual CMS » – dans bon nombre de cas, d’autres modules seront nécessaires tels que "WPML String Translation", "WPML Translation Management", "WPML Sticky Links" et "WPML CMS Nav".

Paramétrage de base

Une fois installé, vous définissez les langues supplémentaires qui doivent être créées. Vous pouvez définir différents paramètres tels que :

  • la langue par défaut
  • l’affichage des variantes de langue dans l’URL en sous-dossiers ( "/ de", "/ fr") ou en tant que paramètre GET ( "?lang=de", "?lang=fr").
  • le sélecteur de langues : s’agit-il d’une liste de langues cote à cote ou d’un menu déroulant ? Veut-on afficher des petits drapeaux ?
  • La redirection automatique sur le contenu de langue du navigateur du visiteur

Doublement des pages WPML pour traduction

Une fois les paramétrages de base sélectionnés, il est temps de passer aux traductions : les pages et les articles peuvent être proposés à la traduction d’un simple clic de souris (en copiant ou non le contenu). Une fonction intéressante consiste à lier le contenu d’une langue à sa traduction, ainsi, vous serez averti des changements effectués dans la version originale afin de mettre à jour la traduction.

Menus spécifiques à une langue

Il ne suffit pas de traduire que les pages du site. En effet, les menus doivent être également affichés traduits automatiquement dans la langue sélectionnée : facile avec WPML. Soit vous utilisez la fonction de synchronisation (Synchronisation du menu) qui crée automatiquement tous les menus nécessaires, il ne reste plus qu’à traduire les titres ou vous créez directement un nouveau menu de navigation, sélectionnez la langue et indiquez à quel menu cette traduction correspond.

Et bien d’autres fonctionnalités

Sans entrer dans les détails, notez que WPML a des modules pour une traduction optimisée :

  • Gravity Forms (un plugin payant pour la création de formulaires)
  • Différents « page builder » : les „page builder“ sont des plugins qui remplacent l'éditeur visuel de WordPress ; ils permettent de créer facilement des mises en page complexes dans la zone de contenu. Parmi les plus populaires, citons un plugin gratuit SiteOrigin Page Builder ou encore Visual Composer (payant).
  • WooCommerce : l’extension e-shop pour WordPress

Avec SaaS Web, utilisez gratuitement WordPress WPML

Depuis longtemps, nous offrons l'utilisation de différents plugins sous licence au prix de l’hébergement de WordPress managé par SaaS Web. En plus de WPML, les plugins Gravity Forms et SearchWP - fonction de recherche améliorée - et la version Pro du plugin « Newsletter » sont également disponibles sans surcoût.

OpenProject, mode d’emploi suite et fin

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.

OpenProject, mode d’emploi – première partie

A l’occasion du lancement de la nouvelle version d’OpenProject (version 7), nous avons choisi de mettre cette application à l’honneur en lui consacrant un article dans notre Blog !

Nous allons vous présenter les 6 briques majeures qui font OpenProject managé. En ajoutant le terme « managé » à OpenProject, j’ajoute la sérénité et la tranquillité d’esprit : ne vous souciez pas de sa maintenance ; SaaS Web s’en occupe.

Tout d’abord, nous mettrons l’accent sur les 4 briques indispensables à la bonne utilisation du logiciel en détaillant les principales fonctionnalités puis nous nous pencherons sur 2 briques « d’accompagnement » plus qu’utiles pour une bonne prise en main de l’outil et surtout assurer une mise à jour en continue. En fil rouge, nous vous présenterons les nouveautés de la version 7.

Destiné essentiellement aux PME et startups, OpenProject est une application open source de gestion de projet. CRM, ventes, planification, suivi, collaboration, facturation, paiement…cet outil vous permet de ne plus rien laisser au hasard.

CONCEPTION    DÉFINITION&PLANNING   EXECUTION   CONTRÔLE

Nous allons voir en détails les outils disponibles à chaque étape de gestion de projet.

1. La conception de votre projet.

Un projet démarre souvent autour d’une idée, d’un brainstorming ou alors en réaction à un concurrent ou au tendance du marché.

Une fois les idées collectées et les premières guidelines définies, créez votre projet et éventuellement des sous-projets puis venez y intégrer autant de tâches que nécessaire. Appelées Work Package, ces tâches permettent de définir clairement toutes les actions à réaliser pour développer le projet.

Comprendre en détail ce qu’est un Work Package et les éléments qui le composent est indispensable à l’utilisation d’OpenProject : une fois assimilé, vous aurez déjà réalisé plus de la moitié du chemin.

Work package : Sous-ensemble d’un projet qui peut être affecté à une équipe ou à une personne spécifique pour l’exécution d’une action : tâches, bugs, repère et plus encore. Un Work Package a un type, un identifiant et un sujet.

Au niveau de la gestion d’un projet, d’autres attributs peuvent être ajoutés, tels que le responsable de la réalisation du travail, le nom de la version à laquelle un paquet de travail est affecté, le nombre de tâches affectées pour évaluer la taille du projet ect…

Nouveau : Il peut être difficile d’appréhender toutes les informations contenues dans un Work Package sur un petit écran, aussi la version 7 offre la possibilité de passer en mode Zen. En cliquant sur l’icône du mode Zen, masquez la navigation de côté et d’en-tête et affichez uniquement les informations du Work Package. Le mode Zen active également le mode plein écran du navigateur.

Prenons un exemple : votre objectif est de créer un site Web pour un client et d’assurer tout le suivi de la conception jusqu’à la facturation.

La 1ère action pourrait être : créer un site Web dont une des étapes pourrait être de créer la navigation du site Web.

A chaque action, vous devez définir s’il s’agit :

  • d’une tâche (Task) – action concrète à réaliser par une ou plusieurs personnes pour une date définie. Par exemple : créer la navigation du site Web
  • d’un bug – là aussi il s’agit d’une action bien précise à mener dans un temps imparti. Par exemple : corriger le lien de la page www.

L’ensemble des tâches et des bugs sont indiqués dans la timeline (chronologie ou ligne du temps) du projet sous forme de phase ou de repère.

  • Phase – Work Packages avec différentes dates de début et de fin.

Par exemple : créer le concept du site Web.

  • Jalon ou repère (Milestone) – Work Packages avec des dates de début et de fin identiques.

Par exemple : Tester les fonctions du site Web.

Un statut défini la progression de chaque action : en cours, programmé, terminé…

Nouveau : Une dernière nouveauté concernant les Work Packages : la possibilité de filtrer ces derniers par date (par exemple, Date de début, Date d’échéance, Créé le, Mise à jour) est maintenant incluse dans l’option de filtrage en fonction d’une date fixe.

2. La définition & le planning du projet

Plusieurs outils sont à votre disposition pour suivre et gérer votre projet : la timeline (ligne du temps), le calendrier et la roadmap (feuille de route). Pour chacun de ces outils, vous êtes libre de modifier les éléments que vous souhaitez y voir figurer.

La timeline de votre projet vous permet d’avoir une vision globale de votre projet. D’un coup d’œil, identifiez quelle équipe ou quelle personne délivrera tel ou tel Work Package. Vous pouvez rapidement repérer les retards ou les manquements. Il vous est tout à fait possible de créer et de suivre plusieurs projets simultanément dans une seule ligne du temps.

Nouveau : La timeline fait partie des éléments enrichis dans la nouvelle mouture OpenProject. Celle-ci est encore plus interactive et conviviale. Alors que la version précédente nécessitait plusieurs étapes pour chaque mise à jour, la nouvelle timeline permet une création et une mise à jour rapide des éléments directement dans celle-ci par glisser-déposer. Aussi, il est désormais possible de mettre en relation 2 Work Packages différents et de voir visuellement, dans la timeline, ces relations.

L’ensemble des phases et des actions à mener est automatiquement indiqué dans un module Calendar qui permet d’afficher et d’utiliser un calendrier dans un projet.

Visualisez facilement l’état d’avancement avec la roadmap. La page d’aperçu de la Roadmap affiche les versions classées par ordre alphabétique et les Work Packages qui leur sont assignés.

Obtenez un aperçu des étapes suivantes, des versions, ect… Vérifiez le statut des livrables et le temps alloué (time tracking) pour différentes actions.

Le time tracking est également un module. Il permet aux utilisateurs de consigner le temps passé sur chaque Work Package. Une fois que le module de suivi du temps est activé, le temps passé sur chaque action peut être enregistré via le menu d’action d’un Work Package.

Vous retrouverez dans notre prochain article les étapes finales de la gestion du projet : son exécution et le contrôle de celui-ci. En prime, nous nous pencherons sur l’accompagnement assuré par SaaS Web.

A bientôt !

PS : nous remercions l’équipe OpenProject qui nous a autorisé à utiliser les captures d’écrans utilisées dans cet article.

[Update] Steve : maintenance avec comparaison d’images – Gestion WordPress pour professionnels

Action : mises à jour WordPress

Les mises à jour de base WordPress fonctionnent généralement sans aucun problème. Cependant lors des mises à jour de plugins ou de thèmes cela peut se passer differemment. Les causes de certaines difficultés de mises à jour peuvent être très différentes : bugs dans le plugin lui-même, problème de compatibilité avec d’autres plugins … l’impact potentiel des erreurs est également très différent, dans certains cas, c’est le site dans son intégralité, qui ne s’affiche plus ou alors des messages d’erreur PHP peuvent apparaître au milieu de la page. La plupart du temps, il ne s’agit que de petits désagréments, mais qui restent néanmoins indésirables.

 

Comparaison des captures d’écran après une mise à jour

Avec le système de comparaison « avant et après » sous forme de captures d’écran automatiques du site, même de petites erreurs peuvent être détectées. Le système recherche automatiquement tout changement et indique le nombre de différences observées (en%).

Les erreurs survenues sont conservées dans l’historique des mises à jour de Steve avec les captures d’écran correspondantes. Cela permet, le cas échéant, l’importation de sauvegardes appropriées – par défaut, à chaque processus de mises à jour, une sauvegarde est créée pour le site.

Le Steve de demain : sauvegarde automatique de restauration, marquage (tagging) automatique de plugin et bien plus…

Prochainement, il est prévu d’étendre la fonctionnalité SLA pour nos clients WordPress :

  • Les clients pourront recevoir un e-mail avec un lien vers la comparaison des captures d’écran afin de vérifier que tout est en ordre pour la mise à jour.
  • Les clients pourront spécifier que tout est en ordre, ou alors que des erreurs sont apparues ; les messages seront directement transmis à Steve afin de restaurer la version précédente. Steve pourra tagger les plugins comme « cassé » le cas échéant.
  • Le processus de staging (copie du site et mises à jour effectuées sur la copie) peut également être transposé : après avoir été validé par le client, la mise à jour est effectuée sur l’instance WordPress en live.

Steve : le nouvel outil de management WordPress de SaaS Web.

Steve : le nouvel outil de management WordPress de SaaS Web.

Après plusieurs mois de développement, Steve est enfin lancé en production. Steve, c’est la perfection-même et vous allez comprendre pourquoi en lisant cet article. Steve, c’est aussi un prénom. Mais pourquoi avoir choisi ce prénom pour ce nouvel outil ? En hommage à Steve Jobs mais pas seulement. Siri, Alexa, Cortana…cela vous dit quelque chose ? Il s’agit des noms donnés à certains bots (logiciels ou programmes informatiques) intelligents. SaaS Web a voulu rétablir l’égalité homme-femme et a donc baptisé son bot, Steve. Profitons de cet article pour aussi remercier Daniel Jagszent, associé de SaaS Web, qui a longuement travaillé pour développer ce projet.

Steve remplace InfiniteWP.

InfiniteWP (IWP) est une application Web PHP/MySQL populaire qui permet la gestion de nombreux sites Web WordPress. Cette application est gratuite mais pour un usage professionnel, il est indispensable d’utiliser ses add-ons payants. IWP offre de nombreuses fonctionnalités au travers de ses extensions. De nouvelles fonctions sont en permanence développées, malgré cela, l’application n’a jamais donné entière satisfaction.

D’une part, les fonctionnalités nécessaires et donc très importantes pour la gestion de site Web professionnels (comme le SLA pour la gestion des mises à jour ou les sauvegardes automatiques avant les mises à jour) ne sont pas disponibles.

D’autre part, la qualité intrinsèque du logiciel n’est pas satisfaisante : nombreux bugs, fonctionnalités inachevées…

 Steve gère WordPress de façon professionnelle.

Avec cette nouvelle application (écrite en Ruby on Rails), la gestion des sites Web WordPress est parfaitement adaptée aux besoins de SaaS Web.

Zoom sur les principales features :

  • Détection automatique des instances WordPress sur les serveurs.
  • Installation automatique de plugin-MU (Must Use) SaaS Web pour gérer la communication entre WordPress et Steve.
  • Sauvegardes automatiques optionnelles à chaque mise à jour
  • Sauvegardes quotidiennes (de nuit) de toutes les instances WordPress. (Sauvegarde de fichiers incrémentielle)
  • Restauration des sauvegardes en 1 clic
  • Intégration SLA individuelle : par exemple, pour les sites VIP les mises à jour ne sont possibles qu’en dehors des heures d’ouverture (à l’exception des mises à jour de sécurité)
  • Audit de vérification : Login de toutes les actions utilisateurs sur WordPress
  • Prise en charge pour les sites WordPress multi-sites.

Steve, la facilité d’utilisation

Steve est l’employé modèle qui travaille beaucoup mais il est aussi un logiciel ergonomique qui permet, au quotidien, de travailler avec WordPress de manière confortable et efficace.

Voici quelques exemples :

  • Menu simple sans imbrications compliquées
  • Champ de recherche pour les sites Web muni d’un système d’auto-complétion
  • Raccourcis pour chaque action directement dans la liste des sites
  • Communication entre le navigateur et le serveur via WebSocket pour un rafraichissement des résultats sans recharger la page.

Steve : le partenaire de demain

SaaS Web a déjà planifié la prise de capture d’écran des pages d’accueil (et d’autres pages) de facon automatique avant et après une mise à jour pour rendre des comparaisons possibles et agir en cas de changements non souhaités.

Grace à ces captures d’écran, la restauration d’un backup est plus rapide car l’on possède une image de ce que l’on doit restaurer.

Notez aussi que la création d’un clone d’un site live avant une mise à jour – actuellement ce processus est possible mais manuel – si le rendu est correct, la mise à jour peut être lancée en live.

SaaS Web continue de travailler sur bien d’autres fonctionnalités … soyez patients.

SaaS Web offre des solutions adaptées aux artisans. Zoom sur le témoignage de Bo Stores.

Expert en serrurerie – spécialiste de tous les systèmes de motorisation pour les volets roulants, stores et portes de garage, le gérant de BO STORES avait besoin de refondre son site Web initialement conçu avec un logiciel de création de site en ligne peu flexible.

« Je recherchais une solution économique et clé-en-main, car je n’ai ni le temps, ni les connaissances techniques pour créer un site moi-même.  Il me fallait aussi quelque chose de plus qualitatif avec un rendu plus professionnel pour assurer ma crédibilité auprès de prospects mais aussi pour être plus visible en ligne et mieux référencé» Yves-Marie Bartouche, gérant de l’entreprise BO STORES.

En proposant l’utilisation de WordPress, SaaS Web a pu fournir un site professionnel qui pourra s’enrichir au fil du temps de nouvelles photographies des chantiers réalisés. En assurant l’accompagnement, des conseils ont été donnés quant au contenu pour un meilleur référencement.

«  Je suis satisfait de mon site bo-stores.fr. J’ai aussi une adresse email professionnelle @bo-stores.fr, idéale pour prospecter. Le fait que SaaS Web gère l’hébergement (Hébergement managé) a aussi été un argument de poids car je ne souhaite pas m’impliquer dans la gestion de mon site. Je laisse les professionnels s’en charger !»

SaaS Web tente sa chance aux Trophées EuroCloud France.

EuroCloud France est la branche française de l’organisation européenne EuroCloud, premier réseau d’acteurs du Cloud en Europe avec 1500 entreprises membres réparties dans 31 pays.

Depuis 10 ans, les Trophées du Cloud Computing sont organisés chaque année afin de récompenser ceux qui font le Cloud. Plusieurs catégories sont ouvertes : meilleure Start-Up, meilleur cas client, meilleure performance financière, responsabilité Sociétale d’Entreprise et meilleure solution Cloud. SaaS Web concourt dans la catégorie des meilleures Solutions Cloud.

SaaS Web a mis en avant son Savoir-Faire – le développement, la gestion et l’hébergement d’applications en mode SaaS – son Business Model – l’accompagnement et le conseil- et son amour pour le Web !

Les résultats seront connus début Juillet… croisons les doigts.

SaaS Web sponsorise le Hackathon MediaWiki.

Après une édition à Lyon en 2015 et à Jérusalem l’année passée, c’est à la ville de Vienne (Autriche) d’accueillir les 19, 20 et 21 Mai prochains le Hackathon dédié à l’application MediaWiki. Des développeurs du monde entier vont se retrouver et s’affronter avec le même objectif : optimiser, enrichir et développer le logiciel MediaWiki.

Cette édition met à l’honneur les Femmes et offre la prises en charge par des assistantes maternelles des enfants des participantes pour la durée du Hackathon.

Déjà convaincu de l’application, SaaS Web n’a alors pas hésité à sponsoriser l’évènement et soutenir ce hackathon. Par ailleurs, SaaS Web est partenaire de BlueSpice MediaWiki, une extension Pro de MediaWiki; dont les développeurs participeront au hackathon en tant que speaker. (voir le programme).

Nous leur souhaitons bonne chance et beaucoup de fun !

Témoignage client Art Crash : rien de sert de courir, il faut partir à point.

Rien ne sert de courir, il faut partir à point.“ Jean de la Fontaine

La vie en agence est riche et parfois stressante. Passé l’euphorie, il arrive que des projets gagnés fassent émerger plusieurs challenges : comment répartir la charge de travail, quelle capacité a-t-on en interne ? De plus, des prises de décisions tardives des annonceurs peuvent faire déraper les plannings, le travail en flux tendu peut entrainer un phénomène de congestion en particulier en période de rush.

Art Crash tient pourtant le cap depuis plus de 30 ans.

Spécialisée B2B, agile et experte, Art Crash met en œuvre des réponses concrètes qui permettent d’optimiser le business de ses clients et de créer de la valeur. Construction et développement de marque, d’image de marque, de stratégies Web, de marketing ou relations presse, Art Crash n’a pas de limite pour satisfaire ses clients. Depuis plusieurs années, le Web a pris une place considérable en termes de volume et de complexité dans les projets portés par l’agence. Partant de ce postulat, Art Crash a cherché un partenaire fiable pour la seconder et l’accompagner.

Les relations professionnelles se construisent dans le temps et au fil des projets et des succès remportés. Art Crash et SaaS Web sont un bel exemple de relations qui fonctionnent.

Revenons sur ce partenariat.

L’art de la réussite consiste à savoir s’entourer des meilleurs.“ John Fitzgerald Kennedy

A l’origine, Art Crash avait fait appel à SaaS Web pour la conception d’un site Web pour l’un de leurs clients. Le cahier des charges imposait l’utilisation du CMS TYPO3 et le fournisseur devait également assurer l’hébergement de ce site. SaaS Web a livré le site dans les temps et en conformité. Cette bonne relation a débouché sur un autre projet.

Cette fois-ci, l’objectif était la refonte intégrale d’un site. L’agence Art Crash s’est retrouvée confrontée à 2 problèmes : l’un technique, l’autre humain.

En effet, la technologie d’origine utilisée était le CMS open source Joomla. Ce CMS rendait la programmation difficile et chère à réaliser. En effet, les logiciels open source s’appuient à 100% sur leurs communautés pour assurer les mises à jour, nouvelles fonctionnalités…leurs vies et leurs développements en dépendent totalement. Plus la communauté est grande, plus les idées foisonnent et plus le CMS est optimal, simple et rentable à l’utilisation.

«  Nous ne nous étions pas réellement rendu compte de la perte de temps et d’argent qu’impliquait l’utilisation d’un CMS obsolète. SaaS Web nous a permis de le réaliser et d’agir en conséquence. » Art Crash

De plus, avec des ressources de développement en interne limitées, sans collaborateur dédié, difficile d’assumer la lourde charge technique qu’implique la conception et la gestion et l’hébergement de site Web professionnel.

SaaS Web a alors proposé l’utilisation d’un CMS open source en meilleure adéquation avec leurs besoins : WordPress. La communauté WordPress n’est plus à présenter. Le CMS est dernier-cri et riche en fonctionnalités (essentiellement grâce à l’infinie quantité de plugins). Cela le rend plus rapide, moins cher à développer et, cela compte énormément, plus simple à manager pour le client final.

Le test s’est révélé concluant. L’agence et le client final sont satisfaits.

Par ailleurs, l’hébergement assuré par SaaS Web intègre également le suivi qualité, les updates, les sauvegardes… autant de leviers primordiaux pour le bon fonctionnement du site. Chronophage et parfois complexe, ce suivi est néanmoins indispensable pour répondre aux exigences du Web actuelles et assurer la meilleure expérience au client final.

« En déléguant l’expertise et le suivi technique à un professionnel, nous gagnons en temps et en qualité sur notre cœur de métier et notre valeur ajoutée. Avec SaaS Web nous sommes sur un mode gagnant-gagnant. » Art Crash

Depuis, 5 autres sites WordPress et WooCommerce ont été développés et hébergés pour ArtCrash dont leur propre nouveau site Web ce qui représente une véritable marque de confiance !

SaaS Web est devenu un partenaire fiable.

Pour moi, il est primordial de bien cerner les attentes des clients pour lancer leurs projets sur des bases solides et de les accompagner à chaque étape. Tous les jours. Ensemble.“ Matthias Wulkow

Parce que proposer le bon service ne suffit plus, SaaS Web mise aussi sur l’accompagnement. Les conseils d’amélioration de SaaS Web concernent toujours plusieurs leviers.

Il peut s’agir de conseils concernant le contenu même d’un site Web car une modification pouvant apparaitre comme insignifiante peut faire gagner des heures de travail en développement ! Autant d’argent économisé.

SaaS Web intervient aussi en amont d’une présentation client ou avant l’envoi d’une recommandation en réponse à un appel d’offre. Cette démarche permet à Art Crash d’affiner son travail et d’évaluer au mieux l’enveloppe budgétaire. En réussissant à mieux s’aligner sur la concurrence, l’agence remporte davantage de compétition. Un succès pour elle mais également pour SaaS Web !

Comme la morale de la fable de Jean de La Fontaine, rien ne sert de courir : il est important de prendre un temps d’écoute pour analyser le client et ses demandes : Un projet qui démarre sur des bases solides va se construire dans les meilleures conditions. Art Crash et SaaS Web ont su prendre le temps et avancer ensemble et ils sont aujourd’hui fiers de ce partenariat.

Bonjour la France !

Nous – SaaS Web, agence de développement et d’hébergement Web Made In Germany- proposons enfin nos services au marché français !

Déjà présents en Allemagne depuis plus de 10 ans et sur le marché anglais depuis peu, nous sommes une petite structure composée d’experts IT polyglottes (allemand, anglais et français).

Les descriptions du portefeuille d’applications managées proposées ne sont pas encore toutes disponibles dans la langue de Molière mais nous y travaillons.