search

mindpin / problems

问题驱动研发！！
5 stars 1 forks source link

各种新颖的教程展现形式的收集和研究 #54

Open ben7th opened 10 years ago

ben7th commented 10 years ago

为了增强教学产品的互动性，为教学场景增加操作感和趣味性，让教学内容不仅局限于单纯的图文视频，从现在开始我会收集一些我看到的，形式上新颖的教学场景设计例子（大多是web上的）。 便于我们总结，分析优缺点，研究其设计，借鉴，来改进我们的产品。

2014.8.4 代码回放的教学场景

提供教程的网站：极客标签GB课程 http://www.gbtags.com/gb/gblibrary.htm

典型例子： http://www.gbtags.com/gb/rtreplayer/3.htm

教程类型，前端程序开发。

特点：代码回放，可以以不同的倍速回放代码编写者敲代码的过程。 优点：代码回放是在 web 上的编辑框里进行的，回放过程中会实时展现代码运行预览（他应该想达到这种设计效果，但是目前的产品中还有些bug）。可以随时暂停观察。比视频体积更小，播放更迅速。更适合移动场景。 缺点：这种形式相比于 RailsCast 这样的以视频记录敲代码过程的教程而言，表现力并无明显提升。而且没有语音解说，导致看起来有些干巴巴。

直观上的第一感受

吴笛  11:13:16
看过了，的确有些有趣的特点，用来做 FlappyBird 的代码编写回放，这个例子也比较【吸引人】。

作为有一定编程基础的读者，我利用 x6 速度播放时，能够【激发亲自编码的冲动】，至于这个回放过程对我学习录制者的编程思维有多大帮助，这个我目前还说不准。

根据【先设法把一部分读者诱骗过来】，再【逐步为他们提供更高质量的编程提升帮助】，这个案例可以为我们所借鉴。

设计研究的对话：

洋气书生(6217861)  11:07:31
思考话题：
这种代码编写过程回放效果应如何设计，建模和持久化存储？

http://www.gbtags.com/gb/rtreplayer/3.htm

按 播放按钮 可以展开回放
所谓回放就是把敲代码的过程replay出来
负伤de骑士(21929307)  11:09:55
记录 输入框内容的每一次变化，保存起来？
理论上可以么，这种思路
Kaid<kaid@kaid.me>  11:10:44
change貌似是在焦点变化的时候才生效
洋气书生(6217861)  11:10:54
理论上可以
负伤de骑士(21929307)  11:11:03
光标的位置呢
洋气书生(6217861)  11:11:10
主要的问题是“每次变化”的粒度和触发条件
是敲一个字母算一次变化，还是敲一个单词算一次变化，还是每次 keyup 之类时间结束后停顿一定时间算一次变化
负伤de骑士(21929307)  11:12:47
第一种思路 监听 输入框的 change 时间
第二种思路 监听 键盘安检事件

那种更靠谱
Kaid<kaid@kaid.me>  11:13:01
感觉第二种
第一种的话需要加setInterval
洋气书生(6217861)  11:14:41

然后是另一个问题：数据记录的格式
因为不可能每次记下全文，那样很浪费资源

最后是前端如何加载这些数据记录并回放

我贴的示例页面里，回放过程中一直在不断请求后台
洋气书生(6217861)  11:16:58
我先贴在 problem 里，可以随时思考
负伤de骑士(21929307)  11:16:59
如果是想要研究他的实现方式，我有个小想法
洋气书生(6217861)  11:17:10

最近我会和搜集各种新颖的教程展现方式来研究
负伤de骑士(21929307)  11:17:50
播放到一般暂停，然后用JS手动修改代码区的代码后，在继续播放
播放到一半暂停，然后用JS手动修改代码区的代码后，再继续播放
洋气书生(6217861)  11:18:23
试了，修改不了，锁死的
洋气书生(6217861)  11:19:29
代码文本区域用的 CodeMirror
回放页面把文本编辑禁掉了

我先贴在 problem 里。现在不必细想，只是调研，不会去做
负伤de骑士(21929307)  11:20:34
嗯
Kaid<kaid@kaid.me>  11:22:14
ok
ben7th commented 10 years ago

如果发现形式上新颖的教学网站或页面，补充到此楼再进一步整理

pimgeek commented 10 years ago

我补充一个【引导新手完成 github 个人主页创建过程】的 Guide 类教程形式。

http://www.thinkful.com/learn/a-guide-to-using-github-pages/

这类教程形式或许并不算新颖，但可以作为一个典型的向导式教程的范例：

1）平滑转场，令学习者情绪放松。 2）只呈现少量必要信息，避免视觉干扰。 3）尽可能避免让学习者做选择，便于把这个教程一路顺下来。 4）教程的学习目标很浅水——让全世界的人有机会（尽管及其微小）看到自己的 github 个人首页，而且完全免费——容易给学习者带来愉悦感

pimgeek commented 10 years ago

再补充一个把【太阳系主要行星的相对距离，相对大小等概念形象地表达出来】的互动型教程形式。

http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html

这类教程形式非常独特，可以作为【通过激发学习者的无聊感，达到抽象概念的强化理解】的范例。

1）平滑转场，令学习者情绪放松。 2）只呈现少量必要信息，避免视觉干扰。 3）尽可能避免让学习者做选择，便于把这个教程一路顺下来。 4）刻意在【讲解文字】中间保留大量的空白区域，激发初学者的无聊感，让他们主动期待看到一些文字——无论内容多抽象都比空白区域更舒服。 5）在页面顶部放置关键内容的一键导航，容许学习者只看关键内容，忽略大部分讲解文字。

pimgeek commented 10 years ago

部分 code.org 的一小时编程课件使用了 Blockly 编程积木的开发套件，可以用拖拽方式实现过程化编程。

经观察，这个套件非常类似于 Lambda-Snap 的组件拖拽式开发套件。我以前试用各类编程工具时，曾经试用过这个开发套件，但 code.org 实现了这种编程工具的恰当应用。

code.org 的 Blockly 这类教程不仅形式独特，而且对初学者非常友好，可以作为【针对编程新手，以游戏化方式激发好奇心和尝试欲望】的范例。

可参考 https://github.com/mindpin/problems/issues/61 查看详细的调研结果