1. 研究目的与意义（文献综述）

引言：本毕业设计的课题是基于html5的密码学可视化虚拟仿真系统。计算机网络信息安全包括网络系统的硬、软件及系统中的数据受到保护，不受偶然或恶意的原因而遭到破坏、更改、泄露，使得系统连续、可靠、正常地运行，网络服务不中断。而密码学作为信息安全的核心技术和基础，伴随着网络通信和应用的发展，逐渐的从军事领域扩展到了人们生活领域，密码学在人们生活中越来越重要，然而人们的信息安全意识普遍淡薄，信息安全知识比较匮乏，社会需求型的密码学人才相对稀少。所以我想通过这个毕业设计，将复杂的密码学加密解密流程通过可视化的方法展现给大家，让更多人对信息安全有一个更深刻的理解。

2. 研究的基本内容与方案

2.1基本内容及研究目标

HTML 是开发网页的主要语言，HTML5 标准是设计用来取代 10 多年没有更新的 HTML4 标准的，W3C 所推出的HTML5 标准相对于 HTML4 来说不仅是为了网页展示某种内容，而是面向 Web 应用程序的，因此功能强大得多。

数据可视化概念首先来自科学计算可视化,科学家们不仅需要通过图形图像来分析由计算机算出的数据,而且需要了解在计算过程中数据的变化。随着计算机技术的发展,数据可视化概念已大大扩展,它不仅包括科学计算数据的可视化,而且包括工程数据和测量数据的可视化。学术界常把这种空间数据的可视化称为体视化技术。

科学和数据可视化技术旨在运用计算机图形学的理论和方法,将隐含在大量数据中的复杂物理现象和自然规律转化为直观的图形、图像的方式表达出来,它涉及计算机图形学、图像处理、计算机视觉、计算机辅助设计及图形用户界面等多种研究领域,已成为当前计算机图形学研究的重要领域。数据可视化技术的具有如下主要特点交互性。用户可以方便地以交互的方式管理和开发数据。多维性。可以看到表示对象或事件的数据的多个属性或变量,而数据可以按其每一维的值,将其分类、排序、组合和显示。可视性。数据可以用图象、曲线、二维图形、三维体和动画来显示,并可对其模式和相互关系进行可视化分析。可视化技术和方法将大量枯燥、繁杂的数据以图形、图像的方式显示出来,帮助人们更好地理解和分析这些数据。

密码学是信息安全的重要组成部分，其中的算法非常复杂，对学习者带来巨大困难。本选题针对这一问题，旨在开发一个基于HTML5技术，能将密码学算法的工作过程进行可视化展示和定制的虚拟仿真实验系统，针对密码学算法工作实时可视化展示和虚拟仿真实验的应用需求，完成基于HTML5和JavaScript等技术密码学可视化虚拟仿真系统，支持可视化建模，允许用户自定义密码学工作算法，并可视化展示其工作过程；帮助学习者快速学习和理解相关内容。这就是我的研究目标。

用HTML5编写一个密码学可视化的虚拟仿真系统，需要注意的问题有：如何实现网页的设计，如何实现与人的交互，如何在网页中将古典密码与现代密码的加密解密过程可视化的显示出来，如何支持可视化建模，允许用户自定义密码学工作算法，如何支持外挂模块和自定义模块，以便将来扩展。

2.2拟采用的技术方案及措施

网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

Html5 可视化设计工具大多是 B/S 架构，可直接通过电脑网页访问。用户只需要准备一台电脑，连上网线登录网站即可完成相关 Html5 设计工作。因此，用户的工作场景基本是室内，少数使用笔记本电脑的用户可在移动场景里进行工作。产品设计和开发人员在用户使用场景的考虑，可以划定为室内操作。

我将整个步骤分为以下几个阶段：

一．使用PS手绘线框图背景阶段

二．实现功能设计阶段

在这个阶段，我将会将各个加密算法流程添加到不同的模块中去，学习者可以从这些模块中选择自己想要学习的加密解密算法。大致框架模块如下图：

图2.次级页面

在主页面中会留出部分空白模块，可以连接到别的页面中去，允许用户自定义密码学工作算法，并可视化展示其工作过程。

三．使用webstorm软件绘制了 Html5 可视化设计工具的原型图。

下面对绘制的原型图进行说明。

整个系统分为一个主体页面和几个次级页面，每个次级页面就会想尽讲述一种算法的加密或解密的流程，并附加用户输入模块，让用户输入明文或密文，实时展示算法的工作流程，让用户清晰明白的感受密码学。主体页面会有能让用户自主添加的功能模块可以实现用户的自主添加算法。

主体区域，左侧为页面管理和页面模板侧边栏，点击标签可以切换，点击箭头可以收缩隐藏。标签分别为当前古典密码学和现代密码学几大经典的加密方式。下面仅罗列出本方案中其他原型页面。包含对 Html5 的基础设置和高级设置。可以借鉴Html5 可视化设计工具的官经典案例可视化设计主页 UI 设计方案。

四．设计方案的评估和优化。

1、功能方面，看能否实现可视化加密算法步骤的功能2、使用流程方面，保存和发布流程引导。使用流程上，含有新手向导。3、交互设计方面。4、视觉 UI 方面，调整设计方案的配色，使之与 logo 更搭配。右侧属性编辑区域，对于零散的元素尽量的整合，区块化排布展示，使之清爽整洁。用HTML5语言将上述古典密码与现代密码的加密解密过程可视化的展现出来，需要较高的HTML编码能力，针对密码学算法工作实时可视化展示和虚拟仿真实验的应用需求，完成基于HTML5和JavaScript等技术密码学可视化虚拟仿真系统。

3. 研究计划与安排

第1-3周：完成课题调研、文献阅读和外文翻译，收集相关资料，完成开题报告，进行小组内选题答辩，修改定稿开题报告，并上传开题报告到教务网。

第4-8周：熟悉相关理论知识、设计工具和计算机语言。完成系统初步设计，完成程序主要模块、算法的设计、编程和相关设计图纸的绘制。
第9-12周：完成系统编程设计及调试、性能分析。
第13-16周：着手毕业设计论文的撰写，根据导师意见进行修改，完成最终论文；同时上传论文到教务网，准备答辩。
第17周：毕业设计（论文）答辩

4. 参考文献（12篇以上）

[1]ben fhala. html5 graphing amp; datavisualization cookbook [m]. packt publishing press. 2012.11
[2]郭海峰. 基于富媒体的密码学教学内容可视化研究与实现[d].四川师范大学,2014.
[3] 孟婷婷. 面向密码算法描述的泛型模具可视化系统设计与实现[d].南开大学,2014.
[4] 赵伟. 基于visio的密码算法可视化的研究与实现[d].南开大学,2012.