creations

  • cocreation logo

    Nous accompagnons un client dans le lancement de sa nouvelle marque.

    Après un atelier brainstorming pour l'aider avec son équipe à trouver le nom de la marque, il nous a fait confiance pour travailler en co-création sur son identité visuelle.

  • Bonne année 2017 !

    Cette année, nous avons opté, pour nos vœux, pour un retour au bon vieux papier : celui qu’on touche, qui reste, qui étonne, qui s’adresse personnellement à quelqu’un…
    Après trois années de vœux digitalisés (certes, que nous avons cherché à rendre originaux, mais bon… en ligne quand-même), nous avions envie de proximité, de chaleur… et ça, le papier peut souvent l’apporter.

    « What ? Mais c’est old-school, ça ! »

    C’est vrai, cela se fait de moins en moins, et pourtant, on constate bien souvent que beaucoup de gens restent attachés au format imprimé. Que, parce que ça ne se fait plus beaucoup justement, c’est devenu plus marquant, plus apprécié… et plus vu ! Eh oui… les vœux par mail finissent parfois dans les spams, ou n’ont pas le temps d’être ouverts dans la longue liste des messages reçus…

    Et puis, on assume d'être un peu old-school, na !
    Bref, on avait envie. On l’a fait.

    La créa

    Après un brainstorming toujours aussi sympathique (et drôle… le mode lâcher-prise étant propice à la créativité), nous avons abouti à l’idée d’un flipbook (« Flipbook, folioscope, feuilletoscope : jeu d’optique ayant précédé et accompagné l’invention du cinéma »). Ambitieux projet dans sa construction comme dans sa fabrication, mais on n’a même pas eu peur…

    Bim, bam, boum :

    • storyboard sur le thème du voyage (parce qu’on aime ça, parce qu’on va déménager en 2017, parce que plein de nouvelles aventures nous attendent à l’aube de nos 10 ans)
    • illustrations, photomontages
    • création des planches (non sans avoir beaucoup réfléchi au rythme idéal)
    • impression par nos soins
    • assemblage, collage, massicotage, agrafage
    • mise sous pli
    • envoi postal... avec le petit détail qui tue - mais quelqu’un l’a-t-il seulement vu ? :-) : des timbres sur le thème du voyage. On est perfectionnistes ou on ne l'est pas !

    Il faut le reconnaître : c’est beaucoup de mise en œuvre, mais le résultat nous plaît beaucoup.
    On espère que celles et ceux qui l’ont reçu ont aimé, et l’ont gardé sur leur bureau comme un petit objet sympathique (feuilleter un flipbook est un anti-stress garanti ! Retour en enfance, mains occupés, rythmes personnalisés).

    Les premiers retours ont déjà été super : étonnement, sourire, amusement sont un bon résumé.

    La version mail

    Enfin, parce qu'on a beaucoup beaucoup de monde à qui on a envie de souhaiter les vœux, on en a fait une version en ligne !

    Bonne et belle année à tous !

    En images

  • Com'3Elles nous a été recommandée par une relation pour réaliser nos vœux 2014. Nous avions une idée assez précise de ce que nous voulions sur le contenu. La mise en forme et en animation a été donc confiée à l'équipe de Com'3Elles.

    La réalisation s'est déroulée de façon assez fluide : story-board graphique, mise en animation, sonorisation, validations et mise en ligne. Le résultat était tout à fait conforme à nos attentes et les délais ont été respectés. Merci

  • 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

  • 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 !

Connectez-vous avec votre compte