“互联网+支教”平台的设计与实现

王志飞 梁晓琳 张宇奇

摘  要：国家一向重视教育公平，注重教育资源均衡分配的问题。国外致力于发展支教的组织和志愿者，支教活动主要开展于亚非拉等欠发达的国家。许多国际组织都会吸纳包括大学生在内的志愿者参与支教活动。大范围支教活动的有序开展，离不开支教平台的助力。为此，文章设计开发一款“互联网+支教”平台，将大学生作为支教主力军。大学生支教平台不仅为大学生提供社会实践的机会，还能够弥补城乡教育资源分配不均的劣势。

关键词：互联网+;大学生支教;平台设计

中图分类号：TP311        文献标识码：A文章编号：2096-4706（2022）03-0009-06

Design and Implementation of “Internet + Volunteer Education” Platform

WANG Zhifei， LIANG Xiaolin， ZHANG Yuqi

（Shandong Huayu University of Technology， Dezhou  253034， China）

Abstract： The state has always attached importance to education equity and the balanced distribution of education resources. Foreign countries are committed to developing education support organizations and volunteers， education support activities are mainly carried out in less developed countries such as Asia， Africa and Latin America. Many international organizations will attract volunteers， including college students， to participate in education support activities. The orderly development of large-scale education support activities is inseparable from the help of the education support platform. Therefore， this paper designs and develops an “Internet + volunteer education” platform， and takes college students as the main force of supporting teaching. The college students support teaching platform not only provides opportunities of social practice for college students， but also can make up for the disadvantage of uneven distribution of educational resources between urban and rural areas.

Keywords： Internet+; college students support teaching; platform design

0  引  言

隨着互联网技术的不断发展，新媒体的应用越来越广泛，互联网+支教具有灵活性的优点，通过引入线上支教来推动支教学质量的提高，不但给大学生的社会实践提供了新视角，更是符合新时代的支教需求。在“互联网+”背景下，计算机技术应该与支教方式高度融合，一改传统的支教模式，打破支教活动受时空限制的弊端。本文从网站建设的角度阐述基于支教平台的功能设计、交互设计、界面设计，整合优质教育资源，实现大学生高效支教，提高支教质量，弥补传统支教的不足。

1  支教现状

目前国内支教的发展情况并不理想，传统支教模式存在许多弊端。支教活动常发生在偏远地区，这些地区路途遥远、地形复杂、交通不便、自然灾害频繁等，传统方式的支教非常耗费人力财力，支教成本较高。在支教人员监管方面，许多支教组织管理松散，没有明确的规章制度去挑选和约束支教人员，导致支教队伍的流动性大、教育能力差，建立健全的管理制度迫在眉睫。在支教活动组织方面，缺乏规范性的支教活动计划，活动过程中遇到的突发问题难以及时得到妥善解决，一定程度上影响了支教效果。在支教区资源方面，由于支教区经济落后，存在电力不足等客观条件，无法使用一些现代化的教育设备如电脑、多媒体等。很多授课想法都无法实现，学生也不能更好地理解和掌握复杂的知识点，限制了知识的传播与共享。

2  “互联网+支教”平台的设计

2.1  平台简介

支教平台是一个针对大学生到偏远地区支教的平台，旨在提高支教质量，促进教育资源的合理配置。支教平台采取按需选择、就近分配的原则，平台会根据距离远近，对提交申请的大学生与学校相匹配后进行优先推送。对于路程较远而难以到达的支教区，我们采用线上授课的方式进行支教。支教平台作为连接支教大学生与支教区学校的桥梁，在平台上，大学生与学校可以直接联系。支教区的学校也可以直接筛选学生的简历，挑选优秀的学生，与学生进行直接对话。大学生通过支教平台进行信息注册登录、提交支教申请;高校审查验证申请者身份和详细信息;政府相关部门对支教大学生和支教区学校进行复查和审批，审查通过后，方可进行支教。支教平台上还设立专门的公益板块——希望小屋，可以帮助支教区的学生获取慈善赞助，为他们争取学习教材和相关资料以及优质的教学环境。85B84264-B065-4501-B6D1-16683D056D0B

2.2  平臺框架及流程设计

2.2.1  功能框架

大学生支教平台的功能包括系统相关、总览时讯、功能板块、希望小屋四个模块。在系统相关模块中，用户可选择以学校身份或学生身份登入，进行学校身份或学生身份的注册和信息录入，点击页面中的四个不同选项，可进入对应的功能模块。在总览时讯模块中，左右滑动可以查看主题，点击主题，进入对应页面，上下滑动可查看内容。在时讯资讯内容结束的位置，可左右滑动查看其他主题。在功能板块模块中，帮助用户解决相关疑问，有助于用户获得更好的使用体验，同时也能看到国内以及国际支教组织的实时资讯。在希望小屋模块中，平台计划与社会爱心人士联手，旨在给支教地区的孩子们提供帮助，铸造学子们的成长之路。大学生支教平台功能清单如图1所示。

2.2.2  界面设计

在支教平台界面色彩设计上，通过对支教服务图标的引用分析，采用以农村支教区特色为主的界面背景设计。通过对支教区特色的再创作，基于现代的审美和扁平化的设计追求，实现了现代风格的界面背景设计。将个性突出的界面背景展现给用户，是支教文化的另一种体现。界面背景设计主要使用浅色调，使得界面整体效果较清新活跃，同时搭配较深颜色的字体，增加颜色深浅对比，有利于用户在室外强光条件下的使用与阅读，也便于引起用户在色彩上的共鸣，从而提高用户的使用体验。支教平台界面设计的字体部分以黑体、宋体为主，在视觉感受上更清晰，更易于阅读，如图2、图3、图4所示。

2.2.3  首页设计

首页主要是对本平台的系统介绍和分类，包含logo、导航设计、banner设计、内容设计和底部信息版权设计。其中logo主要通过Photoshop软件完成png格式的图片，导航设计主要通过HTML的ul和li实现，并添加二级菜单，方便网站的SEO优化，另外可通过flex实现横向并排布局。导航的内容全部添加超级链接并链接到相应的网页文件，另外，为方便用户使用，我们通过使用div和submit定义创建登录和注册按钮，并通过CSS进行优化。核心代码如图5所示。

页面banner效果主要用来表达支教地区的各项活动，使支教者能够更好地了解支教地区的自然环境和区域建设。我们在主页的banner部分插入轮播效果，主要效果是底部点击切换和左右两侧点击轮换，亦可实现鼠标经过自动播放。本模块主要通过bootstrap框架来完成，可以下载bootstrap并安装相关的运行环境，通过外部调用JavaScript程序独立完成CSS部分和HTML部分，代码为：

<！--轮播 -->

<！--指示符 -->

<！--轮播图片 -->

<！--左右切换按钮 -->

85B84264-B065-4501-B6D1-16683D056D0B

頁面内容主要包含系统相关、总览时讯、功能板块、希望小屋，其中页面布局主要通过div和bootstrap框架来完成，通过CSS中的flex弹性盒子来实现模块布局。考虑到首页内容过长用户在浏览时不方便，我们通过div盒子创建快速导航栏，并通过position定位属性将其固定在右下方，当用户想要浏览其中的一个内容时，可以通过快速导航栏快速定位到想要浏览的地方。为了美化页面，我们在红玫瑰计划中为图片添加动画效果，通过改变div的位置、overflow：hidden溢出隐藏和a：hover相互配合，实现当鼠标经过时有文字提示，其中HTML部分代码和CSS部分代码为：

HTML部分代码

满天星计划

为缓解中西部地区师资力量匮乏，促进乡村教育发展，中国·支教联盟于2006年通过有计划地向社会招募志愿者，审核和培训后派遣前往贵州、云南等地区进行为期一学期或更长时间的支教援助。

< a href=  “#”>我要支教

贵州从江县山岗小学急需补招1名支教老师

我们希望每位申请者都能够想清楚自己为什么要去支教，去支教的目的是什么？人生不仅仅有诗和远方，还有我们的责任和担当。

< a href=“#”>我要支教

招募2022年春季长期支教志愿者

你要是真的热爱这份事业，你就会很自觉地去接受这种同化。你要是不热爱这份事业，你就永远也感受不到，这个集体的魅力与伟大。

< a href=“#”>我要支教

CSS部分代码

.shouye{

width： 1000px;

height： 300px;

display： flex;

background-color： #FFFFFF;

margin： 20px auto;

border： 1px solid #ccc;

box-shadow： 2px 2px 3px 2px #eee;

}

.shouyeimg{

width： 500px;

height： 300px;

}

.wz a{

display： inline-block;

margin： 20px 0 0 50px;

text-decoration： none;

color： #000000;

background-color： #70d071;

border： 1px solid #56ad00;

border-radius： 5px;

padding： 10px 15px;

}

.wz a：hover {

background-color： #61b461;

border-radius：5px;

color： white;

}

.a{

width： 1000px;

margin： auto;

display： flex;

flex-wrap： wrap;

justify-content： space-between;

}

.a .b{

width： 320px;

height： 230px;

border： 2px solid #bdbdbd;85B84264-B065-4501-B6D1-16683D056D0B

overflow： hidden;

margin-top： 10px;

position： relative;

}

.a .b p{

width： 320px;

height： 230px;

position： absolute;

top： 230px;

left： 0;

right： 0;

margin： auto;

background-color： rgba（255，255，255，0.5）;

text-align： center;;

line-height： 20px;

transition： 1s;

}

.a .b：hover p{

top： 150px;

}

2.2.4  用户反馈页面设计

用户反馈界面主要展现用户留言和反馈意见，通过创建form表单实现，主要由四个部分组成，分别是姓名、邮箱、建议和意见以及发送按钮，用户可以通过输入姓名、邮箱，输入建议和意见，最后点击发送按钮提交意见。为美观起见，我们对发送按钮进行美化，利用a：hover属性，实现鼠标经过改变背景和文字颜色，网页代码如图6所示。

2.2.5  登录和注册页面设计

为了提升用户的体验感，我们在网页中添加了登录和注册按钮，以注册按钮为例，当用户点击注册按钮时，网页会跳转到注册页面。为实现输入功能，我们通过使用form表单来实现，姓名使用input，type类型输入“text”，使用select下拉列表让用户选择性别，证件号同样使用select下拉列表，手机号、密码和验证码使用input，type类型輸入“text”，最后使用css样式进行美化，如图7所示。

2.2.6  数据库设计

根据需要，我们要实现支教网页中登录和注册的功能，现在需要先建立shopping数据库，在数据库中创建表users，如图8所示。

利用jdbc实现对数据库的连接，创建DBHelper.java实现连接数据库功能的类，部分代码如图9所示。

按照网页界面的内容创建UserDao类，实现查询数据库中的数据以及向数据库中插入新的数据，部分代码如图10所示。

对应的创建serlet Login.java，实现对提交的表单进行处理，部分代码如图11所示。

3  测试

3.1 功能测试

输入检测内容为：

（1）什么都不输入，点击提交按钮，查看提示信息。

（2）输入错误的用户名或密码，点击提交按钮，查看提示信息。

（3）登陆成功后能否跳到正确的页面。

（4）密码是否加密显示。

（5）检查验证码文字是否合理，刷新或换一个按钮是否正常。

（6）检查链接是否正确，链接的网页能否打开。

（7）检查表单的功能能否正常使用，填写的信息是否正确。

3.2 界面测试

div和文字检测内容为：

（1）网页整体布局是否合理，div排版是否合理。

（2）网页设计风格是否统一。

（3）网页中的文字是否简洁易懂，是否有错别字。

3.3 性能测试

连接速度检测内容为：

（1）打开页面，需要几秒。

（2）输入正确的账号和密码，从成功登录到跳转至新页面，时间是否合理。

3.4 兼容性测试

在不同设备上的检测内容为：

（1）在主流浏览器下是否显示正常以及功能是否正常。

（2）不同平台是否可以正常工作。

（3）移动设备上是否可以正常工作。

（4）在不同分辨率下的显示是否正常。

4  结  论

相较于传统的支教模式，基于支教平台的支教模式打破了时空限制，同时也扭转了支教地区由于偏远落后等原因而造成的教育资源落后的局面。支教平台能够做到借助互联网连接各个志愿者，打造专业的教育团队，这一点是传统支教模式难以企及的。可以说，支教平台的支教模式用最低的成本实现了高质量的教育。利用支教平台支教的新模式完全弥补了传统支教模式的缺陷，能够吸引更多有才华、有能力的志愿者投入到我国的支教事业中，用自己的所学为我国的支教事业添砖加瓦。然而，支教平台支教并不是实地支教的代替品，两者各有优劣。新生的支教平台支教模式可以与短期支教相结合，让乡村的孩子不仅可以在长期陪伴下全面成长，还能在每一次相聚时感受到现实中的温暖。无论从近前还是从长远来看，互联网+支教平台的发展模式大有裨益。

参考文献：

[1] 马明镜，周柳之，马永春.新时代背景下大学生“互联网+支教”模式的探索 [J].智库时代，2020（4）：205-206.

[2] 吕衍祥，徐世雨.“互联网+”视域下大学生支教新模式的探索 [J].新西部，2018（35）：109-110.

[3] 王瑞.大学生支教的问题与对策——以北京市打工子弟学校为例 [D].北京：中央民族大学，2009.

[4] 卢宁，吴松，李晗杰.“互联网+”视域下大贫困地区义务支教的思考 [J].煤炭高等教育，2016（2）：114—116.

[5] 卢宁，“互联网+”大贫困地区儿童支教活动教育功能开发 [J].中国成人教育，2017（3）：77-79.

作者简介：王志飞（2000.05—），男，满族，辽宁大连人，本科在读，研究方向：数字媒体技术;梁晓琳（1990.08—），女，汉族，山东德州人，讲师，硕士研究生，研究方向：艺术设计;张宇奇（2000.10—），男，汉族，安徽阜阳人，本科在读，研究方向：数字媒体技术。85B84264-B065-4501-B6D1-16683D056D0B