Technologies Web pour les concepteurs - Rembourser la dette

J'ai un devoir envers Habr. Il y a deux ans, j'ai écrit l'article « Technologies Web pour les concepteurs - pourquoi et comment », et je n'ai pas publié la suite de l'article.

Et enfin, je peux rembourser une partie de cette dette. Tout le mois de novembre, le matin et le week-end, j'ai enregistré des vidéos de formation sur JS pour les designers. Au cours du projet, il a expérimenté différents formats, équipements et post-traitement. Dans cet article, je résumerai le mois de travail sur le cours et parlerai de ce que j'ai moi-même appris en l'écrivant.

Le cours comportait deux tâches:

1. aider les concepteurs à voir comment la connaissance de la technologie peut être utile dans le travail quotidien;
2. pour les concepteurs qui veulent étudier la technologie, donnez un point de départ facile.

Pour résoudre le premier problème, j'ai enregistré plusieurs courtes vidéos conçues pour aider les concepteurs à voir de nouvelles approches de travail:

1. Combattre la routine Sketch avec Kraft et JSON
2. Comment prendre des données d'un site, les transformer en JSON et alimenter Sketch
3. Un moyen facile de créer un prototype d'une nouvelle version d'un produit avec Stylish
4. Comment créer une extension de navigateur

Les gens ont regardé et aimé ces vidéos. Tout avait l'air pour que vous puissiez commencer à démonter le sujet plus en détail. Par conséquent, j'ai créé un exemple avec la modélisation des données et enregistré une vidéo d'introduction à ce sujet, " Leçon # -1: Pourquoi les concepteurs ne peuvent pas apprendre les technologies Web ". Ils ont regardé la vidéo 1296 fois, 83 fois aiment et n'aiment pas 7 fois.

Je voulais que l'exemple ressemble à un vrai. Mais pour la plupart des téléspectateurs, il semblait trop compliqué. Pour expliquer les principes de son fonctionnement, j'ai enregistré un exemple simplifié: "Un exemple simplifié de modèle de données ".

En outre, le plan était le suivant: démonter sur la base de cet exemple différents sujets sur JS, de sorte qu'à chaque leçon, l'exemple devienne plus compréhensible. Et puis, quand les gens comprennent les bases - réécrivez l'exemple de JS pur pour React et commencez le cours à ce sujet.

Et j'ai commencé à enregistrer les premières vidéos:

1. Syntaxe JS
2. Variables
3. Les fonctions
4. Les objets
5. Tableaux
6. Json

Les vidéos étaient longues, de 15 à 20 minutes chacune, et peu pouvaient les regarder jusqu'à la fin. Par conséquent, j'ai commencé à diviser les sujets en plus petits. Par exemple, l'analyse des instructions conditionnelles ressemblait à ceci:

1. Opérateurs conditionnels: notions de base
2. Valeurs booléennes et opérateurs de comparaison
3. Casting booléen
4. Opérations logiques
5. Opérateur ternaire
6. Affectation conditionnelle
7. Analyse des devoirs

J'ai enregistré le même ensemble de vidéos sur les bases de l'utilisation du DOM:

1. DOM: Bases
2. Rechercher des nœuds sur une page
3. Lecture des propriétés du site et de leur contenu
4. Modification des nœuds
5. Traversée d'arbre de noeud
6. Analyse des devoirs

Malgré le fait que la vidéo soit devenue plus courte et plus légère, le nombre de vues a diminué. Les vidéos sont encore trop complexes à regarder entre les cas. Et pour ceux qui sont prêts à consacrer du temps à regarder, il est plus facile de regarder une vidéo dans son ensemble qu'un ensemble de courtes. De plus, les vidéos sont devenues plus ennuyeuses.

Que faire ensuite avec le cours n'est pas encore tout à fait clair. D'une part, des dizaines de vues indiquent que l'intérêt pour le sujet est en train de s'asseoir. D'un autre côté, je ne suis pas satisfait de la qualité des matériaux obtenus et du temps nécessaire à leur création.

En tout cas, créer un cours a été une expérience intéressante pour moi, qui m'a appris plusieurs choses:

1. Trouvé un bac à sable sympa pour travailler avec le code: codesandbox.io . Dans celui-ci, vous pouvez créer non seulement des pièces individuelles comme dans codepen.io , mais aussi des projets entiers avec une structure de fichiers.
2. J'ai appris à travailler avec ScreenFlow , ce qui s'est avéré très pratique pour l'édition de screencasts.
3. L'écriture du son dans un environnement domestique est meilleure sur une boucle que sur un grand microphone. Il est beaucoup plus facile d’atteindre une qualité raisonnable, car vous n’avez pas à faire face aux échos des murs.
4. Vous pouvez écrire une vidéo sur le téléphone, mais vous avez besoin d'un peu de compétence. Par exemple, dans les dernières vidéos, j'ai une qualité d'enregistrement très médiocre et l'image saute constamment. Il semble que ce soit une sorte de fonction de stabilisation vidéo dans la note 9.
5. Vous devez acheter immédiatement la lumière. Deux boîtes à lumière avec AliExpress coûtent 3000 roubles et la qualité vidéo est devenue nettement meilleure.
6. J'ai appris que toute ma vie, j'ai incorrectement appelé l'opérateur "ternan" "trinar".
7. Avant d'enregistrer une vidéo, il est préférable de vérifier la prononciation de tous les mots étrangers, sinon ce sera dommage. :)

Merci d'avoir lu jusqu'au bout. Si vous avez des idées sur la façon d'améliorer ce cours, je serai heureux de tout commentaire. Le cours est conçu pour vulgariser la technologie auprès des concepteurs et non des développeurs. Par conséquent, j'omets les problèmes de performances et parfois «j'enseigne mal» intentionnellement, car les performances et la propreté jouent rarement un rôle important dans les prototypes.


PS: Je répondrai aux commentaires avec des mises à jour afin que les nouveaux lecteurs n'aient pas à poser les mêmes questions.

PPS: Si vous êtes intéressé à suivre le cours, c'est-à-dire la chaîne de télégramme detepr . Pour obstruer Habr avec des articles sur les bases du développement - la main ne se lève pas. J'écrirai donc le prochain article sur le cours dans environ six mois.