论文部分内容阅读
摘要：本文从软件工程的角度，针对现代中学网站界面优化的需求分析，分析了相关界面优化的HTML5技术及对应的安全维护解决机制，为后续的网站建设与开发提供理论支持与工程实践解决方案。
关键词：中学网站 HTML5 Javascript 多媒体数据 工程实践
0 需求分析概述
随着移动互联网的迅速普及，风格得宜的校园网站已成为现代中学对外交流宣传和对内信息管理的不二选择，在中学校园信息化建设中的地位举足轻重。据此，本文以《湛江第一中学原旧版网站》为基础，提出以下优化需求：
（1） 结构设计需求：采用HTML5技术，结合CSS3与Javascript在Dreamweaver软件平台上重构学校网站的前台，创建现代风格的离线应用和本地存储结构框架，搭建整个网站的骨架体系。
（2） 多媒体交互设计需求：现代校园网页对图片、视觉效果展示、音视频等多媒体元素都有非常高的要求，特别对于灵活的音视频技术及平滑的3D视觉效果，对于网站界面的友好性、艺术性及交互性都有较高要求。
（3） 網站安全性能维护需求：校园网站内部承接着校园资讯的传递，因原网站后台与前台优化方案存在技术性衔接，在衔接过程中需要调整更优的网站架构安全防控方案，以便让脚本语言在MVC传统网站架构中得到更平滑的过渡。
1 HTML5校园网站实现方案
众所周知，相比较传统的ASP网站技术与FLASH技术，HTML5架构有更成熟的体系，如音频与视频元素等，都可以作为移动互联网下的中学校园网站优化方案被广泛应用。以HTML5技术做支撑的响应式网站开发，促使网站具备自适应能力，在移动终端下能根据浏览用户的阅读环境，进行自主适配与适应，从而保证终端浏览器的统一风格；同时，HTML5的跨平台脚本特性，使得新界面与网站的遗留后台具备流畅的兼容性。
基于HTML5结合JavaScript脚本在软件工程实践的新特性，本文提出以下基于前端界面優化的校园网站工程优化方案：
（1）取消部分过时的HTML4标记。包括取消纯粹显示效果的标记，如和，它们已经被CSS所取代。HTML5架构的新版校园网吸取了XHTML2的一些建议，包括部分用来改善文档结构的功能，如新的HTML标签header、footer、dialog、aside和figure等的使用，将使内容创作者更加基于语义地创建文档，之前的开发架构实现这些功能时一般都是使用div标签。
（2）将内容和展示分离。B类和I类标签依然在前台代码中保留，但它们与之前原有的旧界面代码已有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了给它们设置粗体或斜体样式。而U、font、center、strike等标签将被完全被HTML5标签替代。
（3）全新的表单输入对象。包括日期、URL、Email地址，其它的对象则增加了对非拉丁字符的支持。HTML5还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web的处理更为简单。总而言之，这种与网站前台结构的改进可视得内容创建者可以创建更干净，更容易管理的网页，从而让校园网页对于搜索引擎或智能手机终端读屏软件而言更为友好。
（4）多媒体对象在HTML5前台界面代码中，不再全部绑定在object或embed Tag中，而是各种多媒体元素拥有独立的标签。旧版的校园网站在网络上展示视频、音频和动画，除了使用第三方自主开发的播放器外，最为频繁的软件工具插件就是FLASH了，使得各种多媒体都需要在浏览器中安装各种插件才能使用，而且有时速度很慢。而在HTML5中，提供了音频视频的标准接口，通过HTML5中的相关技术，校园网站中的视频、动画、音频等多媒体再也不需要安装插件，只需要专用的video元素标签与audio元素标签来处理视频数据与音频数据就可以了。
（5）本地数据库优化。这个工程方案将内嵌一个本地的SQL数据库，已加速交互式搜索、缓存以及索引功能。众所周知在HTML4时代的网站由于用户的相关数据等一般只能存储在cookie中，但是由于浏览器基于cookie的限制使得网站存储数据格式应尽量精简。在校园网中使用HTML5结合JavaScript技术，使得校园网变成了一个富客户端。为了破解cookie的一系列原生限制，HTML5通过JavaScript新的API就能直接存储大量的数据到客户端浏览器，进一步支持复杂的本地数据库，总的来说，HTML5支持两种WEB存储格式，分别是永久性的本地存储（Local Storage）和会话级别的本地存储（Session Storage）。
2 校园网站多媒体与数据库的工程实现机制
（1）视频元素与音频元素的实现机制
利用video元素创建HTML页面，并设置video资源和SRC属性。本文的视频解决方案支持MP4、webm、3gpp、m4v、mpeg、ogg、quicktime等多种丰富的视频数据格式。接着通过JavaScript脚本添加播放、暂停和声音调节按钮，并创建JS函数来控制video播放。音频元素的操作和视频元素的操作步骤相同。
另外，本文通过source元素来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放，浏览器的选择顺序为代码中的书写顺序，并从上往下判断浏览器本身对该播放格式是否支持，直到匹配到自己支持的播放格式为止。Source元素具有几个属性：src属性指播放媒体的URL地址；type表示媒体类型，对应属性值为播放文件的MIME类型，该属性中的codes参数表示所使用的媒体编码格式。
总之，因为不同浏览器对于各种媒体的媒体类型及编码格式的支持情况都各不相同，所以使用source元素来指定各种媒体类型是非常必要的。
（2）前台HTML5界面对本地数据库的调用与数据存储
在HTML5中增加了一个JS对象：Session Storage。通过此对象可以直接操作存储在浏览器中的会话级别Web存储数据。存储在Session Storage中的数据首先是Key-Value形式的，它跟浏览器当前会话有关，当会话结束后，数据就会自动清除。
接着在最新的JavaScript的API中增加了Local Storage对象，以便于校园网用户永久存储的Web端数据，且数据不会随着http请求发送到后台服务器，而且存储数据大小无需在工程开发中考虑，因为在HTML5的标准中要求浏览器至少支持4MB的数据。
最后，对于复杂的Web应用数据，HTML5提供了一个浏览器端的数据库支持，允许直接通过JavaScript的API在浏览器端创建一个本地的数据库，而且支持标准的SQL操作，让离线的Web应用更加方便的存储结构化数据。
操作本地数据库的基本步骤是：通过openDatabase方法创建一个访问数据库的对象；使用所创建的数据库访问对象来执行Transaction方法，通过此方法可以设置一个开启事务成功的事件响应方法，在事件响应方法中执行SQL语句即可；最后可通过executeSql方法完成对数据的查询。
3 结语
本文通过现代中学网站在移动互联网时代的数据与交互需求，利用HTML5结合JavaScript脚本技术，研究了多媒体数据在网站前台界面的优化方式，并分析了基于前端界面优化与原有网站后台数据一致性需求衍生的网站数据库解决方案，为进一步的软件工程实践提供了指导与实现机制。
参考文献：
（1）HTML5——下一代Web开发标准研究，刘华星、杨庚，《计算机技术与发展》， 2011， 21（8）：54-58
（2）HTML5新特性在移动平台中的应用研究，黄磊、张媛，《数字技术与应用》，2015（9）：102-102
关键词：中学网站 HTML5 Javascript 多媒体数据 工程实践
0 需求分析概述
随着移动互联网的迅速普及，风格得宜的校园网站已成为现代中学对外交流宣传和对内信息管理的不二选择，在中学校园信息化建设中的地位举足轻重。据此，本文以《湛江第一中学原旧版网站》为基础，提出以下优化需求：
（1） 结构设计需求：采用HTML5技术，结合CSS3与Javascript在Dreamweaver软件平台上重构学校网站的前台，创建现代风格的离线应用和本地存储结构框架，搭建整个网站的骨架体系。
（2） 多媒体交互设计需求：现代校园网页对图片、视觉效果展示、音视频等多媒体元素都有非常高的要求，特别对于灵活的音视频技术及平滑的3D视觉效果，对于网站界面的友好性、艺术性及交互性都有较高要求。
（3） 網站安全性能维护需求：校园网站内部承接着校园资讯的传递，因原网站后台与前台优化方案存在技术性衔接，在衔接过程中需要调整更优的网站架构安全防控方案，以便让脚本语言在MVC传统网站架构中得到更平滑的过渡。
1 HTML5校园网站实现方案
众所周知，相比较传统的ASP网站技术与FLASH技术，HTML5架构有更成熟的体系，如音频与视频元素等，都可以作为移动互联网下的中学校园网站优化方案被广泛应用。以HTML5技术做支撑的响应式网站开发，促使网站具备自适应能力，在移动终端下能根据浏览用户的阅读环境，进行自主适配与适应，从而保证终端浏览器的统一风格；同时，HTML5的跨平台脚本特性，使得新界面与网站的遗留后台具备流畅的兼容性。
基于HTML5结合JavaScript脚本在软件工程实践的新特性，本文提出以下基于前端界面優化的校园网站工程优化方案：
（1）取消部分过时的HTML4标记。包括取消纯粹显示效果的标记，如和
（2）将内容和展示分离。B类和I类标签依然在前台代码中保留，但它们与之前原有的旧界面代码已有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了给它们设置粗体或斜体样式。而U、font、center、strike等标签将被完全被HTML5标签替代。
（3）全新的表单输入对象。包括日期、URL、Email地址，其它的对象则增加了对非拉丁字符的支持。HTML5还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web的处理更为简单。总而言之，这种与网站前台结构的改进可视得内容创建者可以创建更干净，更容易管理的网页，从而让校园网页对于搜索引擎或智能手机终端读屏软件而言更为友好。
（4）多媒体对象在HTML5前台界面代码中，不再全部绑定在object或embed Tag中，而是各种多媒体元素拥有独立的标签。旧版的校园网站在网络上展示视频、音频和动画，除了使用第三方自主开发的播放器外，最为频繁的软件工具插件就是FLASH了，使得各种多媒体都需要在浏览器中安装各种插件才能使用，而且有时速度很慢。而在HTML5中，提供了音频视频的标准接口，通过HTML5中的相关技术，校园网站中的视频、动画、音频等多媒体再也不需要安装插件，只需要专用的video元素标签与audio元素标签来处理视频数据与音频数据就可以了。
（5）本地数据库优化。这个工程方案将内嵌一个本地的SQL数据库，已加速交互式搜索、缓存以及索引功能。众所周知在HTML4时代的网站由于用户的相关数据等一般只能存储在cookie中，但是由于浏览器基于cookie的限制使得网站存储数据格式应尽量精简。在校园网中使用HTML5结合JavaScript技术，使得校园网变成了一个富客户端。为了破解cookie的一系列原生限制，HTML5通过JavaScript新的API就能直接存储大量的数据到客户端浏览器，进一步支持复杂的本地数据库，总的来说，HTML5支持两种WEB存储格式，分别是永久性的本地存储（Local Storage）和会话级别的本地存储（Session Storage）。
2 校园网站多媒体与数据库的工程实现机制
（1）视频元素与音频元素的实现机制
利用video元素创建HTML页面，并设置video资源和SRC属性。本文的视频解决方案支持MP4、webm、3gpp、m4v、mpeg、ogg、quicktime等多种丰富的视频数据格式。接着通过JavaScript脚本添加播放、暂停和声音调节按钮，并创建JS函数来控制video播放。音频元素的操作和视频元素的操作步骤相同。
另外，本文通过source元素来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放，浏览器的选择顺序为代码中的书写顺序，并从上往下判断浏览器本身对该播放格式是否支持，直到匹配到自己支持的播放格式为止。Source元素具有几个属性：src属性指播放媒体的URL地址；type表示媒体类型，对应属性值为播放文件的MIME类型，该属性中的codes参数表示所使用的媒体编码格式。
总之，因为不同浏览器对于各种媒体的媒体类型及编码格式的支持情况都各不相同，所以使用source元素来指定各种媒体类型是非常必要的。
（2）前台HTML5界面对本地数据库的调用与数据存储
在HTML5中增加了一个JS对象：Session Storage。通过此对象可以直接操作存储在浏览器中的会话级别Web存储数据。存储在Session Storage中的数据首先是Key-Value形式的，它跟浏览器当前会话有关，当会话结束后，数据就会自动清除。
接着在最新的JavaScript的API中增加了Local Storage对象，以便于校园网用户永久存储的Web端数据，且数据不会随着http请求发送到后台服务器，而且存储数据大小无需在工程开发中考虑，因为在HTML5的标准中要求浏览器至少支持4MB的数据。
最后，对于复杂的Web应用数据，HTML5提供了一个浏览器端的数据库支持，允许直接通过JavaScript的API在浏览器端创建一个本地的数据库，而且支持标准的SQL操作，让离线的Web应用更加方便的存储结构化数据。
操作本地数据库的基本步骤是：通过openDatabase方法创建一个访问数据库的对象；使用所创建的数据库访问对象来执行Transaction方法，通过此方法可以设置一个开启事务成功的事件响应方法，在事件响应方法中执行SQL语句即可；最后可通过executeSql方法完成对数据的查询。
3 结语
本文通过现代中学网站在移动互联网时代的数据与交互需求，利用HTML5结合JavaScript脚本技术，研究了多媒体数据在网站前台界面的优化方式，并分析了基于前端界面优化与原有网站后台数据一致性需求衍生的网站数据库解决方案，为进一步的软件工程实践提供了指导与实现机制。
参考文献：
（1）HTML5——下一代Web开发标准研究，刘华星、杨庚，《计算机技术与发展》， 2011， 21（8）：54-58
（2）HTML5新特性在移动平台中的应用研究，黄磊、张媛，《数字技术与应用》，2015（9）：102-102