基于html5的响应式微课平台分析与设计

论文总字数：15917字

摘 要

自“微博、微信、微电影、微店……”诞生以来，人们已经进入了微时代，同时微课也应运而生。微课是一种新型的教育方式，时长通常在5～10分钟，有明确的教学主题，内容简明扼要，集中说明一个知识点或核心内容，是展现形式多样化的小课程。响应式设计能够根据用户行为以及设备环境进行响应和调整，为用户提供良好的显示界面，为兼顾不同是终端设备，满足移动设备用户需求。HTML5在现有的各种平台都能适用，还能够提供多种交互技术，在开发网页具有较强的互动性，用户在学习时能有较好的学习体验，因此基于HTML5的响应式微课也是大势所趋。

本文主要研究基于html5的响应式微课平台软件设计。指出基于html5的学习模式具有广阔的发展前景，设计了一个集师生交互学习、课后练习、智能测试等功能于一体的响应式微课学习平台。通过对系统平台的实践级改进，肯定了平台对传统教学的积极作用，指出了未来的改进发展方向。

关键词：微课；HTML5；响应式；学习平台

Analysis and design of HTML5 based response platform

Abstract

Since the "weibo, WeChat, micro film, micro store ……", since the birth of micro era, people have entered the micro class also arises at the historic moment. Micro lesson is a new kind of education mode, a long time in 5 ~ 10 minutes, usually have a clear teaching theme, concise content, focus on the contents of a knowledge or core is to show the diversity of small classes. Responsive design can be based on user behavior and environment to respond and adjust equipment, to provide users with a good display, is to balance different terminal equipment, to meet the demand of mobile device users. It is suitable for the existing various platforms, offers a variety of interactive technology, the development of web interaction is strong, can let the user to obtain the very good learning experience, so based on the response of the HTML 5 decay lesson is also the trend of The Times.

This paper mainly studies based on the response of the HTML 5 decay class platform software design. Points out that the learning model based on it has broad prospects for development, design a set of interactions between teachers and students learn, after-school practice, intelligence tests, and other functions in a body"s response to the decline of learning platform. By the practice of the system platform level improved, affirmation of the positive role of platform for the traditional teaching, points out the improvement direction in the future.

Keywords:Micro class;HTML5;Response type;Learning platform

目录

摘要 I

Abstract II

第一章 绪论 5

1.1研究背景 5

1.2研究目的及意义 5

1.3微课的研究现状 5

1.4技术路线 7

1.5论文框架 7

第二章 系统分析 8

2.1传统教学与微课比较分析 8

2.1.1传统教学的弊端  8

2.1.2 微课学习的优势 8

2.2传统Web与响应式网站比较分析 9

2.2.1传统Web网站的不足 9

2.2.2响应式网站的优势 9

2.3微课建设问题分析 10

2.4系统数据模型分祈 11

第三章 系统设计 12

3.1系统总体设计 12

3.1.1设计原则 12

3.1.2设计目标 12

3.2 系统架构设计 12

3.3 系统布局设计 13

3.3.1 灵活的栅格布局模式 14

3.3.2 垂直列表布局模式 14

第四章 系统实施与测试 16

4.1　开发环境及技术 16

4.1.1开发环境 16

4.1.2前端开发 16

4.1.3 第三方插件 16

4.2系统功能模块的实现 17

4.2.1 用户管理模块的实现 18

4.2.2 微课程管理模块的实现 18

4.2.3交流评价模块的实现 19

4.2.4资源下载模块的实现 19

4.2.5用户中心模块的实现 20

4.3系统编码实现 20

4.3.1响应式导航条的实现 20

4.3.2响应式分栏的实现 21

4.3.3弹性图片的实现 21

4.3.4视频播放的实现 22

第五章 总结与展望 23

5.1总结 23

5.2展望 23

致谢 23

参考文献（References） 24

第一章 绪论

1.1研究背景

微课来源于微博,微博具有互动性强，目标明确，传播信息迅速等特点，从2009年开始,在我国快速引起了一场“微”热潮,掀开了“微”时代的篇章。所以,微课也应运而生。微课是一种教学活动，该教学围绕一个问题或者情况形成一个有重点、有明确目标、短小精悍的视频内容供学生，把学习简单化，学生易于掌握。

随着现代化生活节奏的不断加快，人们需要随时随地的不断进行各种知识的学习和更新。然而，现存的网络课程学习模式由于受到空间限制，无法有效的利用碎片时间，发展已经跟不上人们需求多样化、学习形式灵活多样的需求。在这个背景下，移动在线学习蓄势待发，不论是课程学习还是非课程学习，都突破了教室和资源的限制，渐渐走进了人们的日常生活，无时无刻无处不在。我们可以在等公交车的时候学习一个法律条款，也可以在地铁上花几分钟时间学习一个计算机快速排序算法。微课的出现,满足了学习者移动在线学习的需求。

剩余内容已隐藏，请支付后下载全文，论文总字数：15917字