html5图像编码游戏开题报告,基于HTML5的英语学习APP开题报告

项目背景

社会生活的信息化和经济的全球化，使英语的重要性日益突出。英语作为最重要的信息载体之一，已成为人类生活各个领域中使用最广泛的语言。许多国家在基础教育发展战略中，都把英语教育作为公民素质教育的重要组成部分，并将其摆在突出的地位。随着中国逐渐走进国际化，使用英语的范围也越来越广，现在日常的生活中许多地方都用得到英语。而对于学习英语的基础，背单词的方式与方法也在不断的更新和进步。基于移动端的英语移动学习APP能为学生提供一个全新的学习机会,它从某种程度上能够改善学生学习英语的效果。此外,在英语听、说、读、写技能中,阅读能力在语言的学习和使用过程中也是极为重要的[1]。

1.2 研究目的

英语作为国际通用语:其重要地位越来越得到大家的共识。英语作为一门语言技能,通过大量的训练和练习任何人都是可以掌握的。一般地说,英语学习的原则是听、说领先,读、写跟上。每天给予一定时间的练习将会对你提高阅读速度有很大的好处[2]。因此我们需要大量的阅读来提升自己的英语水平，通过阅读我们可以认识许多的生词，可以学习更多的单词，以此积累单词量。所以这个软件主要是通过阅读大量的英语文章来帮助同学们记忆单词，巩固单词。软件提供了英语文章的阅读,单词记忆，常用的英语谚语，并且还有英文的发音，还提供了翻译功能所以可以更加好的帮助同学学习积累单词和练习自己的英语发音，一边阅读英语文章一边学习单词。

1.3 文献综述

单词教学是英语教学的基础。单词学习是每个英语学习者必经之路,并且单词量的大小决定英语级别。单词学习对英语学习尤为重要。但有很多学生背单词不得法[3]。而通过英语阅读来学习英语单词是一个非常好的方法，但是如果出门就背一本书实在是很累，英语学习APP在便捷性、独特性的优势也使它逐渐成为学习英语不可或缺的重要工具。学习者把这些软件下载到手机上或者平板上就可以随时随地的进行学习[4]。

2 研究的主要内容及预期目标

2.1 主要内容

本系统主要采用前后端分离的模式进行开发，数据库采用MYSQL进行数据的存储。主要实现功能有每日一句英语学习；英语文章阅读学习；生词本；词语，短句，句子翻译等功能。

(1)每日一句英语学习：每天更新一句英语句子，比较有趣的句子可以更好的提高学习英语的兴趣，结合中英文可以使同学更加直观的学习英语单词，还可以积累写作时的句子。

(2)英语文章阅读：通过阅读文章可以检测自己有没有熟悉新单词，也可以认识一些新单词，可以将不认识的新单词添加到生词本中，在之后可以在生词本中熟悉单词，记忆单词在之后的写作可以更加的得心应手。

(3)生词本：可以添加不认识的单词，用户可以查询单词信息，点击发音，并且可以查看该单词的详细注释及中文翻译说明等，在熟悉单词之后可以将他从生词本中移除。

(4)翻译：随时翻译不认识的单词，句子，方便了日常的学习。

2.2 预期目标

本系统是基于HTML5开发的英语学习软件，预期目标如下：

(1)用户打开软件会在界面上显示一句英文的句子(一些谚语或者俗语)并且配有中文帮助同学认识。

(2)点击英语阅读会出现推送的英语文章阅读。

(3)翻译板块具有中英文互译功能。

(4)用户可以将在阅读中不认识的英语单词添加到此版块中，用户可以查询单词信息，点击发音，并且可以查看该单词的详细注释及中文翻译说明等。

系统总体设计

本项目采用前后端分离的模式开发，前端通过接口和后端实现数据交互。实现这4个模块的功能，前端需要采用HTML+CSS3实现基础的页面布局，CSS3可为HTML5编写的网页提供多姿多彩的样式，使布局更合理美观，为实现更好的交互式网页提供有力的支持[5]。采用JavaScript基于DOM的编程技术，借助于事件对象及其属性，设置页面对象的属性值，实现在页面上拖拽相应的对象，以完成页面设计的特殊需求功能[6]。

后端采用XAMPP作为集成开发环境，用服务端语言PHP访问MYSQL数据库，并拿到实时数据返给客户端，客户端通过接口交互完成对数据的读取和提交。此项目的UI框架采用MUI,MUI一种基于纯Web技术来进行移动应用开发的新型开发模式,基于这样的一种开发模式,通过MUI和HTML5+的技术实现一个跨平台的移动端[7]。在APP中需要实现原生功能的部分：如沉浸式导航栏等，需要调用HTML5+原生API来实现，页面中主要功能的逻辑采用JavaScript来编写。本项目中WebView作为用户界面层，以JavaScript作为基本逻辑，以及和中间件通讯，再由中间件访问底层API的方式，进行应用开发。所有基础组件和业务组件完成开发后，采用HBuilder提交云端实现打包功能。完成打包后可实现跨平台，即一套代码编写，实现多个平台的使用。

研究进度安排

(1)2019.10-2019.12：查阅相关文献和技术文档，明确需求与技术要求。

(2)2020.03-2020.04：撰写开题报告，并准备开题报告答辩。

(3)2020.04-2020.05：数据库设计。

(4)2020.05-2020.06：页面模板设计。

(5)2020.06-2020.07：系统框构的搭建。

(6)2020.07-2020.09：程序设计。

(7)2020.09-2020.10：系统测试。

(8)2020.11-2019.02：撰写毕业论文并准备毕业论文答辩。

参考文献：

[1] 马俊华. 基于混合式学习的大学英语阅读移动学习APP的设计与开发[D].上海外国语大学,2019.

[2] 卞仕宏.英语阅读能力的培养[J].小学生(教学实践),2012(02):62-63.

[3] 王爱丽.浅议英语单词的学习方法[J].校园英语,2019(03):166.

[4] 于圣彬.基于HTML5技术下移动Web前端设计与开发的研究[J].中国新通信,2020,20(04):47.

[5] 辛红.基于HTML5+CSS3交互式网页布局的研究[J].考试周刊,2019(A3):195.

[6] 韩德.利用JavaScript实现并页面元素的拖拽[J].电脑编程技巧与维护,2012(20):63-64+80.

[7] 罗宏俊,冯瑞.基于Web技术进行移动应用开发和中间件的研究[J].计算机系统应用,2019,26(11):19-27.

[8] 李博文. 基于移动终端的汉语、英语学习软件对比及其运用研究[D].广东外语外贸大学,2019.

[9] 戴宏明.PHP技术从入门到精通八段锦[J].软件,2016,37(05):49-53.

[10]李正,吴敬征,李明树.API使用的关键问题研究[J/OL].软件学报:1-24[2020-04-14].

[11] Mike Shema. HTML5[M].Elsevier Inc.:2012-06-15.

[12] Kateryna Synytsya,Natalya Prokofyeva,Aleksejs Grocevs,Vladimirs Tomko. HTML5 in Development of Assessment Tasks for e-Learning[J]. Applied Computer Systems,2015,16(1).