site web

  • 10 points importants pour un cahier des charges de site Internet

    cahier-charges

    Vous souhaitez faire ou refondre un site Internet et contactez un prestataire. Ce dernier vous pose alors une colle : « pouvez-vous m’envoyer le cahier des charges ? » … et patatra vous voilà dans l’embarras. Vous vous demandez alors comment rédiger un cahier des charges ? Vous demandez à un ami, à Google, le 50/50 ?

    Si vous cherchez un modèle de cahier des charges, des trames et tutoriels pour faire votre cahier des charges, Google vous en propose de nombreux.

    On va y retrouver des choses assez standards avec les chapitres à y mettre, la fameuse arborescence, l’incontournable présentation de la structure commanditaire (vous), des phrases toutes faites qui rassurent avec de jolies mots professionnels …

    Bref, plein de modèles pour élaborer un cahier des charges tout fait vous tendent les bras. Mais pour vous et votre futur prestataire, ce n’est pas la solution idéale. Et zut ! Vous espériez qu’une fois envoyé LE fameux cahier des charges vous alliez obtenir directement un beau devis sans plus d'effort. C'est rarement le cas. Il se peut que du modèle, vous ayez laissé trainer des choses (on ne comprend pas ce que ça veut dire mais si ça y est c’est qu’il doit y avoir une raison, donc on laisse). Les quasi inévitables copier-coller qui restent du modèle sont source d’incompréhension. Et puis c’est surtout bien souvent incomplet. Alors le prestataire va certainement vous demander des compléments d’information, vous reposer des questions...

    Nous-mêmes avons mis en place un formulaire pour palier ce problème mais ce n'est qu'un outil qui permet de dégrossir et derrière lequel on est obligé de repréciser des choses.

    Mieux qu’un modèle sans mode d’emploi, mieux que le cahier des charges du copain qu’on ne sait pas comment adapter, pour comprendre ce qu’il faut dans un cahier des charges, il faut comprendre son rôle.

    Pourquoi un cahier des charges ? Est-ce indispensable ?

    Oui, pourquoi donc on vous impose cette corvée, alors que ce n’est pas votre métier ? Parce qu’il s’agit de VOTRE projet. Le cahier des charges doit être le reflet de votre besoin et retranscrire votre demande. Il n'y a que VOUS qui puissiez le faire, seul ou aidé.

    1. Dans un premier temps, il s’agit souvent d’un document destiné à obtenir des devis, mettre en concurrence des futurs prestataires.
    2. Dans un second temps, ce sera un document qui servira de trame, de guide pour réaliser le projet.

    Prenons déjà le premier cas. Le cahier des charges doit vous permettre d’obtenir le chiffrage (devis) le plus juste possible : ni surestimé, ni sous-estimé. Il doit permettre au prestataire de comprendre quelle prestation il doit vous fournir et quelle technologie il va utiliser pour traduire tout cela en temps à passer et en évaluer le coût.

    Vous n’êtes pas sensé à ce stade proposer des solutions techniques (ça c’est notre job) mais par contre être capable de décrire le plus précisément possible le fonctionnement attendu de telle ou telle fonctionnalité : quelle action voulez-vous que le site fasse lorsque le visiteur interagit avec tel élément, quelles sont les étapes que vous voulez que le visiteur franchisse avant d’obtenir tel résultat, … Vous devez aussi donner différentes informations sur la prestation attendue, le budget (une fourchette au moins ou un maximum) et les délais.

    Gardez à l’esprit que toute information notée dans le cahier des charges doit permettre de comprendre ce que vous voulez. Si une information ne remplit pas cette fonction, zappez là. Si une autre permet de mieux cerner le besoin, allez-y !

    Dans le second cas, il est même sensé servir de contrat entre vous et le prestataire. Je dis sensé parce qu'il faudrait alors le faire valider par un juriste et/ou des experts. Long, fastidieux et coûteux, à l'échelle d'un projet à quelques centaines ou quelques milliers d'euros, on ne voit quasiment jamais de cahier des charges contractuel.

    Il existe bien des techniques telles que le Design Sprint, mais vous devrez aussi mouiller la chemise et ça ne vous coûtera pas forcément moins cher, ni en temps, ni en argent !

    Quelle taille pour le cahier des charges ?

    Nombre de pages du document, nombre de rubriques et chapitres, nombre de schémas, format de l’arborescence … tout ça va forcément dépendre de votre projet.

    A mon avis, en dessous de 2 pages A4 (et pas en gros caractères comme pour les dissertations au collège), on risque de passer à côté de quelque chose même pour un « petit site vitrine». Rien que décrire l’historique du projet, les objectifs et les contraintes du projet (budget, délai, attentes, …) on y est, et on est loin d'avoir tout dit.

    Comme pour beaucoup de choses, ce n’est pas la quantité ou la taille qui va compter mais la qualité. Mais si vous souhaitez un site avec de l’interaction, sans parler de la vente en ligne (e-commerce), il va falloir tout de même rédiger quelques pages.

    Il n’est pas question ici de créer votre site vous-même mais cet article devrait vous éclairer sur les étapes de réalisation d’un tel projet

    Quels termes techniques utiliser ?

    Pas de panique, il n’est pas question pour vous d’utiliser le jargon technique du web, du marketing ou autre. Sauf si vous êtes un professionnel du web (que faites-vous donc alors à lire cet article ?), il n’y a pas de raison pour que vous maitrisiez ce vocabulaire et ce n’est pas ce qu’attend un futur prestataire, normalement. Il vaut mieux que vous utilisiez vos propres mots, votre propre façon de décrire les choses plutôt que de risquer de mal utiliser un terme et risquer une mauvaise interprétation. Le prestataire est là pour traduire ensuite en termes techniques éventuellement votre besoin.

    Vous le verrez plus bas, mais se réfugier dans des termes fourre-tout comme « blog », « extranet », « gestion des droits » ne sert pas à grand-chose en soi …

    Définir ses priorités et attentes

    Selon vos priorités, la réponse ne sera pas la même : si le budget est serré, le prestataire vous orientera plus vers des solutions prêtes à l’emploi que vers du sur-mesure. Si la personnalisation est malgré tout importante pour vous, c’est sur d’autres postes que l’ajustement se fera, etc…

    Parmi les critères suivants, quels sont ceux qui seront les plus importants pour vous :

    • Le design, l’aspect visuel et graphique
    • Le contenu
    • La visibilité
    • Le budget (indiquer ne serait-ce qu'une fourchette)
    • La personnalisation (le sur-mesure coûte plus cher)
    • Le délai
    • L’autonomie par la suite
    • L’évolutivité

    Et ne dites pas que TOUT est important. Oui, mais il y a forcément des priorités. Évidemment, ça nécessite d’être un minimum au clair avec tout ça en interne.

    Définir la prestation attendue

    On touche à l’essentiel : souhaitez-vous que le prestataire prenne tout en charge, ferez-vous des choses, … ? Souhaitez-vous être formé, conseillé ?

    Lorsqu’on demande un site, il faut savoir si on ne demande que le site ou tout ce qui va autour :

    • La stratégie de communication
    • L’hébergement
    • Le nom de domaine
    • Le design
    • La création du contenu (textes, images, vidéos, …)
    • La saisie du contenu
    • La maintenance de sécurité
    • La maintenance évolutive
    • Les mises à jour du contenu
    • Le référencement

    Vous pouvez vouloir tout déléguer à un prestataire ou non, être accompagné, formé. Pensez à le préciser. Pensez à définir le type de relation que vous attendez avec votre prestataire. C'est très important.

    Décrire les fonctionnalités

    Pour bien comprendre, je vais prendre l’exemple d’une demande de site contenant une zone « offres d’emploi ».

    Si le cahier des charges mentionne juste cette information « Nous souhaitons une rubrique offres d’emploi », attendez-vous à ce que le(s) prestataire(s) vous demande(nt) plus de précisions. En effet, entre :

    • Une liste d’offre mise en ligne exclusivement par vos soins (affichage seul, mais déjà, souhaitez vous un préformatage de la mise en page ou non ?)
    • Une zone permettant à vos visiteurs de poster leurs offres (qui, comment,... doivent-ils créer un compte avant, qui modère ?)
    • Un gestionnaire d’offres avec gestion des candidatures (candidatures anonymes, spontanées, enregistrées ?)

    Il y a de nombreuses différences : gestion des droits, moteur de recherche plus ou moins complexe, modération, gestion de comptes, abonnements, validations, …

    Sur cet exemple, Yannick a écrit un chouette article à propos d'une CVthèque.

    Il sera donc important de décrire le plus précisément possible ce que vous attendez. Surtout si vous attendez un développement sur-mesure.

    Donner des exemples, des références

    Les exemples d’autres sites peuvent permettre aux prestataires de mieux cerner vos attentes. Mais ils ne doivent pas se suffire.

    Imaginez que vous souhaitez une maison et que vous allez voir un architecte en lui demandant de faire la même maison que votre voisin. L’architecte n’ayant pas les plans ni les clés de cette maison, il ne pourra pas se faire une idée de sa structure, du nombre de pièces. Difficile alors pour lui d’évaluer le projet et de vous faire une proposition honnête. Il en va de même pour un site ou une fonctionnalité. A moins de donner en référence un site réalisé par le prestataire lui-même, comprendre comment est fait le site lui prendra du temps et il risque de passer à côté de l’essentiel.

    Préciser la technologie souhaitée ?

    Sauf si vous êtes certain(e) de vouloir une technologie précise, c’est du ressort du prestataire de vous apporter cette information. L’outil, le logiciel ou la technologie doit d’abord être une réponse à un besoin et non une fin en soi. Votre job à vous (je me répète, je sais) : définir et exprimer votre besoin.

    Ne vous prenez donc pas la tête avec la technologie. Mais demandez au prestataire d’argumenter sur sa proposition technique (Plus d'information ici).

    Présenter l'arborescence, la structure du site

    C'est un schéma qui permet de voir la structure du site telle que vous l’imaginez. Au minimum, il faudrait y lire le nom des pages et l’articulation entre elles. Ça parait bête comme ça mais on a déjà eu un cahier des charges avec une arborescence listant « Page 1 », « Page 2, « Page 3 ». Autant dire que c’est inutile. Mais plus que le nom des pages, ce qui va intéresser le prestataire c’est :

    • La fonction de ces pages (affichage, interaction, droits d’accès, …)
    • Le type de contenu(article de contenu, formulaire, liste d'éléments,...)
    • A quel point vous souhaitez qu’elle puisse évoluer (fréquence, autonomie,...)
    • Si vous attendez du conseil sur cette dernière (si vous ne savez pas comment la faire, il vaut mieux demander une prestation de conseil à ce niveau)

    Niveau forme, une simple liste à puce avec des retraits peut suffire mais on peut utiliser des outils de Mind Mapping (carte heuristique) comme Framindmap, Cacoo ou xmind.
    Un bout de papier crayonné et scanné pourra très bien faire l’affaire aussi ;-)

    On ne vous demandera pas forcément des maquettes à ce stade mais si vous avez une idée de ce que vous voulez pour votre site, ne vous privez pas de le préciser. Cacoo ou Pencil peuvent être intéressants aussi pour cela.

    Permettre la comparaison

    Si vous souhaitez mettre en concurrence plusieurs prestataires et pouvoir comparer plusieurs propositions, vous allez vous heurter à un problème épineux : il n’y a pas une seule forme de réponse à une même demande. Chaque prestataire va interpréter votre demande en fonction de son expérience. Certains prestataires vont beaucoup détailler leur proposition, d’autres non. Selon leurs habitudes, ils vont présenter les choses différemment. Décortiquer et décrypter des devis peut vite finir en casse-tête. A tarif total identique on peut se retrouver avec 2 prestations radicalement différentes.

    Les solutions :

    • Soyez le plus précis possible dans votre demande pour laisser le moins de place à l’interprétation
    • Si un prestataire vous demande des précisions sur le cahier des charges ou vous donne des idées, tenez au courant les autres concurrents sinon les différences entre les propositions vont encore s’amplifier
    • Imposez une trame de réponse en précisant quels sont les points à chiffrer séparément.
    • Si vous laissez la possibilité aux prestataires de faire des propositions libres, demandez à séparer clairement ce qui est inclus dans le prix et ce qui est optionnel

    Pour finir …

    Vous avez tout à fait le droit de ne pas savoir exprimer vos besoins précisément. Ce n’est pas simple. Vous avez compris qu’il fallait que vous soyez sur Internet ou qu’il fallait améliorer votre visibilité mais ne savez pas forcément par quel bout le prendre, c’est tout à fait normal.

    Pensez que vous pouvez demander à être aidé pour l’élaboration de votre cahier des charges. C’est une prestation payante mais qui peut vous faire gagner du temps et de l’énergie. S’il s’agit juste de préciser légèrement des choses, il est probable que le prestataire choisi vous offre ce conseil. Mais attention, il ne serait pas très éthique de faire travailler bénévolement un prestataire sur un cahier des charges et de ne pas le faire travailler ensuite.

    Via la formation, vous pouvez également vous faire aider sur cette partie là.

  • Com3elles inaugure un nouveau systeme de support

    maintenance actu m

    2019 04 04 10h49 11

    Lorsque nous réalisons un site, 90% de nos clients souscrivent à un service de suivi : maintenance, sécurité, mise à jour et accompagnement.

    Lorsqu'ils rencontrent un souci ou qu'ils ont une question sur le fonctionnement de leur site Internet, ils nous contactent par mail, téléphone ou via une plateforme de suivi. Classique.

    Depuis ce matin, ils bénéficient d'un service de messagerie instantanée directement accessible depuis leur console d'administration !

    Si nous sommes en ligne, nous répondons immédiatement, si nous ne le sommes pas, le client en nous-même sommes notifiés par mail.

    2019 04 04 10h51 45

    Un peu comme la bulle que vous pouvez voir en bas à droite de notre site !

     

     

    Vous n'avez pas encore votre site chez nous ? En savoir plus

  • Images sur le net : ce qu'on peut faire ou pas en 10 idées reçues

    droit-auteur

    C'est une phrase récurrente que nous entendons souvent en formation ou en prestation (lorsqu'on crée une plaquette par exemple) : "c'est une image que j'ai récupérée sur Internet". Au-delà des questions de qualité éventuelle que cela pose, un point sur la question du droit d'auteur, du droit à l'image et autres croyances s'impose donc.

    C'est un fait, le réflexe pour trouver une image pour sa communication est aujourd'hui aussi simple que répandu : demander à Google depuis l'onglet "Images". Alors, on peut ou on ne peut pas ? Petit tour des idées reçues...

    1 - "C'est public donc je peux"

    Faux. C'est une  confusion générale entre "public" et "domaine public". Ce n'est pas parce qu'une image est exposée qu'on a le droit de l'utiliser. On entend même "ben oui mais s'il ne veut pas qu'on la prenne, il ne faut pas qu'il la mette sur Internet". Ce n'est pas si simple que ça : si certains auteurs publient sur Internet et s'en fichent qu'on utilise leur travail voire en sont flattés... le cas est en fait rare.

    Prenons un exemple :

    vous prenez une photo de votre travail pour la mettre sur votre blog, vous prenez du temps pour la faire parce que vous souhaitez une image de qualité et originale. Un visiteur passe sur votre site, voit votre image et se dit "c'est tout a fait ce dont j'ai besoin, je prends" et profite de votre travail gratuitement et sans avoir passé plus de temps que celui d'enregistrer votre image.

    Bon à savoir : d'après les articles L.111-1 et L.123-1 du code de la propriété intellectuelle, l'auteur d'une œuvre de l'esprit jouit d'un droit de propriété exclusif dès sa création, sans nécessité d'accomplissement de formalités. Il faudra toutefois que l'auteur puisse prouver qu'il a été le premier à produire la création en question...

    2 - "Une photo de steak c'est une photo de steak... personne ne la reconnaîtra"

    viande

    Remplacez "steak" par ce que vous voulez... Vrai dans l'absolu. Mais la politique du "pas vu, pas pris" a ses limites. Que vous le vouliez ou non, du moment que la photo a été faite par quelqu'un, par défaut elle est protégée. L'exemple du steak n'est pas si anodin que ça puisque lors d'une formation dans la presse, un commercial m'a raconté qu'alors qu'il avait "juste récupéré" une photo de steak pour faire réaliser la pub de l'enseigne "X"... l'enseigne "Y" a reconnu sa photo et a attaqué en justice le journal qui a dû payer plusieurs dizaines de milliers d'euros pour le préjudice car ils ont pu prouver la propriété de la photo...

    3 - "Ma banque d'images ? Google"

    Faux. Google images n'est pas une banque d'images, c'est un moteur de recherche qui va référencer les images depuis les sites où elles sont affichées. D'ailleurs, quand vous cliquez sur une image, dans le panneau de droite, très discrètement est écrite la phrase "Les images peuvent être soumises à des droits d'auteur." On ne peut pas dire que vous n'êtes pas prévenus : c'est écrit... même si vous ne l'avez pas lu !

    Astuce : il existe une option (bien cachée) sur Google Images qui permet de n'afficher que les images qu'on peut effectivement utiliser librement. Cliquez en haut sur "Outils de recherche" puis "Droits d'usage". Par défaut les images affichées en résultats sont "non filtrées par licence" ce qui signifie que vous y trouverez autant des images libres que non. Choisissez alors une des autres options suivant ce que vous souhaitez.

    Vous le verrez, le choix est de suite beaucoup plus restreint.

    Sinon, nous vous recommandons les (vraies) banques d'images suivantes qui proposent des images libres de droit gratuites ou très très bon marché :

    4 - "Il n'y a pas de copyright donc c'est bon"

    CopyrightLe terme "copyright" désigne la notion de droit d'auteur dans la loi américaine qui oblige à un dépôt afin de le faire valoir.

    On peut afficher le sigle © et la mention "Copyright" en France dans la mesure où il s'applique à toute œuvre soumise au droit d'auteur. Les mentions "Copyright", © ou "Tous droits réservés" n'ont pas pour autant d'influence sur la protection de l’œuvre et permettent uniquement de jouer un rôle informatif vis-à-vis du public. D'autre part l'absence de sigle ou de mention du droit d'auteur ne signifie pas que l’œuvre n'est pas protégée !

    De même, mettre un Copyright sur une image dont vous n'êtes pas l'auteur est non seulement illégal mais en plus ce n'est pas sympa. Un auteur qui voit son image utilisée sans son accord pourra vous demander simplement de la retirer ou de mentionner son nom. Si en plus vous vous attribuez son travail, il se peut qu'il soit bien moins conciliant et qu'il vous envoie directement une lettre d'avocat !

    Pour information, des licences libres existent mais qui ne vous dédouanent pas de certaines obligations : http://creativecommons.fr/

    5 - "Je ne sais pas qui est l'auteur donc je jouerai l'innocent"

    Mais bien sûr... On a tout vu dans ce cas... "c'est mon stagiaire qui l'a fait", "désolé monsieur je ne savais pas". Bien. Vous ne saviez pas mais maintenant, sachez que vous devez mentionner l'auteur d'une image. C'est ce qu'on appelle le crédit photo. A défaut d'identification d'un auteur, une mention spéciale a été créée après guerre : "Droits réservés" ou "DR" est une tolérance dans le cas où vous auriez effectivement tout mis en œuvre pour retrouver son auteur sans succès et signifie qu'en cas de manifestation, vous règlerez le montant des droits dus. Honnête... si on joue le jeu !

    6 - "C'est un amateur donc ça lui fera de la pub"

    Faux. Qu'on le veuille ou non, le droit d'auteur s'applique de facto dès la création d'une œuvre, qu'elle ait été faite par un pro ou non, que vous appréciez sa qualité ou non. Vous pouvez bien entendu contacter son auteur et lui proposer ce type de deal mais il n'est absolument pas obligé d'accepter.

    7 - "Ce sont mes employés donc je peux mettre leur photo sur mon site"

    Vrai s'ils ont donné leur autorisation. En effet, parallèlement au droit d’auteur sur les images on trouve également le droit à l’image. Nous ne sommes heureusement pas, en France, aussi procéduriers qu'aux États-Unis mais une personne peut en effet refuser de voir ses photos publiées sur le net ou même sur des documents imprimés. Vous trouverez sans souci sur internet des modèles de lettre à faire signer aux personnes dont vous êtes susceptibles de publier les photos : adhérents d'association, élèves, salariés...

    http://www.commentcamarche.net/contents/269-le-droit-d-auteur-copyright

    Un exemple glaçant pour illustrer cette question...

    8 - "La photo vient d'un site étranger donc je suis tranquille"

    Faux !  La Convention de Berne pour la Protection des Œuvres Littéraires et Artistiques protège les auteurs contre un plagiat produit dans les 168 pays signataires.

    9 - "C'est un enfant qui a fait cette image, donc elle n'est pas protégée"

    Erreur : il n'y a pas d'âge ; une personne mineure, comme une personne majeure, détient des droits inaliénables sur ses créations. Seule la perception des droits d'auteurs doit être confiée au représentant légal (tuteur).

    10 - "C'est mon salarié qui a fait cette photo dans le cadre de son travail donc elle appartient à l'entreprise"

    L'auteur d'une œuvre est toujours la personne physique qui l'a créée. L'existence d'un contrat de travail ne le dépossède pas de ce droit personnel. Même une clause disant le contraire dans le contrat est nulle (doublement) : on ne peut pas céder d'avance des œuvres qui n'ont pas été créées !

    Plus d'infos sur : http://www.les-infostrateges.com/actu/14111910/droit-dauteur-et-contrat-de-travail-dissiper-une-fausse-idee-recue

    Voilà, j'espère que c'est plus clair pour vous. Il ne faut pas non-plus oublier qu'au-delà du droit, récupérer une image sur le net n'est pas toujours approprié pour la qualité d'une réalisation, comme nous l'avions évoqué ici.

    Si après cela vous souhaitez apprendre à faire vos images vous-même (vous verrez, c'est très plaisant), vous pouvez vous y faire aider.

  • L'histoire d'un projet accessibilité : HaudaCity

    haudacity

    L'accessibilité, vous connaissez ? Nous faisions des sites accessibles... mais ça c'était avant !

    Contexte

    Le 24 avril 2018 nous a été soumis un projet pour la refonte du site web de l'association "HaudaCity".

    Cette association toulousaine accompagnée par le Parcours ADRESS a mis en place une plateforme numérique collaborative autour du handicap. Elle est destinée aux personnes handicapées mais aussi aux personnes valides qui souhaitent comprendre les handicaps et y apporter un autre regard. Elle vise ainsi à faciliter le quotidien de ces personnes en proposant entre autres un répertoire d’outils complet.

    Vu son objet et son public, ce site doit absolument être accessible. Or le site en place souffrait de problèmes d’accessibilité mais plus largement d’ergonomie même pour des personnes dites valides tant sur la partie publique du site que la console d’administration. Cette refonte était l’occasion pour l’association de repenser la structure complète du site en tirant les leçons d’une année d’utilisation et de retours des visiteurs.

    Pour Com3elles ce projet est l’occasion d’une nouvelle expérience tournée vers le public handicapé et est une source d’inspiration pour tous nos futurs projets. Rendre la communication éthique et responsable passe aussi par la réalisation d’outils incluant plus de personnes !

    Accessibilité, que dit la loi ?

    Les institutions publiques doivent respecter la loi handicap du 11 février 2005 tandis que la loi de 2016 pour une république Numérique étend l’obligation d'accessibilité aux organismes délégataire d’une mission de service public.  
    Pour les autres structures (privées, association, entreprises) il est obligatoire de respecter la loi lorsque le chiffre d’affaire dépasse un certain montant.
    La technologie évolue et il est de plus en plus facile de mettre en place un site accessible, alors pourquoi attendre la mise en application d’une loi pour changer la vision des designers et développeurs quand il est déjà possible de se tourner vers des solutions simples et efficaces.?

    Source : access42

    Études préalables

    En préparation de ce projet, de nombreuses recherches ont été menées au sujet des règles de qualité web et d’accessibilité.

    L’une des premières recherches nous a conduit sur le site AcceDe, une référence qui nous a permis de découvrir des outils, des informations pratiques et opérationnelles de la conception graphique à l’intégration, en passant par le développement et le contenu éditorial.

    Ce n’est pas une découverte pour nous mais citons-le tout de même, le W3C (World Wide Web Consortium) est un organisme de standardisation qui vise à rendre le web accessible à tous grâce à un ensemble de règles html standardisées.

    Le W3C a lancé :

    • le WAI (Web Accessibility Initiative) qui vise à simplifier les actions technologiques de développement et d’informations liées à l'accessibilité pour les rendre disponibles et ouvertes à toutes et tous, sans pré-requis techniques.
    • le WCAG 2.0 (Web Content Accessibility Guidelines) qui comporte des directives représentées sous forme de thématiques (contenus perceptibles, utilisables compréhensibles, robustes) qui portent essentiellement sur l'accessibilité nous a aussi permis de mieux comprendre les éléments à mettre en place.

    Les directives évoquées peuvent être mesurées par trois niveaux allant du niveau A au niveau le plus élevé qui est de AAA. Le niveau A est le niveau minimal à respecter pour lever les barrières obstructives au contenu, c’est “ce qui doit être fait”, tant dis que la meilleure note de AAA donne une vision de “ce qui peut être fait” et améliore le confort lors de la navigation.

    Partage et collaboration avec les équipes

    Pour rendre ce site accessible, une étude préalable avec l’aide de Pascale Casanovasur les différents types de handicaps a été réalisée et nous a permis de mieux les comprendre, de mieux les appréhender pour apporter des solutions concrètes et adaptées en terme de design et de solutions techniques.

    Les handicaps peuvent être d’ordre cognitif, neurologique, physique, visuel ou bien auditif.

    Ils peuvent aussi être relatifs à l'âge, à des situation de handicap récurrent, temporaire, persistant ou encore situationnel.

    Cette diversité de types de handicaps fait qu’il existe des solutions techniques et des outils eux aussi variés pour utiliser les sites Internet :

    • les lecteurs audio pour les handicaps auditifs
    • une structure de contenu clair, hiérarchisée et balisée pour les personnes ayant des difficultés de compréhension
    • la navigation par clavier (via la touche tabulation) pour les handicapés moteur
    • des outils permettant de réduire ou d'agrandir la taille des polices, de maximiser les contrastes, de transcrire certains textes, pour les personnes ayant des difficultés à voir.

    Grâce à l’équipe de Haudacity, nous avons pu tester ces outils sur des sites existants dont certains dits accessibles... édifiant !

    Le cahier des charges

    D’abord un site

    Le cahier de charges établi par Pascale Casanovaexprimait des besoins “classiques”. A savoir :

    • un site responsive
    • plusieurs espaces membres avec plusieurs niveaux de modifications
    • pouvoir s'inscrire à différents modules et être en mesure d’apporter du contenu simplement, de l’imprimer et de faire des dons.
    • il comportait aussi un cadre technique avec des mots clés identifiés et choisis pour améliorer le référencement.

    Mais aussi des demandes spécifiques à ce projet :

    • respecter les critères d'accessibilité autant pour la partie visible du site que pour la console d’administration tout en s’adaptant à la demande du client
    • ne pas se “contenter” d’appliquer des règles issus de référentiels trouvés sur Internet mais “passer” des tests effectués par de vrais personnes en situations de handicaps.
    • migrer le contenu de l'ancien site sur un autre CMS Open Source (l’ancien ne convenant pas du tout) tout en respectant la charte graphique de l'association.
    • reprendre l’éventail et la diversité des couleurs présentes sur l’ancien site de la plateforme (leur expérience montrait qu’elles permettent une navigation plus simple des utilisateurs en les aidant à se repérer)
    • le nouveau site doit aussi être respecter un design de qualité. Accessible aux personnes atteintes de différents types et degrés de handicaps sans négliger l’agrément pour des personnes valides

    Inclure TOUS les handicaps

    Une solution technique pour un type de handicap n’est pas forcément bonne pour un autre, il nous a donc fallu parfois trouver un juste équilibre, et jongler entre ces dernières.

    Il était aussi important de savoir se libérer des normes car des fois elles ne sont pas si bonnes. Par exemple : l’utilisation d’onglets ! Pratique au niveau UX pour mettre plusieurs type d’informations sans charger l’interface. Niveau normes d’accessibilité cela passe bien mais dans la réalité les retours ont été unanimes : trop complexe à gérer, nous avons donc dû revoir notre copie !


    Une préversion avec des onglets

     

     


    La solution retenue, plus simple mais plus accessible

     Un vrai défi comme nous les aimons et un projet réellement enthousiasmant. C’est le plus Com3elles !

    Étapes de réalisation

    Le choix du CMS

    Avant d’entamer la réalisation du site nous avons procédé à une étude comparative concernant le choix d’un CMS adéquat à la mission de ce projet.
    Nous avons choisi d’utiliser Joomla! pour sa flexibilité et son intérêt pour le WCAG.

    On vous voit venir … “mais bien sûr ! … c’est votre CMS préféré donc vous n’êtes pas objectifs”. C’est pas faux ! (spéciale dédicace à @mnatsian)
    Et pourtant oui, nous avons réellement comparé ;-)

    Il faut rappeler que Joomla! est le premier CMS à intégrer ces normes dans l’administration. La future version de Joomla 4 vise encore plus haut avec une administration de niveau AA.

    Notons également que Joomla! est nativement (sans installer le moindre plugin, widget ou autre extension) le mieux équipé pour réaliser des sites communautaires (droits d’accès, historique, édition en front, …) et lorsqu’il est couplé à un CCK comme Flexicontent, il permet de simplifier les saisies et le workflow pour rendre le site efficace dans la partie publique (front-end) comme privée (back-office).

    Le site étant une plateforme de ressources avec des types de fiches différentes et des filtrages de contenus, le CCK s’imposait pour éviter la multiplication des extensions et donc entre autres des logiques d’interface et d’ergonomie.

    Tout est pensé nativement dans Flexicontent pour rendre la gestion simple et efficace même pour les personnes atteintes de handicaps. Citons par exemple : l’optimisation des images à la volée, l’inclusion des vidéos automatisée, la mise en page responsive sans code etc...

    Le design

    Avant de commencer le design, un benchmark autour de l’accessibilité à été effectué pour mieux appréhender la démarche. Le site de l’organisme certificateur en accessibilité “AccessiWeb” nous a particulièrement servi de base pour commencer les recherches en nous appuyant sur les sites “les mieux notés”. De nombreux travaux ont été recensés notamment le site de la fédération des aveugles de France et le site du RIVPqui propose une navigabilité et un choix de couleurs simple ainsi qu’un menu caché de navigation interne navigable au clavier.  

    A ce titre il nous a fallu revoir nos processus tels que les mockups, les règles classiques de design pour nous adapter à des problématiques plus terre à terre. Le contraste, la position d’un menu dans la page, le focus, les zones d’accessibilité ARIA etc… Tout mettre de côté pour ré-apprendre !

    La reprise et l’adaptation de la charte graphique

    Ce projet avait pour base l’ancien site de l’association qui manquait de dynamisme et dont la navigation n’était pas optimale pour les personnes handicapées.
    Nous sommes donc partis de la charte graphique déjà établie et nous sommes inspirés des couleurs d'HaudaCity pour en faire plusieurs déclinaisons adaptées aux différents types de handicaps. La charte graphique est sobre, c’est un bon point pour nos objectifs à atteindre !

    Les couleurs, un choix pas uniquement esthétique

    Différentes problématiques ont pu être remontées au niveau du choix des couleurs qui devaient correspondre aux attentes de Madame Casanova, la cliente, mais aussi aux règles d’accessibilité générales : le contraste doit être suffisant entre le fond et le teste. Pour réaliser au mieux la page d’accueil nous avons intégré les couleurs des rubriques en fond pour aider à la reconnaissance. Ce genre de design n’est peut être pas très “tendance” mais il est en revanche très pratique pour les utilisateurs qui sont, rappelons le, pour la plupart des personnes handicapés.

    L’objectif était d’arbitrer entre l'esthétisme d’un côté et l'accessibilité de l’autre qui vise à rendre pratique et intuitive la navigation de ce site internet.

     

                   

     

    Pré-maquette

    Capture

    Après avoir fait valider notre proposition de menu déroulant auprès de Madame Casanova, nous avons pu appliquer la charte colorée à l'ensemble des rubriques et des sous rubriques, qui a été cette fois-ci adaptée dans le but d’améliorer la navigation et la rendre plus facile pour les handicaps visuels et/ou cognitifs.

    L’intégration : les outils et l’ergonomie

    Quelques éléments se sont montrés pratiques pour la navigabilité. En voici une liste non exhaustive mais qui permet de comprendre les bases indispensables à la réalisation de ce type de site :

    • un menu pour permettre à l’utilisateur handicapé d'aller directement au contenu ou à la page d’accessibilité, lui évitant de perdre du temps sur un contenu qu’il souhaite passer. Ce menu est caché par défaut pour ne pas gêner les visiteurs non-handicapés.
    • un “menu haut” présent sur toutes les pages, qui permet une redirection rapide sur les parties essentielles du site, comme par exemple le plan de site qui est indispensable à la bonne navigation des personnes en situation de handicap
    • une barre de recherche, une fois de plus présente sur toutes les pages qui assure une aide efficace prouvée dans ce cas de figure
    • un fil d’Ariane pour aider à tout moment l'internaute à se repérer
    • un menu latéral qui complète le menu principal et qui possède un marqueur de page contrasté pour indiquer le lieu de navigation où se situe l’utilisateur, de préférence à gauche pour que la navigation à 200% et les affichages responsives restent simples et logiques
    • une structuration HTML avec un balisage sémantique propre (h1-h5), une définition des zones accessibles aria, des fonctions de description pour tous les boutons et les formulaires.
    • la pseudo-classe CSS :focus a été un élément important afin de cibler les éléments concernés à l’aide de la touche tabulation (tab), notamment pour les personnes atteintes d’un handicap moteur. Cette pseudo-classe CSS souvent délaissée dans le design habituel est pourtant vitale. Non content de la remettre au goût du jour nous avons fait des remontées à Cédric Keiflin, le concepteur de Template CreatorCK, pour qu’il y intègre les recommandations d’accessibilité ainsi que d’autres fonctionnalités annexes. Depuis nous l’aidons à faire évoluer ses différents composants comme l’ajout de touches clavier pour les liens de menus dans MaximenuCK

    Pour l’interface de gestion (administration) nous avons pu tester Joomla! en situation réelle, et les retours ont été bons dans l’ensemble dès le premier coup ! Nous avons pour habitude d’adapter le panneau d’administration pour les utilisateurs avec des liens directs vers les fonctions essentielles ainsi que des modules de listes de contenus pour facilement trouver les articles à valider, à modifier etc. Pour ce projet c’était d’autant plus important et nous avons travaillé encore plus finement cette interface.

    Pour les contributeurs nous avons choisi de construire une administration light depuis la partie publique du site. Avec un simple accès, ils peuvent aisément ajouter des articles et gérer facilement ces derniers, le tout avec une modération de la part de l’équipe d’HaudaCity. En choisissant cette solution nous maîtrisons l’expérience utilisateur en simplifiant les formulaires et en évitant de changer les habitudes des contributeurs.

    Les tests d'optimisations techniques

    Pour commencer citons ACheckerou le validateur automatique du W3C qui permet d'évaluer la structure HTML d’une page afin de s’assurer qu’elle soit accessible à tous.
    Nous avons aussi et surtout utilisé Wave, un outil mesurant l'accessibilité des sites internet qui nous semble plus récent (prise en compte du html5 et des balises ARIA) et plus pertinent. Cet outil permet d’aider les développeurs et donne une vision précise à l’aide de différents icônes signalant les problèmes d'accessibilité, les alertes, les fonctionnalités, les niveaux de contraste ou bien encore les éléments de structure.

    Pour ce qui est de l’analyse des contrastes entre la couleur de fond et la couleur de la police d'écriture, nous avons utilisé un outil nommé colour contrast analyser. Cet outil permet de donner une note allant de “A” à “AAA” qui correspond au niveau d’accessibilité et de corriger le niveau de contraste directement afin d’optimiser le rendu et la lisibilité du texte .

    Nous avons éliminé toutes les erreurs fatales, réduit les notifications de recommandation d'accessibilité par 4. Nous en avons laissé volontairement car cela pouvait nuire à l'expérience utilisateur classique. Exemple : enlever les liens en double impliquait d’enlever le lien sur l'image et le lien "lire la suite"… moins sympa mais surtout moins pratique...

    Tout au long du projet nous avons eu la chance de travailler avec des personnes souffrant de différents types de handicap qui ont constitué un parfait panel de testeurs. Pour les dernières optimisations, ces utilisateurs ont pu naviguer sur le site et nous renvoyer directement des informations nécessaires et des recommandations techniques.

    Quelques retours utilisateurs et débug en cours de production

    “Test réalisé avec la dernière version du lecteur d’écran NVDA qui vient de sortir et Firefox version 60.0.2, sur mon PC fixe sous Windows 7.

    Ce site qui m’a paru très fluide, me semble globalement bien adapté à la navigation à l’aide d’un lecteur d’écran, car les pages sont bien structurées (utilisation de balises titres, des  régions, de listes d’éléments...)”

    “Certains libellés de champs de formulaire n’apparaissent pas toujours sur ma plage Braille mais sont correctement lus par la synthèse vocale : je ne sais pas te dire si le problème  vient du site ou de ma configuration...”

    “Difficultés rencontrées par une personne aveugle utilisant une synthèse vocale, pour supprimer le pop-up de demande d'autorisation des cookies... visiblement il n'est pas aisé de trouver le bouton ok, pouvez-vous vous assurer que c'est bien étiqueté ?​”

    Présentation de notre réalisation

    La page d’accueil

    Une page de catégorie avec système de filtrage multicritères interactif

     

    UV6NbPOGDzAid00baeQrD WFV i5XhVVZvjgbLM2tA55JSaoAn3Dam87oD4nCEA7lMfa1V8CpN4UUK8PX maDHy i sfuesAYczplrOzgzS2cCVkdZ5NghObq6L8 n6 4p9E7hfV

    Un modèle de page unifiée pour un meilleur confort de lecture

     

    Un panneau d’administration avec des accès rapides adaptés

    Conclusion

    Après avoir étudié le concept d'accessibilité web et avoir eu une vision d'ensemble des différents types de handicaps, nous avons pu appliquer et suivre les différentes recommandations à la plateforme web HaudaCity. C’est en échangeant constamment avec les utilisateurs que nous avons pu implémenter directement de nouvelles solutions sur le site aussi bien au niveau de l’UX design que du webdesign et de la programmation.

    Mais au delà des normes, c’est l’expérience humaine qui a été la plus forte et enrichissante. Un grand merci à toute l’équipe de HaudaCity qui nous a aidé à dépasser la documentation stricte pour mieux découvrir un aspect trop délaissé de la conception de site web. Cette expérience acquise est le début, nous l'espérons, de nouvelles collaborations portées vers une communication plus ouverte et plus respectueuse de tous.

    De notre côté l’enthousiasme continue car vos humbles serviteurs sont maintenant intégrés dans l’équipe Accessibilité pour Joomla!4 qui vise une norme WCAG AA autant dans la partie publique que dans la partie administration ce qui serait une première mondiale ! Encore un beau projet auquel nous sommes fiers de participer.

    Article co-rédigé par

    • Baptiste Richard, stagiaire qui a largement contribué au projet et à l’article
    • Yannick Bergès, responsable du projet chez Com3Elles
    • Céline Robert pour la relecture

     Retrouvez le témoignage de Pascale Casanova

  • Optimisation de nos hébergements

    Pour vous offrir des sites toujours plus optimaux, nous avons déployé une sur-couche applicative sur nos hébergement (et pour ceux dont on gère la maintenance, sur leur hébergement).

  • Optimiser ses sites pour Pages speed et Yslow

    Mon ode du jour va à un outil d'optimisation de site web à base de technologie Apache : aeSecure. En plus de sécuriser votre site, il accélèrera le temps de chargement de votre site.Un bon point pour le référencement, mais aussi pour le confort de vos visiteurs.

    Les hackers ne s'attaquent pas qu'aux gros sites les plus connus. Bien au contraire, ils se servent de petits sites, souvent mal protégés, pour récolter des données (mais c'est rare) ou bien plus souvent, pour se servir de votre serveur afin d'envoyer des millions de spams chaque jour.
    Vous ne vous en apercevrez souvent que lorsque votre hébergeur coupera l'accès à votre site pour utilisation abusive.
    Parmi diverses solutions, il existe un moyen simple de protéger votre site, à moindre coût, grâce à une application bien française : aeSecure.

    Derrière ce petit NONO (c'est le nom de la mascotte) se cache Christophe Avonture, le créateur du composant d'agenda ALLEVENTS pour Joomla! (l'un des ténors dans ce domaine).

    Que fait AeSecure ? Je ne vais pas tout re-écrire mais citer le pitch officiel ;-)

    "aeSecure est une solution logicielle en php qui offre une couche de protection supplémentaire à votre site web dès lors qu'il fonctionne sous serveur Apache et ce, quel que soit le type de sites web (Joomla!®, WordPress, Drupal, Prestashop, CRM Vtiger, DotClear, Koken... voire un site statique ou un logiciel propriétaire). Il s'agit donc d'un pare-feu (firewall) entre votre site et ceux qui le visitent.

    aeSecure offre également des fonctionnalités d'optimisation du site web visant à booster l'affichage des pages ()

    Le logiciel fonctionne sur deux principes :

    1. Il génère et maintient un fichier .htaccess hyper complet dans lequel un très grand nombre de règles seront activées ou pas (selon vos choix)
    2. Il génère et maintient un fichier php.ini qui vise à indiquer à votre serveur Apache ce qui est autorisé ou pas (remarque : certains hébergeurs ne gèrent pas ce fichier-là)

    Ces deux fichiers sont lus par le serveur web avant que la page ou la requête ne soit affichée / exécutée, ce qui permet de sécuriser son site web en interdisant des urls malsaines, des comportements relevant d'une tentative de hacking, d'affichage d'informations de configuration...

    aeSecure vise à fermer un grand nombre de portes par lesquelles un hackeur pourrait s'introduire et à optimiser l'affichage des pages, tel qu'on peut le mesurer avec un outil comme GTmetrix.com.

    Deux versions d'aeSecure sont proposées : gratuite et payante. La version gratuite offre un excellent niveau de sécurité et protection de son site."

    Pour l'avoir testé, nous confirmons qu'il le fait très bien :

    1. transférez le fichier aesecure.php par FTP
    2. lancez le fichier (http://www.votresite.com/aesecure.php)
    3. laissez-vous guider par ce système "all-in-one page" où tout est didactique et expliqué de façon pédagogique
    4. après avoir utilisé 3-4 réglages (non je ne blague pas : ce sont vraiment 3-4) vous obtiendrez un site protégé ET optimisé

    Exemples d'optimisations sur le pagespeed (source gtmetrix) obtenues sur des sites réalisés par Com3'elles, avec aeSecure :

    Le tout en version pro avec une option multisite qui nous permet de gérer tous nos sites clients de manière centralisée.

    aesecure_gestion_multisite_fullIl existe en plus en version gratuite, Premium, Premium+, Pro. Chacune des versions diffère en termes de fonctions, support et nombre de sites gérables.

    C'est un achat que vous ne regretterez pas.
    En un mot : je ne le recommande pas, je le rends obligatoire !!!!

    http://www.aesecure.com/fr/telechargement.html

  • Pourquoi il va devenir urgent de rendre vos sites compatibles avec les mobiles

    seo_mobile

    Google l'a annoncé dernièrement : à compter du 21 avril 2015, les sites dits "non-responsives", c'est-à-dire dont la navigation n'est pas adaptée à la lecture sur mobile, seront pénalisés en terme de référencement. Le scan du moteur de recherche se fera page à page : un site qui présenterait des pages responsives et d'autres pas, verra donc ses résultats en matière de référencement impactés sur les pages non compatibles.Pourquoi ce changement ? Il faut savoir que Google modifie régulièrement son algorithme, ce qui a pour conséquence de faire évoluer le trafic et le positionnement de manière sensible : 890 changements ont été comptabilisés rien qu'en 2013 ! Ce n'est donc pas une révolution en soi.

    Mais cela devrait marquer un tournant pour bon nombre d'entreprises qui n'auront plus le choix désormais, si elles veulent remporter la bataille du référencement naturel : refaire leur site ou l'adapter, selon la technologie adoptée à la création. En effet, chaque requête d'internaute effectuée depuis un smartphone ou une tablette fera remonter en priorité les pages de sites dits "mobiles-friendly" (pensés pour les mobiles), au détriment de celles dont la lecture serait fastidieuse sur un support de cette taille. Or, la recherche depuis mobile se développe massivement, comme le montrait déjà une enquête INSEE de 2012.

    La tendance ne risquant pas de s'inverser, il est donc urgent de vérifier la compatibilité de vos sites, si pour vous, le SEO* est un enjeu important. Si vous ne savez pas comment faire, testez cet outil : https://www.google.com/webmasters/tools/mobile-friendly/

    S'offrent alors à vous 2 options :

    • le faire vous-même à partir de design graphiques nativement adaptés à la lecture sur tablettes et smartphones, si vous possédez un CMS** tel que Wordpress, Joomla, ou Drupal par exemple. Attention, ce n'est pas forcément simple, car nombre de paramètres entrent en ligne de compte, comme l'indique judicieusement cet article spécialisé.
    • Contacter un prestataire compétent sur cette question, qui saura vous remettre d'aplomb les pages en question : Com'3elles par exemple :)

     

    * SEO = Search engine optimization = référencement naturel
    ** CMS = Content Management System (Système de gestion de contenu)

  • Solution e-learning avancée avec Joomla

    l ethi 3

    Dernièrement, nous avons été fiers d'accompagner EnSSemble.org dans la réalisation de leur nouveau projet : une école en ligne pas comme les autres destinée à la création et au développement de projets dans le monde de l’ESS. Une première en France.

    Bien que l'équipe d’EnSSemble avait l’habitude de créer et gérer son site avec Joomla!, ils nous ont demandé de les épauler pour la conception de la partie e-learning, nettement plus complexe.

    Le contexte du projet

    Après étude de la version 1 du cahier des charges, il nous est apparu rapidement qu’une solution de pur e-learning ne serait pas suffisante pour réaliser toute la partie dédiée au suivi personnalisé de leur offre novatrice.

    Les besoins étaient en résumé les suivants :

    • Site vitrine classique
    • Espace e-learning avec gestion des vidéos, QCM, pdf, SCORM, certification
    • Espace personnel avec gestion des rendez-vous et relation avec les coachs
    • Espace documentaire
    • Le tout couplé avec un système d’abonnement et paiement en plusieurs fois.

    Avec un budget serré, il n’était pas envisageable de partir sur un développement majoritairement sur-mesure. Après une phase de recherche et de comparaison de solutions, nous avons donc élaboré une V1 mixant ce qui se fait de mieux avec Joomla! et juste un minimum de développement :

    • Shika dédié à la partie e-learning
    • Flexicontent pour la gestion des suivis et la partie documentaire
    • Les ACL de Joomla! pour définir finement les accès
    • Rsform + quelques lignes de code sur-mesure pour générer des formulaires avancés
    • Payplans très adapté pour les abonnements et le paiement en ligne
    • Un plugin maison pour la connexion

    Conception fonctionnelle

    Nous avions à cœur de créer un site évolutif et administrable en autonomie par l’équipe de EnSSemble. Pour cela nous avons déployé une solution fonctionnelle dans laquelle toutes les fonctions vitales seraient administrables :

    • L'ajout de plans d’abonnement
    • L'ajout de cours
    • L'ajout de fichiers
    • L'ajout de vidéos
    • L'évolutivité des formulaires

    Il a été également primordial autant pour l'équipe que pour les futurs apprenants de créer un parcours utilisateur simple, cohérent et évolutif.
    Il fallait qu’une personne puisse acheter un abonnement permettant d’avoir accès à :

    • Son suivi
    • Ses cours achetés
    • Ses documents liés
    • Son espace outils
    • Ses abonnements et factures

    Par exemple : si un “ethipreneur” achète 1 abonnement, une fiche de suivi est créé, puis celui-ci est redirigé vers un formulaire lui permettant de choisir ses cours, ce qui lui octroie les accès aux dits cours et à différentes parties dédiées sur le site.

    Voici ce que nous avons architecturé :

    Plan du cas "accompagné"

    plan accompagne

    Plan du cas achat isolé "solo"


    plan solo

    Il fallait à la fois pouvoir acheter un cours seul ou un lot de cours et le tout payable en 1 ou plusieurs fois.

    Conception

    Les suivis

    Pour les “Ethipreneurs”, le suivi des apprenants est la pierre angulaire de leur offre. Suivant son niveau d’abonnement, l’utilisateur bénéficiera de rendez-vous avec des coachs sélectionnés en fonction de la thématique pour l'accompagner dans son projet.

    Après chaque rendez-vous un compte-rendu doit être mis à disposition et il doit être possible de créer un autre rendez vous pour plus-tard.

    Pour obtenir une interface permettant cela rapidement et sans développer un composant nous avons utilisé le CCK Flexicontent. Il nous a permis de générer une interface que nous appelons "fiche de suivi utilisateur" disponible par ce dernier qu’une fois connecté (via un plugin de connexion sur-mesure) et seulement éditable par le coach dédié à son suivi. Simple mais très efficace.

    Après achat, une fiche de suivi est créée au nom de l'utilisateur. Un système génère automatiquement le titre à partir du nom et du prénom contenus dans le profil. En attribuant à l'utilisateur la paternité de la fiche (il en devient techniquement auteur) il devient assez simple de faire en sorte que l’étudiant ne puisse voir QUE son profil.

    fiche suivi

     

    Grâce à cette astuce nous obtenons une fiche de suivi efficace vers laquelle l’utilisateur est redirigé à chaque connexion.

    Si c’est son premier rendez il ne verra qu’un bouton de prise de rendez vous :

    suivi 1

     

    Après en avoir eu plusieurs, apparaissent les différents rendez-vous avec :

    • leur date,
    • la possibilité de télécharger le compte-rendu si le rendez-vous est passé
    • la possibilité de planifier d'autres rendez-vous

    suivi2

    La gestion des boutons et des documents est entièrement intégrée dans Flexicontent et son puissant système de champs. Plutôt que de partir d’une programmation fermée avec un nombre défini et non évolutif des rendez-vous, nous avons profité de la souplesse et la puissance des groupes de champs multiples pour concevoir un système de suivi qui s'adapte aux besoins.

    • Après achat et validation de son profil un utilisateur affiche son suivi et n’a pas d'autre choix que prise de rendez-vous car il n’a qu’un seul bouton
    • Dès qu'un rendez-vous est programmé le coach peut se rendre sur le parcours de l’utilisateur

    etapes coach

    En quelques étapes il peut ajouter le compte-rendu et programmer le rendez-vous suivant. En fonction des valeurs saisies dans le rendez-vous, le bouton de prise de rendez-vous calendly contiendra une série de configurations automatisées, telles que :

    • le nom du coach sélectionné
    • la durée du rendez-vous
    • les informations de l’utilisateur (nom prénom email)

    Grâce à la puissance du CCK il est même possible de mettre en ligne des compte-rendus vidéo sécurisés (privés) via un compte Vimeo pro

    Gestion documentaire

    En profitant de l'avantage d'utiliser déjà Flexicontent dans le projet, nous avons réalisé la partie “outils et ressources documentaires” avec ce CCK.

    Les avantages sont nombreux:

    • Évolutivité
    • Moteurs de recherche
    • Droits d’accès des champs

    Choix des cours et accès

    Il aurait été tout à fait possible d'utiliser Shika pour l’achat des cours si il n’y avait pas eu les suivis et l’achat de cours groupés. Il fallait donc trouver une solution intermédiaire. C’est pour cela que nous avons préféré utiliser les ACL de Joomla! pour rendre les cours indisponibles en fonctions des niveau d’accès. Nous avons donc créé toute une arborescence d’accès nous permettant de les distribuer au niveau des utilisateurs (pour les suivis, les documents, 1 accès par cour etc).

    Pour distribuer ces accès nous avons mis en place des formulaires de choix de cours. Le principe est qu’un utilisateur après achat est redirigé vers ce formulaire pour choisir ses cours (le nombre étant en fonction de l’abonnement)

    Après validation des cours, l’utilisateur se voit attribué les différents niveaux d’accès.

    Nous avons capitalisé sur le potentiel avancé de RSform qui permet d'intégrer du code personnalisé en PHP et avons coder quelques scripts pour :

    • bloquer les soumissions multiples
    • prédéfinir le nombre de "cairns" (c'est le petit nom donné par les Ethipreneurs aux modules de formation) sélectionnable
    • distribuer les accès. Le formulaire récupère les cairns cochés, et ajoute des accès supplémentaires (2 pour le niveau enregistré, 30 pour le live, 32 pour le suivis etc)
      Cela parait un peu complexe mais avec 2 lignes à changer, l’administrateur peut facilement ajouter des cours, définir le nombre de cours sélectionnables et définir les accès. Il peut donc créer un nouvel abonnement sans demander le développement d’une nouvelle fonction ni créer une interface pour le faire…

    Gestion des abonnements

    Comme expliqué tout au début de cet article nous avons choisi Payplans pour sa modularité, sa capacité de surcharge et son support d’une qualité rare !

    Il nous a permis de créer des plans d’abonnements avec  :

    • Gestion des durées et de la récurrence
    • Gestion du paiement direct ou mensualisé via Stripe
    • L’envoi des emails de validation et des relances
    • La conception d’un espace pour la facturation (html + pdf)

    Conclusion

    En articulant un ensemble de composants de renom nous avons obtenu une plateforme de elarning novatrice, à faible coût et évolutive. Encore une belle démonstration qu’avec Joomla! et son écosystème nous pouvons réaliser tout type de projets dans des budget tout à fait raisonnables !

    Forts de cette expérience, n’hésitez pas à nous confier vos projets web, nous trouverons sûrement une solution puissante, simple et conçue avec intelligence et amour !

  • Votre site est-il en règle avec la loi sur les cookies ?

    Aujourd'hui, parlons cookies ! Non, pas les petits biscuits (même si ça nous aurait plu), mais ces petits traceurs qu'on met en place sur un site pour faciliter la navigation et recueillir des informations (voir la définition Wikipedia des cookies)...

    Vous avez sans doute vu apparaître depuis plusieurs semaines des barres de notifications en haut de nombreux sites vous invitant à accepter (ou non) l'utilisation des cookies.

    Ces sites, comme celui de Com'3Elles, se sont tout simplement mis en règle avec la délibération n° 2013-378 du 5 décembre 2013 de la CNIL (Commission Nationale de l'Informatique et des Libertés) relative à l'adoption d’une recommandation sur les Cookies et aux autres traceurs.

    Une délibération à laquelle 99% des sites en ligne sont soumis. Explications.

    Cette délibération est donc effective depuis début 2014. Mais jusqu'à présent, aucun contrôle de la part de la CNIL n'avait lieu, le temps que tout le monde puisse se mettre au diapason.

    Or, depuis octobre 2014, les premiers contrôles ont lieu. Le non-respect de cette obligation peut donner lieu à une sanction administrative (avertissement / mise en demeure / amende jusqu’à 150 000€ ou 300 000€ en cas de manquement réitéré).

    Mais faute d'une communication suffisante, à ce jour, plus de 95% des sites Internet ne respectent pas cette obligation légale qui veut que les internautes soient informé-es et donnent leur consentement préalablement à l'insertion de traceurs (cookies). Ils doivent disposer d'une possibilité de refuser d'être tracés lorsqu'ils visitent un site ou utilisent une application. Les éditeurs ont donc l'obligation de solliciter au préalable le consentement des utilisateurs. Ce consentement est valable 13 mois maximum.

    Pourquoi quasiment tous les sites sont-ils concernés ?

    Parmi les cookies nécessitant une information préalable et une demande de consentement, on peut notamment citer :

    • les cookies liés aux opérations relatives à la publicité ciblée ;
    • certains cookies de mesure d'audience comme Google Analytics ;
    • les cookies des réseaux sociaux générés notamment par leurs boutons de partage lorsqu'ils collectent des données personnelles sans consentement des personnes concernées.

    Cette liste n'est pas exhaustive,mais comme le prouve celle ci-dessus, aujourd'hui, la plupart des sites utilisent un système de mesure d'audience à des fins statistiques (comme Google Analytics). Il en est de même si vous avez (sauf rares exceptions) des boutons de partages vers les réseaux sociaux.

    Quelles sanctions ?

    Comme indiqué plus haut, le non-respect de cette obligation d'informer sur l'utilisation de cookies peut donner lieu à une sanction administrative.

    Même si à ce jour, aucune sanction ne semble avoir été appliquée par la Commission, mieux vaut ne pas jouer avec le feu et se retrouver avec une mise en demeure ou une amende pour avoir omis d'informer les visiteurs de son site.

    C'est par ailleurs, et avant tout, une question de respect de ses visiteurs, qui ont le droit d'être informés sur le recueil de données les concernant.

    Que dit la loi sur le recueil du consentement ?

    Le consentement doit être préalable à l'insertion ou à la lecture de cookies

    • Tant que la personne n'a pas donné son consentement, ces cookies ne peuvent être déposés ou lus sur son terminal.
    • Il doit être requis à chaque fois qu'une nouvelle finalité vient s'ajouter aux finalités initialement prévues.

    Le consentement est une manifestation de volonté, libre, spécifique et informée : la validité du consentement est donc liée à la qualité de l'information reçue.

    • L'information doit être visible, mise en évidente et complète.
    • Elle doit être rédigée en des termes simples et compréhensibles pour tout utilisateur.
    • Elle doit permettre aux internautes d'être parfaitement informés des différentes finalités des cookies.

    Le consentement n'est valide que si la personne exerce un choix réel.

    • L'utilisateur doit pouvoir accepter ou refuser le dépôt des cookies.
    • Le consentement ne peut être valable que si la personne concernée est en mesure d'exercer valablement son choix et n'est pas exposée à des conséquences négatives importantes si elle refuse de donner son consentement. La personne qui refuse un cookie nécessitant un consentement doit pouvoir continuer à bénéficier du service (l'accès à un site internet par exemple).
    • Le choix doit pouvoir être effectué pour chaque application et chaque site internet.

    Bref, une mesure pas du tout simple à mettre en place si on veut être parfaitement dans les clous sur tous les points cités.

    Le consentement doit donc se manifester par une action de la personne préalablement informée des conséquences de son choix et disposant des moyens de l'exercer. On ne peut supposer une acceptation par défaut.

    Vous retrouverez toutes les informations sur http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/que-dit-la-loi/.

    Dans la pratique

    Dès l'arrivée sur un site, l'internaute doit être notifié-e par un bandeau de l'utilisation de cookies, des finalités d'utilisation de ces derniers et du fait que la poursuite de sa navigation vaut accord au dépôt de cookies sur son terminal.

    Ce bandeau ne doit pas disparaître tant que la personne n'a pas poursuivi sa navigation, c'est-à-dire tant qu'elle ne s'est pas rendue sur une autre page du site ou n'a pas cliqué sur un élément du site.

    Sur ce bandeau doit apparaître une mention du type "En savoir plus" qui conduira l'internaute sur une page dédiée lui indiquant les moyens mis à sa disposition pour refuser l'insertion des cookies.

    Devant le nombre de navigateurs et systèmes d'exploitation disponibles, pas évident d'indiquer la marche à suivre à tout le monde. Chez Com'3Elles, nous avons essayé de n'oublier personne sur notre page d'utilisation des cookies.

    Durée de vie d'un cookie

    Les personnes ayant donné leur consentement à être tracées peuvent, au bout d'un certain temps, oublier qu'elles ont manifesté cette volonté. C'est la raison pour laquelle la CNIL recommande que le délai de validité du consentement au dépôt des Cookies soit porté à 13 mois au maximum. Au bout de ce délai, la barre de notification devra réapparaître pour permettre à l'internaute de donner ou non son consentement.

    Un cookie ne peut donc avoir une durée de vie supérieure à ces 13 mois et en aucun cas, une nouvelle visite sur le site ne prolonge sa durée de vie de 13 mois. C'est la première visite sur le site qui fixe la durée de vie à 13 mois.

    Liens utiles

    http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/

    http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/que-dit-la-loi/

    http://www.cnil.fr/documentation/fiches-pratiques/fiche/article/ce-que-le-paquet-telecom-change-pour-les-cookies/

    Le texte de l'ordonnance sur Légifrance

    Pensez (aussi) à mettre à jour vos mentions légales

    Dans la foulée, un petit rappel qui ne fera pas de mal : autre élément obligatoire sur les sites et blogs, les mentions légales. Beaucoup de sites ne respectent pas encore cette règle.

    Nous vous invitons à relire notre article sur les mentions légales pour vérifier que votre site soit en conformité et quelles sont les mentions à y faire apparaître. Pour ceux qui ont déjà une page de mentions légales, pensez aussi à les mettre à jour si besoin.

Connectez-vous avec votre compte