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

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

Opensource.com

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

他撰写了两本书,《交互式学习 SVG》和《STEAM 编码弦线艺术》,解释了学习编程的学生如何仅使用文本编辑器创建漂亮的 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,我也会喜欢艺术。数学对许多女孩来说带有负面含义,但大多数女孩喜欢艺术。我和我的孙女创作了一本电子书《我爱涂鸦》,这本书是基于艺术中的数学和数学中的艺术。到目前为止,它是我们最受欢迎的 SVG 电子书,并且具有全球吸引力。

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

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

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

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

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

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

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

DW:您的免费电子书《交互式学习 SVG》对您的工作的整体成功有多重要?

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 电子书是免费的,我的妻子芭芭拉撰写的屡获殊荣的儿童电子书也是免费的。它们是免费的,可在 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/) 中的“生物”表现出与机械机器人相似但更灵活的行为。

感谢这篇引人入胜的文章!:)

知识共享许可协议本作品根据知识共享署名-相同方式共享 4.0 国际许可协议获得许可。
© . All rights reserved.