设计师的Web技术-偿还债务

我对哈伯有责任。 两年前，我写了一篇题为“ 面向设计师的Web技术-为什么和如何 ”的文章，但我没有发布本文的续篇。

最后，我可以归还部分债务。 在整个11月的早上和周末，我为设计师录制了有关JS的培训视频。 在项目期间，他尝试了不同的格式，设备和后处理。 在这篇文章中，我将总结该课程的工作月份，并讨论我自己在记下来时学到的知识。

该课程面临两个任务：

1. 帮助设计师了解技术知识如何在日常工作中有用；
2. 对于那些想学习技术的设计师，请提供一个轻松的起点。

为了解决第一个问题，我录制了一些短片，旨在帮助设计人员了解新的工作方法：

1. 与Kraft和JSON进行Fighting Sketch例程
2. 如何从网站获取数据，将其转换为JSON并提供给Sketch
3. 使用时尚的产品新版本原型的简单方法
4. 如何创建浏览器扩展

人们观看并喜欢这些视频。 一切看上去都很好，因此您可以开始更详细地分解该主题。 因此，我创建了一个带有数据模板化的示例，并录制了有关该视频的介绍性视频，“ 第-1课：为什么设计师无法学习Web技术 ”。 他们观看了1296次视频，其中83次喜欢和不喜欢7次。

我希望该示例看起来像一个真实的示例。 但是对于大多数观众来说，他似乎太复杂了。 为了解释其操作原理，我记录了一个简化的示例：“ 数据模板的简化示例 ”。

进一步，计划是这样的：在此示例的基础上分解有关JS的不同主题，以使每节课中的示例都变得更加易于理解。 然后，当人们理解了基础知识后，将示例从纯JS重写为React，并开始进行学习。

我开始录制第一个视频：

1. JS语法
2. 变数
3. 功能介绍
4. 对象
5. 数组
6. 杰森

这些视频很长，每个15-20分钟，几乎没有观众看完。 因此，我开始将主题分解为较小的主题。 例如，解析条件语句如下所示：

1. 条件运算符：基础知识
2. 布尔值和比较运算符
3. 布尔转换
4. 逻辑运算
5. 三元运算符
6. 条件分配
7. 作业分析

我录制了关于DOM使用基础的同一组视频：

1. DOM：基础知识
2. 在页面上搜索节点
3. 阅读网站属性及其内容
4. 节点编辑
5. 节点树遍历
6. 作业分析

尽管视频变得越来越短和明亮，但观看次数却有所减少。 这些视频仍然太复杂而无法在两种情况下观看。 对于准备投入时间观看的人们来说，观看整个视频要比看短片更容易。 另外，这些视频变得更无聊了。

下一步该课程尚不完全清楚。 一方面，数十个视图表明对该主题的兴趣正在下降。 另一方面，我对所获得材料的质量以及创建它们所花费的时间不满意。

无论如何，创建一门课程对我来说是一次有趣的经历，它教会了我几件事：

1. 找到了一个很酷的用于处理代码的沙箱： codesandbox.io 。 在其中，您不仅可以创建codepen.io中的单个片段，还可以创建带有文件结构的整个项目。
2. 我学会了使用ScreenFlow ，这对于编辑截屏视频非常方便。
3. 在家庭环境中写声音比在大麦克风上循环播放更好。 由于您不必处理墙壁上的回声，因此获得合理的质量要容易得多。
4. 您可以在手机上编写视频，但需要一点技巧。 例如，在最新的视频中，我的录制质量非常差，并且图片一直在跳。 似乎这是Note 9中的某种视频稳定功能。
5. 您必须立即购买灯。 两个装有速卖通的柔光箱的价格为3,000卢布，视频质量明显提高。
6. 我得知我一生都错误地将“ ternan”运算符称为“ trinar”。
7. 在录制视频之前，最好检查所有外来词的发音，否则会很丢脸。 :)

感谢您阅读到最后。 如果您对如何使本课程变得更好有任何想法，我将很乐意提出任何意见。 本课程旨在使技术在设计人员而非开发人员中普及。 因此，由于性能和清洁度很少在原型中扮演重要角色，因此我忽略了性能问题，有时会故意“教坏”。


附言：我将通过帖子更新来回应评论，这样新读者就不必问同样的问题了。

PPS：如果您有兴趣参加此课程，即电报频道detepr 。 用有关发展基础的文章阻塞Habr-手不会上升。 因此，我将在大约半年的时间内撰写有关该课程的下一篇文章。