L'objectif est de repenser l'organisation de tutoriel pour mieux guider les utilisateur vers les formations et vidéos à regarder et d'aider les personnes arrivant depuis un moteur de recherche à s'y retrouver. On désigne pour un tutoriel les technologies qui sont utilisées dans la vidéo en mettant le "focus" sur les technologies qui sont le centre d'attention de la vidéo. La technologie ou le tutoriel peut avoir des requirements qui désigne les formations ou les tutoriels à regarder pour comprendre. L'utilisateur peut marquer certaines vidéos / formations comme vu. A partir de ces vus il est possible de savoir si l'utilisateur a le niveau suffisant pour voir la vidéo mais aussi de suggérer des vidéos non vues qui traite (focus) les technologies qu'il maitrise ou de lui proposer de découvrir de nouvelle technologies qui require celle qu'il connait déjà.

La différence "Enseigne" et "Utilise"

Je ne suis pas sûr de cette différenciation mais je pense qu'il est important de différencier les vidéos qui se focalisent sur l'apprentissage d'une technologie par rapport aux vidéos qui sont plutôt des cas pratiques :

  • "Découverte de l'ECMAScript 2015" enseigne JavaScript
  • "Créer un carousel" utilise JavaScript (plutôt un cas pratique)

Système de dépendance

Les liaisons require sont la clef de ce nouveau système car cela va permettre la suggestion de vidéo. Si l'utilisateur clique sur une vidéo, on lui présente les vidéos required les plus profondes qu'il doit regarder pour avoir le niveau requis. On peut aussi présenter les vidéos qui require la vidéo actuellement regardée.

  • Une vidéo pourra être marqué comme vu avec un bouton (ou lorsque la vidéo se finit)
  • Si une vidéo est vue, on considère toutes les vidéos required comme vues

Maquette

Voila une preview de l'avancement

Apprentissage d'un langage

Présentation du chemin de formation "général"

Côté base de données ?

Le problème est que MySQL ne permet pas de liaisons récursive pour trouver facilement tous les requirements d'une vidéo. De la même manière certaines requêtes deviennent assez complexe (suggérer des vidéos à regarder en fonctions des vidéos regardées par les autres utilisateurs) du coup il faut trouver une alternative pour gérer ça.

  • neo4j qui permet de représenter le graph directement (inquiétude sur les performances pour certaines requêtes d'aggrégation et l'organisation générale)
  • postgresql permet les requête hiérarchiques et pourrait venir en remplacement pour tout le site (plus complexe)

Des suggestions

C'est encore un Work in progress donc si vous avez des suggestions sur les liaisons à mettre en place, n'hésitez pas à partager ;)

21 réponses


Totalement d'accord je me perd régulièrement même pour retrouver une vidéo un remaniement sera grandement apprécié :D
Pour le système de parcours je trouve ça top aussi.
Pour la BDD demande à https://twitter.com/tentacode, il bosse sur Betaseries et ils tournent avec neo4j.

Je suis aussi tout à fait d'accord pour un remaniement ! Le site gagnerai en clarté, et facilliterait grandement l'apprentissage ! Aujourd'hui je m'y perds encore ! Pourtant le contenu est de qualité, il serait dommage de ne pas le mettre mieux en avant !

Egalement d'accord! une reorganisation serait top!
Le système de vue et "niveau necessaire pour voir les videos suivantes" sont de très bonne idées!

Personnellement je n'ai pas trop de mal à me repérer, quand je cherche quelques chose en particulier sois je vais voir dans la formation dédié, sois dans le cas où je ne sais pas trop où chercher un petit tour dans la barre de recherche et on trouve vite son bonheur.

Malgré ça je trouve qu'une réorganisation du site ne lui ferait pas trop de mal, surtout l'idée de proposer des parcours complet. Comme ça quand quelqu'un découvre le site et souhaite débuter un nouveau langage il n'a pas besoin de demander dans le forum par quoi il doit commencer. Aussi comme l'a dit napka4, le site gagnerais énormément en clarté.
Par contre proposer de mettre en ligne le site après avoir appris l'HTML ça me semble un petit peu juste. Je trouve que c'est entrer trop rapidement dans les détails. Pourquoi ne pas proposer ça dans la partie back-end ça aura plus de sens de dire "On bosse sur le back-end donc on va parler a 90% de serveur et donc on va également apprendre à envoyer les fichiers sur un hébergement".
Ou au pire aborder un minimum ce qu'est un hébergement mutualisé etc.. mais sans trop entrer dans les détails.

Petite question :
@Grafikart, comment tu penses organiser la page d'accueil ?

Je pense que c'est une bonne idée.
Par contre on peut connaitre les prerequis d'une video sans pour autant passer par tes tutos. Donc je suggere de remplacer (dans ton analyse) les vu par des su.
L'idée de suggession des prerequis est bonne mais avec moins de questions possibles et prevoir une reponse pas maintenant car supposons qu'un user veuille coude que coude suivre une video sans se soucier des prerequis

@Laznet La partie upload "simple" devra être assez tôt car elle permet de clarifier l'attribut "href" des liens. Cette formation couvrira les choses de manière "légère" avec l'utilisation de Filezilla / FTP. La partie Apache / nginx and co sera placé dans la partie backend (plus tard)

@SirKane Les prérequis n'empècheront pas du tout de regarder la vidéos (comme tu le dis ça serait trop contraignant pour les utilisateurs). L'idée est plutôt d'afficher la liste des vidéos à voir pour comprendre correctement la vidéo. Pour le wording de la liaison je ne suis pas encore sûr "learnt" serait pas mal je pense à la place de "viewed"

Grafikart, tu comptes faire une refonte total du site ? Ou juste la partie formations / tuto
Par exemple, tu as prévu quelques chose pour le forum ? L'ajout de nouvelles catégories etc.. ?

Bah en faite je pars du principe que quand tu apprends l'HTML.. tu ne connais pas grand chose (parce qu'on à tous débuté par là.. et que logiquement tu n'as pas / peu de connaissance dans le web quand tu apprends l'HTML)..
Donc vu le peu de connaissance que tu as tu n'as pas la problématique (ni même l'idée..) de vouloir mettre en ligne ton site, tu veux juste coder une page web et la voir "fonctionner" et dans ce cas l'HTML peut très bien fonctionner en local.
Après comme je le disais, aborder le gros de l'hébergement web ce n'est pas non plus mauvais, parler de ce qu'est "FTP", bosser sur les notions de SEO (pour faire du bon code HTML.. et donc avoir en tête la problématique de faire du code propre pour le SEO). Au pire l'upload quand on aborde les href, comme l'a dit grafikart.. vu que ça reste un peu toujours autour de l'HTML.. Mais dans ce cas ça veut dire qu'il devra aborder un peu PHP (je ne sais pas comment tu vois ça @Grafikart)

Après c'est une question de point de vue ^^.

@Grafikart donc il faut nous preparer un U.X logique et tres top comme sur tes graphiques

Par contre je suis d'accord avec toi Sir Kane, le rendu sur la maquette est top.

Vraiment pas mal le concept de require.

poirquoi ne pas passer par graphql pour ca? c'est typiquement un cas d'utilisation plus complet pour de la graph db

Il est en effet temps de remanier un peu le site, par contre, j'ai peur que le site devienne un peu comme codeacademy / ... : un site qui nous permette pas de voir une video très précise. Je m'explique : si je veux revoir le tuto sur Stripe , j'ai pas nécessairement envie d'être obligé d'avoir vu les prérequis.
Pour ce qui est de la techno , pourquoi ne pas tenter TensorFlow (ou concurrant ) ?, le site pourrait proposer en fonction de tout un tas de paramètre la / les prochaines vidéos à voir et ça permettrait à @Grafikart de se démarquer de la guideline habituelle.

@jchr, je sais pas si tu as tout lu mais il est juste question de conseiller des prérequis.

@Jchr, surtout que Stripe n'est pas réellement nécessaire à la création d'un site de base. Il est plutôt réservé pour un cas de figure particulier.
Et je suppose que Grafikart permettera toujours la possibilité de faire des recherche et donc de trouver un tuto facilement.

Hello @Grafikart, si déjà ce bouton (voir image liée) était plus accessible et qu'il permettait d'aller chercher toutes les vidéos de chaque sujet, ce serait super. Car actuellement ce n'est pas le cas, par exemple pour VueJS, il ne liste que les TP ou autres vidéos sûrement tagguées Vue, alors qu'on devrait pouvoir trouver, en selectionnant Vue, toutes les vidéos, y compris celles des formations.

Image liée : https://imgur.com/Z9XgkwE

+1 Tomy Perso

Pour faire rapide :

  • Organiser les choses de façon logique ou selon un système de parcours. Par exemple, sur cette page on ne sait pas par où commencer.

  • Faire un résumé / présentation rapide de chaque outil / technologie surtout quand l'outil se base sur la même technologie... (ex: résumé / présentation de Cake PHP et de Laravel)

  • Se limiter uniquement aux formations. Je n'ai jamais vraiment compris l'intérêt des tutoriels. Les tutoriels font référence à des formations... donc autant les mettre directement dans les formations en question sous le libellé "Cas concrets" ? Je trouve que scinder en deux libellés ("tutoriels" et "formations") participe au manque de clarté.

Après c'est de simples idées...

" sur cette page on ne sait pas par où commencer" — Je ne suis pas d'accord, il y a "Pour débuter" etc.. Selon moi c'est plutôt un parcours entre les formations qu'il faudrait faire "un fois que j'ai terminé la formation sur le javascript qu'est ce que je fais ?".

Hello tout le monde,

Super idée le système de prérequis.
Personnellement j'ai jamais vraiment eu de problème à retrouver les vidéos que je cherchais. Moi le souci c'est retrouver dans quelle vidéo est abordé un sujet qui n'a pas de lien direct avec la vidéo.

Je prends un exemple. Dans une vidéo sur Laravel (je sais plus si c'est dans les formations ou les tutos) Johnatan mets un petit script pour avoir un retour visuel de ses requetes SQL en console, avec une petite coloration synthaxique qui va bien.

En soit c'est quelques minutes dans la vidéo ne concernent pas le sujet traité, mais ce genre de petites "astuces" y en a pletor dans l'ensemble des vidéos. C'est ce genre de chose que je trouve dommage de pas réussir à retrouver rapidement.

Du coup dans la refonte du site, un truc qui serait super cool, c'est un système pour pouvoir mettre des anotations sur les vidéos. Ca ferait en quelques sortes un système de recherche personnalisé. Ce serait l'occasion d'insiter les gens à mater les vidéos sur le grafikart.fr plutot que sur Youtube.

Pourquoi pas proposer différentes fonctionnalités pour les premiums. Je trouve que l'accès aux vidéos en avant première c'est cool (en soit ca m'a insité à reprendre un premium). Régulièrement je prends pour 3 mois, mais j'avoue que je suis pas en continue... s'il le premium présentait un peu plus d'avantages que la simple volonté de remercier et soutenir Graf, parce que télécharger les vidéos, youtube ca suffit et télécharger les sources, c'est un truc de flemmard, je pense que ca me ferait prendre un compte premium plus régulièrement.

En tout cas, le site je trouve qu'il est top, la refonte du site je sais qu'elle sera top et que quoi qu'il arrive les contenus seront toujours de qualité !

Johnatan encore merci pour tout ce que tu partages, tu devrais être reconnu comme organisme de formation !

C'est en ligne ;)