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

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

Opensource.com

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

他撰写了两本书,《Learn SVG Interactively》和《STEAM 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 附加组件并创建了一些,包括在工作期间和早期退休期间。我上传了一些附加组件,这是我的第一个开源贡献。

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

DW:是什么促使您向学校的孩子们提供您的编程经验?

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

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

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

DW:SVG 图形的哪些方面引起了您的注意?

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

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

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

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

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

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

JN:我尝试在我的网站 STEAMcoded.org 上展示 STEM 和 STEAM 各个学科领域中 SVG 的示例。有很多方法可以将艺术与 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.