Player vidéo plus léger sur les fiches produits

Semaine après semaine, l'équipe continue de travailler autour de la question des webperf (la rapidité de chargement, pour dire les choses simplement).

Au delà de la vitesse, ces "Core Web Vitals" rassemblent différents critères qui visent à proposer un web plus rapide, plus optimisé en terme d'expérience utilisateur. Ces critères sont naturellement de plus en plus importants aux yeux de Google (qui distribue les bons points auprès des bons élèves 😉 )

 

Côté Front, après avoir abandonné petit à petit jQuery, revu la méthode de chargement du menu, du footer, optimisé la mise en cache, basculé sur le format WebP pour les images, utilisé le lazy loading natif (…), c'est au tour du player vidéo d'y passer.

 

Nous venons donc, sur les fiches produits - dans un premier temps - d'abandonner le service de player vidéo que nous utilisions jusqu'à présent. Et nous avons créé notre propre player web.

 

Pourquoi ? Plusieurs raisons.

  • avoir totalement la main sur notre player vidéo (historiquement, nous sommes passés d'un player vidéo Flash à Jwplayer puis à Flowplayer). Et c'est quand même bien de se doter d'un outil in house pour une plateforme de formations à distance proposant des cours en vidéo 😅

  • avoir un player plus léger = améliorer nos performances en vitesse de chargement ⚡️ ( et être encore plus aimé par Google).

Il nous reste encore quelques optimisations à réaliser sur les prochaines semaines. Vous allez donc encore entendre parler des ces "Core Web Vitals" un petit moment…

Au passage bravo à Fabien (qui a la paternité de ce nouveau player) et à Robin 👊


Quoi d'autres ?

  • Nous avons remplacé dans le menu principal la section "Offres Pro" pour la simplifier et afficher un seul lien vers nos Parcours Pro (qui prennent de plus en plus d'ampleur).
  • Réglé un soucis d'affichage des notations sur les profils formateurs. Bug qui se déclenchait au chargement de plus de résultats.
  • Nous avons ajouté le support des emojis dans l'outil Newsletter des formateurs (merci à Fred au passage).
  • Création d'un nouveau type de code promo (pour nos besoins internes seulement) qui nous permettra, sur des actions marketings précises d'offrir un cours à X apprenants, tout en conservant le reversement initial du formateur 🤩

Nouvelles apps en version Beta

beta.png

Notre petit cadeau juste avant les fêtes de Noël, les nouvelles versions de nos apps 🤶

On préfère passer par une phase Beta. Justement pour éviter un gros "couac" de fin d'année (même si on a testé nos apps en long, en large et en travers).

Voici donc la liste des nouveautés / améliorations… et en fin d'article, on vous explique comment obtenir ces apps en beta !


Fonctionnalités Communes à toutes les apps

Le plus gros changement, c'est l'ajout des Parcours PRO au sein des apps.

* Liste des parcours
* Page de présentation des parcours (utilisateur avec 0 parcours)
* Didacticiel et QCM de bienvenue
* Liste des modules
* Affichages des informations et statistiques du parcours
* Affichage des sessions de mentoring
* Accès au slack du parcours
* Accès aux tutoriels et QCM des modules
* Accessibilité des tutoriels et mis à jour de la progression de l’utilisateur
* Téléchargement du certificat
* Accès aux informations du projet personnel et au drive de dépôt du projet
* Accès aux informations de l’oral
* Téléchargement du certificat

 

Correctifs et améliorations :

  • Téléchargement des vidéos au sein d’un bundle
  • Scroll infini dans la partie « notre séléction » du catalogue
  • Mise en pause de la vidéo au clic sur un item du menu principal
  • Correction du guide de démarrage de l’application
  • Affichage des marques pages précédents au changement de vidéo
  • Amélioration du slide / touch de la timeline sur le player
  • Modification du format d’affichage du temps
  • Continuité de la vitesse de lecture entre les vidéos
  • Etat de chargement du filtre logiciel de « mes cours »
  • Accès à la dernière vidéo lue du Bundle
  • Gestion des loaders de chargement
  • Nouvelles icônes et harmonisation des couleurs
  • Harmonisation de la nomenclature de l’entité « tuto »
  • Etat des boutons inaccessible hors ligne dans le menu du tutoriel
  • Compatibilité avec le nouvel OS Mac BIG SUR

 

App iOS :

Fonctionnalités :

  • Gestion de la Chromecast Correctifs et améliorations:
  • Bouton de sourdine sur les vidéos d’aperçu au sein du catalogue

App Android :

Correctifs et améliorations :

  • Reprise d’une session Chromecast en cours
  • Gestion du bouton natif de retour d'Android

Un gros chantier (Merci à Quentin pour ce gros gros travail) !

 

Comment accéder aux versions Beta ?

  • Pour iOS ça se passe sur ce lien (TestFlight)
  • Pour Android ça se passe sur ce lien (depuis un device Android)
  • Pour la version Desktop (Mac, PC) ça se passe dans votre app actuelle, dans le menu "compte", puis "paramètres avancés. Il suffit d'activer l'option "s'inscrire au beta test", puis de relancer votre app. La version beta vous sera alors proposée !

Si vous observez des bugs, n'hésitez pas à nous les faire remonter avec un max de détails ! Sur support@tuto.com 🤓

Les attestations de formation (Parcours Pro) sont là !

Nous avons rendu dispo les attestations de formation pour celles et ceux qui suivent un parcours pro. Ces attestations vous seront demandées pour accéder aux tarifs étudiants chez de nombreux éditeurs partenaires (Adobe, Maxon…) 😉

CleanShot 2020-12-10 at 16.27.05.png

Mode Prévisualisation, rafraîchissement des icônes sur le compte...

Les équipes n'ont pas chômé 🤓

Voici une mise en production qui concerne les points suivants :

C'est nouveau !

  • Un petit coup de frais sur la partie compte (apprenant ET formateur). Avec de nouvelles couleurs plus chatoyantes, de nouvelles icônes plus modernes. Au niveau des menus, mais également dans certaines parties du site.

CleanShot 2020-11-24 at 12.46.21.png

CleanShot 2020-11-23 at 17.37.44.png

Une nouvelle iconographie, issue de Material Design et documentée sur Adobe XD et Notion, qui complète notre Design System en construction…

  • la possibilité, pour les formateurs, d'avoir un aperçu de leur fiche produit avant de l'envoyer en modération.

CleanShot 2020-11-23 at 17.51.17.png

Côté résolution de bugs

  • un méchant bug de l'espace (merci Kévin) qui transformait la chaîne de caractères "% de" en "?" - que ce soit dans la table des matières d'un tuto ou bien dans un champ de newsletter. Le bug est désormais résolu !

Little big Details

On aime bien glisser certains détails dans nos interfaces. Par exemple :

  • en fonction de l'heure à laquelle vous vous connecterez à votre compte vous aurez le droit à un "bonjour" ou un "bonsoir".

CleanShot 2020-11-23 at 17.45.32.png

  • on a contextualisé également le label qui lance un tuto vidéo : "commencer", "reprendre" ou "recommencer", selon le cas.

tuto.png

On espère que vous aimerez tout ces petits changements !

Bravo à Fabien et Robin pour le travail accompli 💪

Optimisation de la vitesse

La vitesse de chargement c'est la clef ! Référencement naturel, expérience utilisateur…

Depuis quelques semaines nous essayons de grappiller des millisecondes ci et là. Prioritairement sur les pages publiques de la plateforme (hors compte).

  • Désormais, toutes les images du sites ont été basculées au format WebP.
  • Nous avons mis en place le lazy loading natif.
  • Utilisation de la balise picture avec srcset.
  • Amélioration de preload sur les pages.
  • Abandon de jQueryUi.
  • Quelques optimisations Javascript.

Il y a encore des améliorations prévues en terme de WebPerf, dans les prochaines semaines 😉

VEFbVVKhY28GA.gif

Divers petits bug fixes

  • Correction d'un bug sur le menu du site, observé sur Android.
  • Sur la marque blanche : résolution du bug sur les QCM qui contenaient des images (et qui ne s'affichaient pas). Ça va faire plaisir à Jean-Loup, ça 😄
  • Passage en full CSS du menu et du Footer (Adieu jQuery).
  • Passage des images sur les pages des parcours Pro au format WebP (pour améliorer les webperf).
  • Ajout de la mention "formateurs certifiés" sur les formations réalisées par 2 formateurs, avec au moins l'un d'entre eux ayant ce statut (ça c'est pour Jacques !).
  • Désormais, les emojis s'affichent dans les avis apprenants, dans les salons d'entraide et même sur les fiches tutos 😜
  • Résolution d'un bug très relou, lors de l'upload de vidéos, côté outil formateur, sur un scénario très spécifique (qui serait long à exposer ici).
  • Résolution d'un bug qui arrivait parfois lors de la génération d'un certificat de fin de formation.
  • Ajout d'un message d'erreur lorsqu'un abonné tente d'utiliser un coupon de réduction (ce qui ne sert pas à grand chose, vu qu'il est abonné)…
  • Résolution du bug d'accès au dossier Google Drive des apprenants sur les parcours Pro.
  • Rajout de dernière minute : on a également fixé un bug de label pour l'export .CSV des ventes formateurs, depuis l'écran des statistiques.

Voilà 💪

Un ptit nouveau dans l'équipe !

L'équipe s'agrandit 🎊

Depuis quelques jours, Ludovic a rejoint l'équipe technique. Développeur Back-end expérimenté, ce fan de plongée sous-marine, va nous permettre d'aller un peu plus vite pour vous sortir de nouvelles fonctionnalités 👊

ludovic-2.png

Nouveau Parcour Pro : IT Essentials en partenariat avec Cisco®

Nous sommes devenus il y a quelques semaines une Cisco Networking Academy 🎉

En partenariat avec Cisco®, nous venons de publier un nouveau parcours Pro : IT Essentials.

Ce parcours 100% en ligne, regroupe les premières briques de compétences pour démarrer une carrière dans l'IT. Ce parcours prépare à la certification CompTIA A+. Et comme toutes nos formations longues, des financements sont possibles.

Alors n'hésitez pas à prendre contact avec nos équipes 🤓

👉 Accédez au parcours

mozaiq-parcours-itessentialsx2.jpg

Bloc de codes dans les salons d'entraide

Frédéric nous a demandé il y a quelques semaines si nous pouvions intégrer le support des blocs de codes, au sein des salons d'entraide.

Du coup, c'est opérationnel 🎉

Pour intégrer un bloc de code, que vous soyez apprenant ou formateur, il suffit de cliquer sur l'icône dédié, de coller le bout code que vous souhaitez intégrer à la discussion, puis d'indiquer le langage utilisé.

Le code sera alors automatiquement mis en forme et intégré à la conversation. Pratique pour faire du débug !

Merci à Fred pour la suggestion 🙂

App iOS

Petit chantier de mise à jour pour notre app iOS. Rien de bien nouveau, simplement un nouveau core qui améliore les performances de l'app :

  • Mise à jour de WebView incluant de nombreux correctifs sur l'iPad
  • Latence play/pause > corrigée
  • Scroll de la toc saccadée > corrigé

Merci à Quentin pour cette nouvelle version qui est dispo sur l'AppStore ou en mettant à jour votre app sur iOS ✊