SVG 与儿童编程教学有何关系?

一位工程师将他的退休岁月投入到一项教育计划中,通过艺术向孩子们教授编程和数学。
388 位读者喜欢这篇文章。
How to do open research: 5 basic principles

Opensource.com

Jay Nick 是一位退休的电气工程师,他在当地学校做义工,通过艺术这种创造性的方式向学生们介绍数学和编程。反思自己的孩子在大学编程课上遇到的挫折,他决定利用自己在可缩放矢量图形 (SVG) 方面的经验,创造一种将数学和艺术原理相结合的编程方法。

他撰写了两本书,Learn SVG InteractivelySTEAM Coded String Art,解释了学习编程的学生如何仅使用文本编辑器创建漂亮的 SVG 图像。他的自出版书籍是免费的,可在 Apple iTunes 以及他妻子的 网站 上找到。Jay 也是 公共领域 SVG 剪贴画 的定期贡献者。

学习抽象的数学概念对很多人来说可能很困难。在这次采访中,Jay 解释了他如何将自己的 SVG 技能转化为当今数学学生的强大教学工具。在这个过程中,这些年轻人了解了开源原则、HTML 编码和 SVG。

Don Watkins:你的背景是什么?

Jay Nick:我是威斯康星大学麦迪逊分校的毕业生('75 BS-ECE)。我在一家电力和天然气公司工作了 31 年,负责用于监控和控制电力和天然气的生产、输送和分配的硬件和软件。

除了大学里的一些 Fortran 编程外,我的第一次编程经验是在 70 年代后期,当时我为变电站小组的微处理器控制器编写汇编语言。80 年代初,我调到 24/7 能源控制中心,在那里我在冗余的“小型计算机”系统上使用 Fortran 和汇编语言进行编程。

在 80 年代末到 90 年代初,作为一个小团队的成员,我们将小型计算机系统迁移到微型计算机(PC)网络。PC 使用 C 编程语言进行编程。

在 90 年代后期,随着公用事业解除管制迫在眉睫,我在我们不受监管的初创公司工作,在那里浏览器是操作员界面。最初,动态 HTML 使用数据采集值更新表格。

在 2000 年代初期,我引入了可缩放矢量图形 (SVG),用于显示发电厂和变电站的单线图。Javascript 检索 XML 数据并更新图表上的值和设备状态。这为操作创建了一个经济高效的人机界面 (HMI)。

DW:你是如何开始接触开源编程的?

JN:在我的职业生涯后期,我加入了一个应用技术小组,我们在那里寻找可以应用于业务的新兴技术。作为 SVG 的坚定支持者,我担心这项技术的未来,因为微软及其占主导地位的浏览器不支持万维网联盟 (W3C) 标准。我欢迎 Firefox 及其原生 SVG 支持。我开始尝试 Firefox 附加组件,并创建了几个,包括在工作期间和退休早期。我上传了一些附加组件,这是我的第一个开源贡献。

人们通过阅读和维护他人的代码来学习编程。Web 提供了巨大的学习机会,因为所有浏览器都支持查看 HTML 页面或 SVG 图形的源代码。

DW:是什么促使你将你的编程经验传授给学校的孩子们?

JN:我的孩子们第一次编程是在大学里。他们讨厌它。与其他课程相比,这门课程需要花费过多的时间才能获得学分。我交谈过的其他学生也有同感。部分问题是他们没有接触到如何去做。

当“学习编程”运动开始时,我听了所有技术 CEO 谈论他们第一次学习编程时有多么有趣。他们继续下去是因为它很有趣。我的经历也是如此。我立刻想到了 SVG 以及它如何允许创造力和乐趣。我决定在我的孙子孙女身上试一试,并向学校提供了我的服务。

最近,我有机会与两名四年级学生一起工作;他们的老师认为他们需要挑战。那时我开始在我的网站上创建 SVG 课程计划。我的大多数孙子孙女都刚到可以从我所做的工作中受益的年龄。

DW:SVG 图形的哪些方面吸引了你的注意?

JN:我在 2001 年努力制作电子书时发现了 SVG。由于电子书技术不是主流,我想在 Web 上显示这本书。当时,市场上有许多不同分辨率的显示器,800x600、1024x768 等。问题是图像中的文本在不同的分辨率下会失真并变得无法阅读。为了寻找解决方案,我发现了 SVG。因为它是矢量图形,所以没有失真。文本在任何分辨率下看起来都一样。但是,SVG 在工作中的应用才真正让我兴奋。从那时起,我就一直在使用它。

DW:为什么艺术是教授编程和数学的好媒介?

JN:小时候,我不喜欢艺术,因为我的画在我看来从来都不好看。我喜欢数学,如果当时有计算机和 SVG,我也会喜欢艺术。数学对许多女孩来说带有负面含义,但大多数女孩都喜欢艺术。我和我的孙女创作了一本电子书,I Love to Doodle,这本书是基于艺术中的数学和数学中的艺术。这是我们迄今为止最受欢迎的 SVG 电子书,并在全球范围内具有吸引力。

SVG 结合了数学和艺术,对男孩和女孩都有吸引力。它允许创造力、着色和乐趣。当他们坐标出错并且像眼睛这样的物体出现在错误的位置时,他们会笑。他们为自己的作品感到自豪,并想打印出来给爸爸妈妈看。看到这一点真是太令人欣慰了。

我们必须小心,确保编程不会像数学那样摆脱不掉负面含义。这很容易发生。

DW:在 STEM 计划中加入艺术有哪些收获?

JN:我尝试在我的网站 STEAMcoded.org 上展示 SVG 在 STEM 和 STEAM 各个学科领域的示例。有很多方法可以将艺术与 STEM 联系起来。我一直在寻找更好的方法来证明这一点。

SVG 内置了对 SMIL 动画的支持,学生们很喜欢它。我认为 SVG 中对象的动画可以提供类似于正在使用的许多 STEM 机器人的体验。有时动画只是被认为是可爱的。在工作中,我为发电机符号制作了动画,使其在在线时旋转,离线时停止。我原以为这只是很可爱,但操作员非常喜欢它,因为他们可以一目了然地知道是否有问题。

我问了两位四年级学生,他们更喜欢使用 SVG 还是学校的机器人。两者都更喜欢 SVG,因为他们可以做更多的事情。他们认为机器人很有趣,但他们可以用它们做的事情更少。

使用 SVG 作为 HMI 并将数据链接到看起来像实际机械的对象是 SVG 在 STEM 领域的绝佳应用。学校可以从 HVAC 系统、电表、太阳能系统等获取实时数据,并创建自己的图形,这些图形会随着数据更新,然后将它们放在他们的内联网或互联网上。

DW:你的免费电子书 Learn SVG Interactively 对你的工作的整体成功有多重要?

JN:嗯,电子书的内容是我开始与学校合作的原因。这本书是我在 2003 年所做工作的结果,当时我向八年级代数班展示了如何使用 SVG。在两个课时内,他们创作了我在书中展示的艺术作品。我使用网格概念来帮助学生了解如何定位他们的对象。我在我的所有 SVG 课程中都使用了相同的概念。

今天,一些学生使用电子书作为他们正在创建内容的语法参考。这本电子书是免费的,但下载量不大。它在 Apple 的 iBookstore 中,因为 Apple 允许出版商免费提供这本书。它也可以在我的网站上下载。

DW:你的其他电子书如何帮助你传播信息?

JN:这有点帮助。一个学区将电子书放在了学校的所有 iPad 上。在很大程度上,我认为它们看起来太技术性了。我认为许多老师看到数学和外文符号就敬而远之。他们不想做数学,也不想尝试学习 SVG。数学老师根本没有时间完成他们所有的教学要求。

我经常收到“我不会输入那么多”的反应。但是,一旦我向他们展示大部分文本都是复制、粘贴和更改坐标,他们就会惊讶于它有多么容易。

DW:你是用开源工具创作这些书的吗?

JN:不,电子书技术都是 Web 技术,我都是手工编码的。事实上,负责 ePUB 标准的 国际数字出版论坛 刚刚成为 万维网联盟 (W3C) 的一部分。

简单来说,电子书的每一章都是网页。包含几个额外的文件来告诉电子阅读器包含哪些文件以及显示它们的顺序。然后将所有文件压缩在一起,并将扩展名更改为 .epub。这很简单,我认为与老师一起创建电子书会很棒,但这将是一个耗时的项目。

不过,我确实使用了 Google 提供的名为 ePubCheck 的开源工具来验证 .epub 文件并纠正任何错误。

DW:对于邀请你的学校和学生来说,有哪些重要的收获?

JN:我向他们展示的是他们可以在家免费做的事情。每台计算机都已经拥有您需要的一切:一个简单的文本编辑器和一个浏览器。SVG 是一种 Web 语言,并且会长期存在。大多数人不知道 W3C。如果他们听说过 SVG,他们只会认为它是另一种图像文件格式。

我很高兴地说,一些老师正在学习 SVG 并教授它。他们只有在高级学生需要一些帮助时才会联系我,我很乐意这样做。

DW:你的学生有没有在 OpenClipart.org 上分享他们的 SVG 作品?

JN:没有,还没有。我还没有推动这个想法,但我喜欢它。学校的许可有时会阻碍此类事情。事实上,许多学校屏蔽了所有剪贴画网站,包括 OpenClipart.org。

DW:你还有什么想分享的吗?

JN:我认为我教给学生的最重要的事情是如何排除语法错误,并逐步进行(编辑一行,保存,刷新浏览器,并纠正任何错误)。我认为仅这一点就真的可以帮助我的孩子们上他们的第一堂编程课。

此外,许多学校都在使用 Chromebook 和 Google Docs,它们在保存时会嵌入额外的元数据,因此无法正确显示来自 Google Drive 的 SVG 文件;必须先下载它。一位老师告诉我,他们不教学生文件管理的基础知识,所以我需要花费额外的时间来确保他们知道文件保存在哪里以及如何在浏览器中打开它。

而且我正在开发一些使用代码生成代码的 SVG 工具。它们对于没有接触过三角学的年幼学生很有用。它允许他们创建星星、多边形和图案。这里有一些:steamcoded.org/StarMaker.svg (星形制作器用于美国国旗课程)和 http://steamcoded.org/PolyskelionMaker.svg。[您可以] 很快在我的网站上找到[更多]链接;图案制作器即将完成,但尚未在网站上。

还有一件事。我的 SVG 电子书是免费的,我的妻子 Barbara 撰写的屡获殊荣的儿童电子书也是免费的。它们是免费的,可在 Apple 的 iBookstore 和她的 网站 上找到。

标签
User profile image.
教育家、企业家、开源倡导者、终身学习者、Python 教师。教育心理学硕士,教育领导学硕士,Linux 系统管理员。

6 条评论

这听起来很棒。教授 SVG 的想法我从未想过,但它与教授 HTML 并没有什么不同(但它具有教授 XML 的好处,而且最终看起来很漂亮)。好主意。我会看看电子书!

我也是这么想的。我不知道你可以编写 SVG 代码。他的工作令人惊叹,并证明有很多方法可以教授编码和编程。我喜欢用艺术来教数学。

回复 ,作者是 sethkenlon

我在 Don Lancaster (www.tinaja.com) 的文章的帮助下自学了手工编码 PostScript,并将其用于为电子产品和 pdf 文件创建前面板艺术作品。有一些免费工具可以用于处理 PostScript。除了我下载的一些汽车手册并且很难在 Windows 中显示它们之外,我没有太多接触 SVG。现在我使用 Linux,并且有兴趣了解你的过程。

我还自学了使用 PostScript 引用“Hands On Postscript”来“编写”自定义表单。我会使用记事本编写“代码”,然后将其发送到 PostScript 打印机以获取表单。

我记得它是一种后缀(类似 FORTH)语法,我觉得很有趣,我用它来创建“待办事项”列表和空白日历页。

你现在让我对查看 .SVG 文件的“内部格式”产生了兴趣……更多“玩耍”即将到来……;-)

很棒的文章!:)

我特别喜欢关于虚拟机器人的观点

“SVG 内置了对 SMIL 动画的支持,学生们很喜欢它。我认为 SVG 中对象的动画可以提供类似于正在使用的许多 STEM 机器人的体验。”

顺便说一句,根据我的经验,SMIL 正在被淘汰,并被其他 SVG 动画方法所取代。我个人使用 JavaScript,学生也可以仅使用文本编辑器和 Web 浏览器学习编程。我可以证实 Jay 的观点,因为我们在 LifeFLOW (http://life.worldsowisdom.com/flow/) 中的“生物”与机械机器人相比,表现出相似但更灵活的行为。

谢谢你的精彩文章!:)

Creative Commons License本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
© . All rights reserved.