百度脑图二次开发及支持英语词汇教学内容可视化的探究

周敏 周宗萍

摘要：百度脑图是一款免费、部分开源的Web版思维导图软件。本研究的英语词汇教学内容可视化是指借助表格、思维导图，将一些在内容和结构上存在一定关系的词汇以可视化的方式呈现出来。基于百度脑图的开源代码，在英语词汇数据库的基础上，探索设计并初步实现了词汇的模糊检索、一键导入百度脑图生成思维导图的软件功能，提供一个集词汇资料便捷查询和生成可视化学习内容于一体的词汇学习工具，以期提高学习者学习英语词汇的效率，减轻英语教师的工作负担。

关键词：百度脑图；开源软件；教育软件开发；英语词汇；可视化

中图分类号：G434 文献标识码：A 论文编号：1674-2117（2018）10-0065-04

绪论

1.信息技术支持教学

当今世界，计算机软硬件的迭代速度高于许多行业和领域，信息技术在引领学习、工作、生活等方面创新和变革的效果十分明显。借助信息技术来支持教、学、研，可以为师生创设数字化的学习资源、工具和环境，并提供跨越时间和空间的服务。在英语词汇教学中恰当使用软件工具、多媒体设备，将有助于教学内容的呈现、教学活动的开展、教学成果的评价。

2.知识可视化理论

知识可视化的实质是将内隐知识或隐性知识外显化，将外显知识生动化。[1]将学习内容可视化，可以帮助教师事半功倍地完成教学任务，可以降低学生的认知负荷，聚焦学生注意力，有利于学生联系新旧知识进而有效记忆。[2]知识可视化借助信息技术工具支持，可以将图形图像、视音频、动画等丰富多彩的元素整合在一起，而思维导图是知识可视化的典型工具，可以条理化地梳理知识，可视化地组织知识。

3.文档的线上管理

百度云盘和百度脑图都是百度公司提供的在线应用软件，不仅具有线上的文档支持不限时间地点、多终端调阅、分享等功能，而且还有海量存储空间、防误删备份、数据安全等保障，给我们的学习和工作带来了极大的便利。将百度脑图运用到英语词汇教学中，可以方便地制作思维导图，通过链接可以分享脑图文档给其他学习者，并能够在不同的计算机上实现脑图资料线上同步管理等。

百度脑图基本介绍

1.软件框架和开发准备

“百度腦图”又名“Kityminder”，是百度公司2015年推出的非营利性产品，并将底层核心代码开源，由百度前端研发团队[3]（FEX-team，Frontend X）进行开发、维护和迭代，它具有界面美观、功能丰富、兼容性好、操作便捷等优点，是一款优秀的思维导图制作软件。

百度脑图的实现代码分为客户端和服务器端两大类，客户端运行在浏览器上，主要是HTML、CSS、JavaScript代码，服务器端借助PHP编程语言响应客户端请求，实现对数据库的增、删、改、查。Kityminder-core基于矢量图形库kity，是百度脑图核心部分，包含了脑图数据的可视化展现、简单编辑功能等所有脑图底层的支持。外层Kityminder-editor是百度脑图的编辑器，包含UI操作界面和热盒hotbox方便用户输入。由于再外一层的文档管理、用户认证、分享、历史版本等功能需要和服务器端交互，所以百度脑图开源的代码只包括Kityminder-editor及其底层代码（如图1）。其依赖的十多种JavaScript类库和框架都是开源的，在代码托管网站Github上全部开放下载，供交流学习。

基于百度脑图的二次开发，除了掌握Web基础知识外，还需要了解JQuery库、AngularJS和Bootstrap框架，以及任何一种服务器端动态网站开发技术，如JSP、ASP.NET等。在搭建了百度脑图基本的编辑功能后，还需要实现脑图文档的网络同步、层级文件夹式管理、导入导出、分享、访问认证等功能。有了上面的铺垫，在进行词汇可视化部分的功能设计时，就可以基于百度脑图的开源框架，二次按需定制化开发，从而极大地丰富软件的功能特性，提升工具的层次水平。

2.百度脑图功能介绍

内容创作。脑图节点支持多种类型的内容和操作。从内容上看，可以是纯文本、超链接、图像、标签、图标、源码备注等，支持多种不同类型的文档导入批量生成内容，也可以导出思维导图；从操作上看，可以插入、删除、排序、归纳、复制、剪切、粘贴、撤销和重做等。

外观设置。从样式上看，支持6种逻辑结构样式图切换、“整理布局”按钮一键恢复默认排版、20种主题切换。用户可以从字形（加粗、斜体）、字体、字号、文字颜色、背景颜色等方面对文字进行编辑，可以拷贝和粘贴节点的样式，类似于微软Office办公软件的“样式刷”功能。

文档管理。主体功能是文档和文件夹的新增、复制、删除、重命名、移动位置、层级列表查看、排序、批量操作等。“分享文档”模块可以设置文档分享的URL链接、时间和密码。“回收站”模块可以恢复删除的文档，或彻底删除。百度脑图会自动记录文档的编辑历史，并还原历史版本。

3.应用优势分析

无需安装。这是基于B/S版应用软件的共同特性，在浏览器中打开网页即可使用，通过网络连接服务器进行数据交换。

交互功能强大。百度脑图不仅支持丰富的内容呈现，还可以进行优秀的界面交互设计，典型的功能有整体和局部节点的折叠、展开、拖放、选择，页面导航，键盘快捷键等。

同步云端，线上管理。浏览器中编辑的文档会自动保存，并同步到服务器。在相应的文档管理列表页面，可以进行查阅内容、二次编辑、分享他人等便捷的线上管理。

除了优点，百度脑图当然也存在不尽如人意的地方，如脑图类型不够丰富、存在由于网络不稳定而导致的报错提示、暂未实现移动端适配、无法导出支持离线可交互操作的HTML文档等。

英语词汇教学内容可视化

1.需求与现状分析

词汇是学习和掌握一门语言的前提和基础，国内教育中，英语词汇的学习也一直受到师生的关注。但英语词汇的学习大多属于死记硬背，单调、枯燥，记忆效果不理想。[4]而从词汇的学习和记忆来看，可视化技术手段可以将知识形象、直观地表征出来，能很好地呈现概念之间的关系，促进对知识的理解与应用创新。[5]一些典型的可视化技术，如表格、思维导图、图示化图（如“事物构成的指示图”“物体三维模型图”）、地图、网图、流程图等，可以通过颜色、线条、方块、二维平面、三维空间、透视、交互操作等丰富的可视化元素来表现学习内容。因此，教师充分发挥计算机在艺术设计、内容创作、网络互联等方面的特性和优势，将极大地激发学生英语词汇学习在图形、图像、声音、视频、软件程序等技术手段支持下的潜力。

2.基于百度脑图的英语词汇可视化（如下表）

从词汇内容分。词汇语义学强调将词汇的语音、语法和释义符号三者有机整合，形成“语义场”，从而帮助理解和记忆。[6]如表示温度从热到冷变化的一组词scorching、hot、warm、tepid、lukewarm、cool、cold、freezing；从属于fruits的apple、pear、banana等，还有从内容上有相关关系的词组搭配、同义词、反义词等。

从词汇结构分。按构词规律，英语词汇有前缀、后缀、词根等要素。[7]前缀是有共同的前面部分，可以表示有正负（或增减）、尺寸、位置、时间和次序等一类释义的词汇，如表示“位置关系”的inter-、trans-、ex-、sub-、super-、infra-等。后缀是有共同的后面部分，单词的后缀会决定词性，如形容词常见的后缀有-ful、-able等，名词常见的后缀有-ment、-ship等。词根是英语单词构词法的核心，会决定单词的意思，如pel、puls=drive、push，表示“驱动、推”，expel表示开除、驱逐（ex出+pel推→推出→开除），compel表示强迫（com共同+pel推→一起推→強迫）等。[8]

在英语词汇的教与学中，可以将具有上述规律的一组词通过思维导图等可视化形式呈现在一起，进行比对、归纳，从而帮助学生提升词汇量，提高学习效率（如图2）。

当然思维导图只是可视化的一个典型工具，不能呈现手绘作品的细腻质感，也不能像视频和动画一样按时间序列来动态、三维地表现内容。在借助信息技术手段的同时，还要结合实际的需求，发挥人的主观能动性，这样才能物尽所用，创造最大的价值。

小结

本研究涉及信息技术和英语两大学科，基于百度脑图软件的二次开发，以英语词汇的可视化为切入点，分析探讨了英语词汇借助百度脑图实现可视化的场景和案例，初步设计开发了词汇检索和生成思维导图的软件原型。目前暂未进行实证研究，后续在不同学龄段的词汇可视化，以及英语的语法、阅读、写作，甚至其他语言学科的内容可视化等方面，都可以开展跨学科的互助合作和深入研究。

参考文献：

[1]王朝云，刘玉龙.知识可视化的理论与应用[J].现代教育技术，2007，17（6）：18-20.

[2][8]何方平.思维导图在高中英语教学中的应用研究[D].芜湖：安徽师范大学，2013.

[3]Github.fex-team[EB/OL].https：//github.com/fex-team/naotu.baidu.com.

[4]吴玉婷.运用心智图促进小学高年级学生英语单词记忆[D].上海：华东师范大学，2011.

[5]罗冬华.利用知识可视化法辅助小学英语词汇教学[J].小学教学参考，2014（33）：44.

[6]李宗宏.词汇语义学和第二语言词汇习得的图式化研究[J].河西学院学报，2007，23（3）：107-113.

[7]周敏.基于SQL模糊匹配技术的英语词汇学习小工具设计研究[J].中国信息技术教育，2018（1）：73-76.

作者简介：周敏（1993.10—），教育技术专业在读研究生，软件设计师，主要研究信息技术支持教学、数据统计分析等；周宗萍（1993.10—），教育技术专业在读硕士，主要研究信息技术支持教学、STEAM教育等。