client

  • Idées de cadeaux par nos clients

    idees noel

    Nous sommes à moins d'un mois de Noël. Que ce soit à titre privé ou à titre professionnel, le casse-tête traditionnel a commencé pour trouver LA bonne idée pour ses proches, ses clients ou ses partenaires.

    Vous nous connaissez : on ne peut pas s'empêcher de rechercher toujours à concilier communication, efficacité et responsabilité !

    • Communication : la fin d'année est une période propice à une communication moins promotionnelle : par des cadeaux, des vœux, nous nous rappelons au souvenir de nos prospects, clients et partenaires.
    • Efficacité : quitte à offrir quelque chose, si ce cadeau est original et en cohérence avec ce que vous êtes, il marquera plus les esprits et d'une simple opération de com, vous en ferez un moment réellement efficace
    • Responsabilité : acheter local permet d'économiser des tonnes de CO², vous favorisez l'activité économique locale et vous démarquez encore des autres

    Parmi nos clients, certains ont des produits ou services qui peuvent tout à fait s'offrir à cette occasion.

    Voici une sélection d'idées cadeau qui peuvent changer.

    Chocolat gourmand

    avec La Chocolaterie Artisanale de Larra

    Depuis plus de 50 ans dans le Nord Ouest toulousain, cette entreprise artisanale familiale fabrique ses chocolats à la main et sélectionne ses produits, issus du terroir, pour leurs qualités gustatives. Peu de transformation, ni lécithine ni conservateur, ganache ou huile de palme.

    Un large choix d'assortiments et coffrets est disponible en boutiques ou en ligne à partir de 10,50 €.

    Vous avez un doute sur les goûts de vos proches, vos clients ou partenaires ?
    Offrez un bon cadeau :

    • Format carte au montant de votre choix en boutiques (valable uniquement sur place)
    • Format numérique à 10 €, 20 € ou 50 € en ligne (valable uniquement en ligne)

    Chocolat gourmet

    avec Rose & Cacao

    Le chocolat fait toujours plaisir. C'est un classique mais celui de Rose & Cacao, produit en Ariège n'a rien de classique : cru, végan et bio, c'est un plaisir pour le palais et les yeux.

    Pour les fêtes, Rose & Cacao propose 2 offres de coffrets découverte aux particuliers et aux entreprises :

    • 5 tablettes de 50 g à 24 €
    • 5 tablettes de 100 g à 38 € (photo ci-dessus)

    Très prochainement en vente sur leur boutique en ligne !

    Prendre soin de soi

    avec Suzy Mesnard Coiffure

    Située à Gratentour au nord de Toulouse, Suzy propose plusieurs idées :

    • Coffret shampooing et gel douche spécial enfant sans Paraben
    • Coffret de produits spécial voyage
    • Crackers Karité contenant soin pour les mains + gloss pour les lèvres
    • Possibilité de composer ses coffrets selon ses envie

    Plus d'informations : 05 61 82 54 85 ou suzy-mesnard-coiffure.fr

    Pour tous les cyclistes

    avec United Bicycles

    Tout nouveau magasin de cycles au nord de Toulouse, United Bicycles propose des produits et services pour toutes les pratiques cyclistes, pour tous les âges et les besoins. Du vélo de ville au vélo de course en passant par le gravel et le vélo à assistance électrique, cycliste amateur ou exigeant, leur offre large et qualitative permet de trouver des cadeaux à tous les prix. Sylvain et Christian pourront vous conseiller et vous offrir le café !

    Vous avez peur de vous tromper ? Voici 2 idées qui feront mouche :

    avec le Gribouillard

    Le samedi 1er décembre, vous trouverez peut-être LE cadeau original au marché de Noël qui y est organisé.

    L'argilier y vendra des Poteries, Céramiques et Raku de 10 h à 19 h au 33 impasse Michel-Ange 31200 Toulouse.

    L'atelier Toulousain "le gribouillard" propose des cours et des stages de dessin, de peinture, d'arts plastiques, de modèle vivant, d'aquarelle, de croquis, de scultpture, de modelage, de fusain pour enfants, adolescents et adultes, débutants ou confirmés...

    Pour concrétiser un projet de jardin

    avec Terre de Cultures et Jardin

    Offrez une carte cadeau, pour particulier et entreprise :

    • un questionnaire rapide de pré-visite
    • une visite de 2 h avec des conseils personnalisés, des propositions pratiques pour l'aménagement du jardin
    • une synthèse écrite envoyée

    Prix : 150 € tout compris

    Plus d'informations : Sophie Fabre Paysagiste au 06 71 93 13 37, www.terres-cultures-jardins.fr ou Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

     

    Son intérieur à son image

    avec JB Matière Grise

    Julie Béringué, Architecte d'intérieur située à Toulouseest qualifiée par le Conseil Français des architectes d’intérieur. Habitat privé ou espace professionnel, Julie propose 3 offres pour être au plus près de vos souhaits allant du simple conseil à la maîtrise d’œuvre intégrale.

    Idée cadeau : la formule "J’ai besoin d’un conseil !" à partir de 150 € de l'heure

    Voyages plongée

    avec C6BO

    Voyagiste toulousain spécialisé dans les séjours et croisières de plongée, C6BO propose pour ce noël 1 séjour aux Philippines adapté aussi bien aux plongeurs qu'aux non-plongeurs :

    Le séjour aux Philippines :
    Séjour Détente & Découverte à Puerto Galera à partir de 1425 € (prix hors plongée)

    • Pour les plongeurs certifiés, 1590€ avec 15 plongées.
    • Pour les débutants (en plus du séjour) :
      • Découvrir | Baptême de plongée, 53€ /plongeur
      • S'initier | Formation Open Water PADI, 400€ /plongeur
      • Explorer | Forfait de 15 plongées, 165€ /plongeur

    Le bon cadeau :

    Faites plaisir et participez aux prochaines vacances des personnes qui vous sont chères.
    Contactez-les pour créer ensemble votre bon cadeau personnalisé (nombre de participants au bon cadeau, montant souhaité,...)

    Infos et réservations : Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.05 82 08 64 90

    https://www.c6bo-plongee.fr

    Pour les entrepreneurs engagés

    avec EnSSemble.org, les Ethipreneurs

    L'association EnSSemble a lancé le mois dernier une offre de formations et de coaching en ligne pour les entrepreneurs engagés. Vous avez un ami, un client ou un partenaire qui souhaite créer ou développer une entreprise engagée ?
    Offrez-lui un "Cairn" : ce parcours  va vous permettre d'acquérir et mettre en œuvre une compétence clé qui peut faire la différence.

    • Accès à l'école 3 mois
    • Une séance de coaching.
    • Une formation au choix, soit environ 4 heures de  formation

    Prix : 170 €

    Contactez Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. pour plus d'informations !

    Sa voiture propre

    Avec Cocoon Auto

    Ce nouveau centre de lavage Auto au nord de Toulouse bichonne autant votre voiture (intérieur et extérieur) que l'environnement. Pendant le lavage, le conducteur n'est pas en reste puisqu'il peut en profiter pour se reposer, faire ses courses au centre commercial voisin (prêt de vélos électriques) ou travailler dans l'espace de co-working avec le wifi gratuit.

    Cerise sur le gâteau, laver son véhicule chez Cocoon Auto protège aussi l'humain : Cocoon Auto est une entreprise d’insertion par l’Activité Economique.

    Vous pouvez offrir une carte cadeau du montant de votre choix, à partir de 8 € !

    De quoi faire plaisir à tous ses clients, salariés ou proches tout en donnant du sens à ce geste.

    En chansons et musique

    avec Jules Nectar

    Jules Nectar est auteur compositeur interprète. Des colorations pop avec des mélodies accrocheuses qui restent longtemps en tête. De la folk-song à la française avec des harmonies vocales et des guitares acoustiques très présentes.
    Des pointes d’électro avec des sonorités synthétiques ou trafiquées. Des paroles qui décrivent avec détachement, ironie et poésie des instants, des émotions ou des sensations qui touchent. (Extrait de sa Bio)
    Offrez un album : 13 € l'album / 20 € le coffret

    Tous au cinéma !

    avec l'American Cosmograph

    Le Cosmo vous propose de chouettes idées cadeaux pour Noël !

    • les carnets d'abonnements : 50€ les 10 entrées non-nominatives et sans limite de validité, acceptées au Cosmo et dans toutes les salles de cinéma Utopia.

    Vidéo en Poche : pour 5€ par film, venez faire remplir vos clés USB de films à (re)découvrir et à offrir ! Catalogue des films : www.videoenpoche.info

    • Samedi 15 et le dimanche 16 décembre, grande vente d'affiches de cinéma dans le hall du cinéma, au profit du RETSER (Réseau des Etudiants Toulousains en Soutien aux Exilés et Réfugiés) : retrouvez les affiches des films programmés au Cosmo ces six derniers mois !

    Plus d'infos : www.american-cosmograph.fr

    Objets uniques Bohèmes

    avec Lovmint

    Des idées pour ceux aiment les objets rares et uniques, remplis d'histoire. Lovmint est une boutique en ligne de décoration bohème ethnique & éclectique avec une sélection pointue d'objets vintage ou issus de l'artisanat qui s'inscrit dans la tendance déco actuelle.

  • 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

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

Connectez-vous avec votre compte