第 37 卷 第 8 期 2016 年 4 月 PACKAGING ENGINEERING 143 基 于 HTML5 的 宣 纸 文 化 网 站 设 计 研 究 汪 梅, 汤 书 昆, 陈 敬 宇 ( 中 国 科 学 技 术 大 学, 合 肥 230026) 摘 要 : 目 的 充 分 借 助 信 息 技 术 的 力 量 延 续 宣 纸 文 化 的 活 力, 实 现 对 其 的 保 护 与 传 承 方 法 从 界 面 设 计 多 媒 体 展 示 系 统 网 页 游 戏 线 上 博 物 馆 地 图 应 用 等 方 面, 介 绍 宣 纸 文 化 网 站 的 设 计 方 法 和 思 路 结 论 HTML5 是 当 前 web 开 发 领 域 的 主 流 趋 势, 其 卓 越 的 多 媒 体 呈 现 和 跨 平 台 兼 容 能 力, 可 以 完 美 支 撑 以 手 工 技 艺 为 核 心 的 宣 纸 文 化 的 传 播 关 键 词 :HTML5; 网 站 开 发 ; 非 物 质 文 化 遗 产 ; 宣 纸 中 图 分 类 号 :TB472 文 献 标 识 码 :A 文 章 编 号 :1001-3563(2016)08-0143-05 HTML5-Based Web Design of Xuan Paper WANG Mei,TANG Shu-kun,CHEN Jing-yu (University of Science and Technology of China,Hefei 230026,China) ABSTRACT:Make full use of the power of information technology to continue the cultural vitality of Xuan paper,realize the protection an inheritance.from UI design,multimedia display,web game,online museum and map application five aspects,it introduces the design methods and thinking of Xuan paper website. HTML5 technology is the trend in the field of website development and has great abilities of media presenting and cross-platform running,which are good for the dissemination of Xuan paper. KEY WORDS:HTML5;website development;intangible cultural heritage;xuan paper 宣 纸 产 于 安 徽 省 泾 县, 有 纸 寿 千 年 之 美 誉, 于 2009 年 9 月 30 日 被 联 合 国 教 科 文 组 织 列 入 人 类 非 物 质 文 化 遗 产 名 录, 是 我 国 非 物 质 文 化 遗 产 中 技 艺 遗 产 的 代 表 性 样 式 如 今 科 技 的 迅 猛 发 展 在 推 动 工 业 化 进 程 的 同 时, 也 造 成 了 生 产 的 批 量 化 和 商 品 的 同 质 化, 因 此 不 可 避 免 地 加 速 了 包 括 宣 纸 在 内 的 传 统 文 化 消 费 业 态 的 萎 缩 如 何 在 保 护 传 统 工 艺 的 同 时 利 用 数 字 化 手 段 对 其 进 行 有 效 传 播, 是 当 代 一 个 充 满 价 值 的 议 题 同 时,HTML5 自 问 世 以 来, 迅 速 发 展 成 为 当 前 web 开 发 技 术 的 新 主 流 基 于 宣 纸 文 化 传 承 的 需 要 和 HTML5 新 技 术 的 普 及, 实 现 HTML5 宣 纸 文 化 网 站 的 设 计 将 是 非 物 质 文 化 遗 产 数 字 化 的 重 要 创 新 实 践 1 HTML5 介 绍 2014 年 10 月 28 日,HTML5 在 万 众 瞩 目 中 正 式 问 世 作 为 开 源 的 公 共 标 准,HTML5 拥 有 全 新 的 多 媒 体 引 用 方 式 和 动 画 呈 现 效 果, 具 有 资 源 消 耗 低 运 行 流 畅 度 高 跨 平 台 兼 容 性 强 的 优 势 利 用 新 兴 的 HTML5 技 术 取 代 传 统 的 Flash 技 术, 设 计 具 有 响 应 式 界 面 的 网 站, 已 成 为 当 前 移 动 信 息 时 代 网 站 设 计 与 开 发 的 必 收 稿 日 期 :2016-01-03 基 金 项 目 : 国 家 科 技 支 撑 计 划 课 题 (2013BAH52F02);2013 年 高 校 省 级 人 文 社 会 科 学 研 究 基 地 一 般 项 目 (SK2013B406) 作 者 简 介 : 汪 梅 (1994-), 女, 安 徽 人, 中 国 科 学 技 术 大 学 硕 士 生, 主 攻 网 站 开 发 通 讯 作 者 : 汤 书 昆 (1960-), 男, 江 苏 人, 国 科 学 技 术 大 学 教 授, 主 要 研 究 方 向 为 文 化 产 业 知 识 管 理
144 2016 年 4 月 然 趋 势 1.1 HTML5 的 发 展 历 程 HTML5 是 网 页 设 计 核 心 语 言 HTML 的 最 新 标 准 由 于 它 提 供 的 新 型 标 签 (<video>,<audio>) 允 许 开 发 者 将 视 频 音 频 等 媒 体, 直 接 嵌 入 网 页 文 档 而 无 需 借 助 第 三 方 插 件, 因 此 对 以 Adobe Flash 为 代 表 的 传 统 RIA(Rich Internet Applications, 富 互 联 网 程 序 ) 应 用 [1] 商 的 冲 击 十 分 巨 大 目 前 市 面 上 的 主 流 浏 览 器 (Chrome,Firefox,Safari,IE 等 ) 都 已 在 其 最 新 版 本 中 实 现 了 对 HTML5 的 支 持, 开 发 者 对 HTML5 的 态 度 也 相 当 乐 观 1.2 HTML5 相 对 于 Flash 的 优 势 HTML5 从 出 生 的 第 一 天 开 始 就 被 视 为 Flash 强 有 力 的 竞 争 对 手, 两 者 之 间 的 差 异 经 常 被 拿 来 讨 论 性 能 HTML5 与 Flash 的 性 能 对 比 见 表 1 Tab.1 跨 平 台 兼 容 性 安 全 性 开 放 性 视 频 播 放 流 畅 度 系 统 资 源 占 用 表 1 HTML5 与 Flash 的 性 能 对 比 Performances contrast of HTML5 & Flash HTML5 只 要 可 以 安 装 HTML5 浏 览 器 的 平 台 都 可 以 兼 容 避 免 了 插 件 的 使 用, 从 而 大 大 降 低 了 安 全 风 险 免 费 开 源 的 公 共 标 准 流 畅 ( 包 括 720 p 以 上 视 频 ) 通 过 硬 件 对 视 频 解 码, 低 功 耗, 占 用 CPU 资 源 不 多 Flash 移 动 设 备 上 的 兼 容 性 较 差, 不 支 持 ios 平 台 漏 洞 较 多, 易 被 植 入 恶 意 代 码 收 费 封 闭 的 专 利 性 程 序 流 畅 ( 限 于 480 p 以 下 视 频 ) 占 用 资 源 多, 较 为 耗 电, 易 造 成 死 机 2 开 发 HTML5 宣 纸 文 化 网 站 的 必 要 性 2.1 宣 纸 文 化 传 播 的 现 状 随 着 信 息 时 代 的 到 来, 传 统 的 宣 纸 文 化 传 播 模 式 受 到 了 极 大 挑 战, 固 化 的 宣 传 渠 道 在 一 定 程 度 上 约 束 了 宣 纸 文 化 的 价 值 体 现 作 为 传 统 技 艺 类 的 非 物 质 文 化 遗 产, 宣 纸 文 化 的 传 播 主 要 依 托 其 实 物 化 载 体 宣 纸 及 其 制 作 工 艺 坐 落 在 安 徽 省 泾 县 的 宣 纸 文 化 园 是 宣 纸 文 化 线 下 传 播 模 式 的 代 表 性 样 本, 但 由 于 其 位 于 偏 僻 的 泾 县 乌 溪 镇, 交 通 不 便, 极 大 地 限 制 了 游 客 量 ; 且 其 主 要 观 光 形 式 依 然 是 传 统 的 参 观 游 览, 游 客 参 与 程 度 有 限, 不 能 深 入 体 验 造 纸, 因 此 难 以 充 分 展 示 宣 纸 文 化 的 丰 富 内 涵 传 统 的 传 播 模 式 迫 切 需 要 转 型, 从 而 与 信 息 技 术 主 导 的 网 络 时 代 接 轨 从 通 过 数 字 化 手 段 实 现 宣 纸 文 化 线 上 传 播 的 维 度 而 言, 网 站 的 建 设 是 一 条 重 要 渠 道 以 中 国 宣 纸 股 份 有 限 公 司 开 发 的 宣 纸 文 化 乐 园 网 站 为 例, 该 网 站 利 用 Flash 技 术 开 发 了 模 拟 造 纸 的 小 游 戏, 让 用 户 在 游 戏 过 程 中 模 拟 造 纸 宣 纸 文 化 乐 园 网 站 上 的 模 拟 造 纸 小 游 戏 见 图 1 尽 管 利 用 Flash 技 术 打 造 的 网 页 小 游 戏 引 人 入 胜, 但 从 技 术 层 面 来 说,Flash 动 画 并 非 如 今 网 页 设 计 制 作 中 的 最 佳 选 择 新 一 代 互 联 网 标 准 HTML5 自 问 世 以 来, 已 经 表 现 出 强 大 的 生 命 力, 值 得 进 行 尝 试 一 方 面, 相 比 于 Adobe Flash 的 封 闭 性,HTML5 的 开 放 性 是 其 最 大 的 优 势 开 放 的 公 共 标 准 意 味 着 它 不 会 只 代 表 着 某 一 家 商 业 公 司 的 利 益, 因 此 HTML5 与 互 联 网 推 崇 的 自 由 共 享 精 神 交 相 辉 映 另 一 方 面, 搜 索 引 擎 无 法 抓 取 Flash, 但 是 却 可 以 收 录 HTML5 的 全 部 内 容, 这 对 网 站 的 宣 传 和 推 广 有 着 非 凡 的 意 义 同 时,Flash 会 占 用 和 消 耗 大 量 资 源, 经 常 引 起 计 算 机 的 卡 顿 和 死 机, 其 频 发 的 安 全 问 题 也 一 直 为 人 诟 病 相 比 之 下,HTML5 的 安 全 稳 定 也 成 为 其 取 代 Flash 的 重 [2] 要 因 素 尤 其 在 移 动 互 联 网 飞 速 发 展 的 今 天, 拥 有 强 大 自 适 应 能 力 的 HTML5 已 经 展 现 出 独 有 的 竞 争 力, 越 来 越 多 的 开 发 者 利 用 HTML5 来 设 计 适 应 移 动 终 端 屏 幕 且 无 需 插 件 就 能 播 放 多 媒 体 的 网 页 图 1 宣 纸 文 化 乐 园 网 站 上 的 模 拟 造 纸 小 游 戏 Fig.1 Paper-making game on Xuan paper website 尽 管 利 用 Flash 技 术 打 造 的 网 页 小 游 戏 引 人 入 胜, 但 从 技 术 层 面 来 说,Flash 动 画 并 非 如 今 网 页 设 计 制 作 中 的 最 佳 选 择 新 一 代 互 联 网 标 准 HTML5 自 问 世 以 来, 已 经 表 现 出 强 大 的 生 命 力, 值 得 进 行 尝 试 2.2 HTML5 与 宣 纸 文 化 的 特 色 性 关 系 与 其 他 文 化 类 网 站 不 同 的 是, 由 于 宣 纸 文 化 遗 产 的 传 承 是 以 古 法 造 纸 的 手 工 技 艺 为 依 托, 因 此 宣 纸 文
第 37 卷 第 8 期 汪 梅 等 : 基 于 HTML5 的 宣 纸 文 化 网 站 设 计 研 究 145 化 网 站 内 容 更 偏 重 于 造 纸 技 艺 的 展 现 这 样 的 特 点 决 定 了 在 以 技 术 为 支 撑 点 的 宣 纸 文 化 数 字 化 传 播 路 径 中, 对 网 站 内 容 可 视 化 体 验 性 的 要 求 甚 高, 因 此, 宣 纸 文 化 网 站 的 设 计 思 路 应 是 以 多 样 化 的 媒 体 形 态 表 现 造 纸 过 程, 并 优 化 用 户 浏 览 体 验, 以 充 分 展 示 宣 纸 文 化 的 内 涵 HTML5 拥 有 全 新 的 多 媒 体 引 用 方 式 和 动 画 呈 现 效 果, 可 以 将 原 始 的 造 纸 流 程 进 行 数 字 化 复 原, 将 古 色 古 香 的 手 工 技 艺 与 生 动 有 趣 的 网 页 元 素 融 合, 赋 予 宣 纸 技 艺 展 示 系 统 一 个 形 象 而 直 观 的 效 果 同 时, 在 宣 纸 文 化 网 站 中, 友 好 的 用 户 体 验 应 当 是 易 于 操 作 方 便 快 捷 的 HTML5 在 用 户 体 验 方 面 的 表 现 十 分 优 秀, 其 强 大 的 跨 平 台 兼 容 性 和 交 互 能 力 可 以 为 用 户 带 来 卓 越 的 体 验, 有 利 于 用 户 以 更 加 直 观 形 象 的 方 式 感 受 宣 纸 文 化, 因 此, 开 发 基 于 HTML5 的 宣 纸 文 化 网 站 是 宣 纸 文 化 传 播 的 最 佳 选 择 基 于 HTML5 的 宣 纸 文 化 网 站 系 统 构 建 见 图 2 图 2 基 于 HTML5 的 宣 纸 文 化 网 站 系 统 构 建 Fig.2 HTML5-Based Xuan paper website system design [3] 根 据 麦 克 卢 汉 的 说 法, 由 于 媒 介 即 讯 息, 传 递 信 息 的 媒 介 将 在 很 大 程 度 上 决 定 受 众 对 内 容 的 感 受 随 着 移 动 信 息 时 代 的 到 来, 人 们 更 习 惯 于 在 手 机 平 板 等 手 持 移 动 设 备 上 查 看 网 页, 因 此 可 以 通 过 HTML5 对 旧 式 宣 纸 文 化 网 站 进 行 代 码 重 构, 开 发 出 适 用 于 多 个 系 统 平 台 的 网 页 版 本, 供 用 户 在 各 种 终 端 上 自 由 浏 览 同 时 还 可 以 利 用 HTML5 来 优 化 网 站 前 端 的 交 互 设 计, 打 造 身 临 其 境 的 奇 妙 体 验 3 技 术 路 线 借 助 HTML5 的 强 大 功 能, 宣 纸 文 化 传 播 可 以 达 到 多 种 形 态 的 令 人 耳 目 一 新 的 效 果 这 里 将 从 界 面 设 计 多 媒 体 展 示 系 统 网 页 游 戏 线 上 博 物 馆 地 图 应 用 等 模 块 来 介 绍 基 于 HTML5 的 宣 纸 文 化 遗 产 网 站 的 设 计 基 于 HTML5 的 宣 纸 文 化 遗 产 网 站 见 图 3 图 3 基 于 HTML5 的 宣 纸 文 化 遗 产 网 站 Fig.3 HTML5-Based Xuan paper website 3.1 界 面 设 计 2010 年 5 月,Ethan Marcotte 提 出 了 RWD(Responsive Web Design, 响 应 式 的 网 页 设 计 ) 的 概 念, 这 是 一 [4] 种 让 网 页 可 以 自 我 调 整 以 适 应 不 同 大 小 屏 幕 的 设 计 理 念 RWD 的 提 出, 解 决 了 在 移 动 互 联 网 时 代 网 页 设 计 界 所 面 临 的 种 种 问 题 :(1) 开 发 者 需 要 为 同 一 份 内 容 制 作 多 份 不 同 样 式 的 网 页 来 适 配 不 同 的 屏 幕 ;(2) 未 经 适 配 处 理 的 网 页 无 法 满 足 用 户 在 手 机 屏 幕 上 阅 读 的 要 求 ;(3) 各 式 各 样 的 新 型 移 动 终 端 不 断 涌 现 而 今 天 可 以 利 用 CSS3(Cascading Style Sheet 3, 层 叠 样 式 表 的 最 新 标 准 ) 打 造 适 应 各 种 终 端 屏 幕 的 HTML5 页 面 实 现 方 法 并 不 复 杂, 只 需 利 用 Media Queries 模 块 完 成 页 面 的 布 局 和 设 计 即 可 这 里 实 现 的 宣 纸 文 化 网 站 可 以 适 应 多 个 不 同 终 端, 页 面 元 素 的 样 式 以 及 文 本 内 容 会 随 着 屏 幕 大 小 的 不 同 而 变 化 目 前 经 过 测 试, 可 以 完 美 兼 容 手 机 平 板 等 多 种 移 动 设 备 采 用 RWD 的 宣 纸 文 化 网 站 在 不 同 设 备 上 的 呈 现 效 果 见 图 4 作 为 HTML5 网 站 设 计 中 不 可 或 缺 的 重 要 技 术, CSS3 的 优 势 在 于 其 可 以 实 现 各 种 美 观 的 网 页 效 果 通 过 CSS3 实 现 RWD, 使 同 一 个 页 面 可 以 兼 容 多 种 设 备, 网 站 开 发 人 员 将 因 此 一 劳 永 逸, 用 户 也 会 拥 有 更 佳 的 浏 览 体 验 3.2 多 媒 体 展 示 系 统 HTML5 中 <video> 和 <audio> 等 多 媒 体 标 签 的 出 现, 引 发 了 关 于 网 页 视 频 播 放 形 式 的 一 场 革 命 一 直 以 来, 使 用 Flash 在 网 页 中 插 入 多 媒 体 文 件 是 比 较 流 行 的 做 法, 但 是 对 用 户 来 说, 必 须 先 安 装 Flash 播 放 插 件 才 能 对 其 进 行 播 放 而 如 果 换 作 使 用 HTML5 技 术, 用 户 只 需 使 用 支 持 HTML5 的 浏 览 器 即 可 直 接 播 放 宣 纸 文 化 相 关 的 视 频 和 音 频 本 次 开 发 的 宣 纸 文 化 网 站 利 用 HTML5<video> 标
146 2016 年 4 月 签, 引 用 了 大 量 展 示 宣 纸 制 作 技 艺 的 视 频, 在 Chrome 浏 览 器 中 使 用 HTML5 播 放 器 播 放 宣 纸 制 作 技 艺 的 视 频 见 图 5 作 为 基 于 Web 端 的 网 页 动 画 制 作 技 术,HTML5 Canvas 的 优 势 在 于 其 不 再 需 要 借 助 服 务 器 传 输 和 Flash 插 件 就 能 完 成 图 像 元 素 的 交 互 过 程, 从 而 保 证 了 资 源 的 节 约 和 效 率 的 提 升 3.4 线 上 博 物 馆 图 4 采 用 RWD 的 宣 纸 文 化 网 站 在 不 同 设 备 上 的 呈 现 效 果 Fig.4 RWD-Based Xuan paper website on different devices 图 5 在 Chrome 浏 览 器 中 使 用 HTML5 播 放 器 播 放 宣 纸 制 作 技 艺 的 视 频 Fig.5 Using HTML5 Player to play Xuan paper video on Chrome 相 对 于 传 统 的 网 页 多 媒 体 展 示 技 术,HTML5 的 优 势 在 于 简 化 了 用 户 的 操 作 流 程, 并 且 可 兼 容 移 动 设 备 借 助 HTML5 的 媒 体 播 放 优 势, 这 些 视 频 可 以 直 接 在 浏 览 器 ( 包 括 手 机 浏 览 器 ) 播 放, 无 需 任 何 插 件 目 前 国 内 外 大 型 视 频 网 站 基 本 都 已 经 采 用 HTML5 技 术 编 写 页 面, 以 满 足 数 量 庞 大 的 手 机 用 户 的 使 用 需 求 博 物 馆 作 为 非 物 质 文 化 遗 产 线 下 传 播 最 主 要 的 载 体 之 一, 实 现 其 数 字 虚 拟 化 可 以 保 证 文 化 传 播 在 拥 有 线 下 传 播 长 处 的 同 时 又 充 分 发 挥 线 上 传 播 的 优 势 利 用 HTML5 技 术 打 造 虚 拟 的 博 物 馆 展 示 系 统 的 操 作 路 线 如 下 :(1) 数 据 采 集, 通 过 配 置 全 景 云 台 或 鱼 眼 镜 头 的 相 机 拍 摄 超 大 视 角 的 图 片 ;(2) 后 期 处 理, 通 过 PTGui( 一 款 全 景 图 片 制 作 软 件 ) 将 所 拍 照 片 拼 接 合 成 为 360 的 全 景 图 片 ;(3) 系 统 实 现, 通 过 CSS3 和 JavaScript 等 技 术, 绘 制 基 于 HTML5 框 架 的 3D 场 景, [5] 并 加 入 移 动 缩 放 等 交 互 功 能 这 里 设 计 的 在 线 博 物 馆 以 宣 纸 文 化 园 为 展 示 对 象, 配 有 上 下 左 右 4 个 方 向 移 动 的 按 钮 和 场 景 放 大 缩 小 的 按 钮, 宣 纸 文 化 园 全 景 展 示 系 统 见 图 7 3.3 网 页 游 戏 从 文 化 体 验 效 果 而 言, 相 对 于 传 统 的 文 化 体 验 旅 游, 对 文 化 传 承 进 行 提 炼 的 网 页 游 戏 更 能 吸 引 人 们 的 兴 趣, 而 且 不 需 要 付 出 太 多 成 本 只 用 短 短 几 分 钟, 宣 纸 文 化 的 丰 富 内 涵 就 会 在 轻 松 愉 快 的 氛 围 中 展 现 开 来 HTML5 中 的 Canvas 元 素 允 许 开 发 人 员 使 用 网 页 脚 本 语 言 来 绘 制 图 形 并 直 接 在 浏 览 器 渲 染 利 用 Canvas 来 制 作 宣 纸 工 艺 展 示 动 画 和 游 戏 时, 首 先 需 要 掌 握 基 本 的 JavaScript( 一 种 网 页 脚 本 语 言 ) 技 巧 利 用 Canvas 打 造 动 画 游 戏 的 流 程 见 图 6 图 6 利 用 Canvas 打 造 动 画 游 戏 的 流 程 Fig.6 Using Canvas to develop web game 图 7 宣 纸 文 化 园 全 景 展 示 系 统 Fig.7 Xuan paper culture park panorama 在 开 发 在 线 博 物 馆 的 过 程 中,HTML5 的 技 术 优 势 同 样 体 现 在 便 捷 的 用 户 操 作 和 良 好 的 跨 平 台 兼 容 性 上 经 过 测 试, 基 于 HTML5 的 宣 纸 在 线 博 物 馆 系 统 可 以 在 ios 和 Android 平 台 上 正 常 使 用 3.5 地 图 应 用 由 于 非 物 质 文 化 遗 产 的 民 族 区 域 性 特 点, 宣 纸 文 化 的 传 播 过 程 也 应 与 地 域 特 色 紧 密 结 合 目 前 宣 纸 文 化 传 播 的 线 下 模 式 主 要 是 依 托 其 生 产 材 料 燎 皮 和 燎 草 的 基 地 进 行 旅 游 开 发, 如 果 在 线 上 传 播 时 再 同 地 理 位 置 追 踪 相 结 合, 无 疑 能 大 大 提 升 宣 纸 文 化 传 播 的 品 质 吸 引 力 随 着 GPS 功 能 成 为 移 动 设 备 的 标 配, 地 理 定 位 也 成 为 移 动 互 联 时 代 最 热 门 的 概 念 之 一 HTML5 所 包 含 的 地 理 位 置 接 口 (Geo-location API) 可 以 获 取 用 户 当 前 的 位 置 信 息, 使 得 在 脱 离 客 户 端 的 网 页 应 用 中 使
第 37 卷 第 8 期 汪 梅 等 : 基 于 HTML5 的 宣 纸 文 化 网 站 设 计 研 究 147 用 地 理 定 位 与 导 航 功 能 成 为 了 可 能 Geo-location API 的 核 心 函 数 是 getcurrentposition 函 数, 调 用 此 函 数 即 可 获 取 用 户 的 当 前 地 理 位 置 [6] 利 用 此 方 法 打 造 出 的 带 有 导 航 及 导 游 介 绍 功 能 的 地 图 应 用, 见 图 8 随 着 融 合 了 社 交 本 地 化 移 动 3 种 元 素 的 [7] SoLoMo 模 式 的 兴 起, 具 有 良 好 交 互 能 力 的 移 动 地 图 应 用 前 景 十 分 广 阔 基 于 HTML5 的 地 图 应 用 既 可 以 实 现 基 本 的 导 航 功 能, 又 能 向 用 户 推 送 宣 纸 生 产 基 地 的 相 关 信 息 并 进 行 导 游 介 绍, 同 时 兼 容 各 种 平 台, 保 证 用 户 可 以 随 时 随 地 进 行 使 用 4 结 语 与 以 往 的 Web 开 发 框 架 相 比,HTML5 的 优 势 是 毋 庸 置 疑 的, 它 在 多 媒 体 呈 现 跨 平 台 兼 容 和 用 户 体 验 方 面 的 能 力 尤 为 卓 越, 而 这 些 能 力 在 移 动 互 联 网 普 及 的 今 天 显 得 弥 足 珍 贵, 对 传 统 文 化 的 数 字 化 传 播 十 分 有 利 通 过 有 效 地 利 用 HTML5,CSS3,JavaScript 等 前 端 开 发 语 言, 可 以 轻 松 搭 建 兼 容 性 强 呈 现 力 高 的 网 站 系 统, 让 人 们 坐 在 家 里 就 能 置 身 于 厚 重 的 传 统 文 化 之 中, 感 受 宣 纸 魅 力 的 熏 陶 [8-10] 在 人 文 传 承 与 科 技 进 步 的 博 弈 中, 作 为 传 统 文 化 代 表 的 非 物 质 文 化 遗 产 需 要 把 握 技 术 发 展 的 方 向, 抓 住 移 动 互 联 时 代 的 机 遇, 在 设 计 中 迎 合 受 众 的 新 需 求 非 物 质 文 化 遗 产 的 传 承 发 展 是 一 个 动 态 而 连 续 的 过 程, 通 过 数 字 化 手 段 进 行 线 上 线 下 无 缝 对 接 的 新 型 体 验 参 与 式 传 播, 不 仅 仅 是 宣 纸 更 是 如 今 所 有 非 物 质 文 化 遗 产 在 实 现 传 承 与 保 护 过 程 中 需 要 转 型 的 方 向 利 用 HTML5 技 术 来 设 计 网 站, 建 设 跨 平 台 的 线 上 系 统, 必 将 是 未 来 几 年 非 物 质 文 化 遗 产 数 字 化 过 程 中 的 大 趋 势 图 8 带 有 导 航 及 导 游 介 绍 功 能 的 地 图 应 用 Fig.8 Map application with navigation and introduction 参 考 文 献 : [1] 刘 华 星, 杨 庚.HTML5 下 一 代 Web 开 发 标 准 研 究 [J]. 计 算 机 技 术 与 发 展,2011,21(8):54 58. LIU Hua-xing,YANG Geng.HTML5:Next Generation Web Development Standard Research[J].Computer Technology and Development,2011,21(8):54 58. [2] 韩 舶. 简 述 HTML5 与 FLASH 的 关 系 与 发 展 [J]. 中 国 广 播, 2011(6):62 63. HAN Bo. 简 述 HTML5 与 FLASH 的 关 系 与 发 展 [J].China Broadcasts,2011(6):62 63. [3] MCLUHAN M. 理 解 媒 介 : 论 人 的 延 伸 [M]. 北 京 : 商 务 印 书 馆,2000. MCLUHAN M.Understanding Media:the Extensions of Man [M]Beijing:The Commercial Press,2000. [4] MARCOTTE E.Responsive Web Design[M].Editions Eyrolles, 2011. [5] 王 晖. 基 于 HTML5 的 博 物 馆 展 示 系 统 的 研 究 与 实 现 [D]. 广 州 : 华 南 理 工 大 学,2013. WANG Hui.Research and Implementation of Museum Display System Based on HTML5[D].Guangzhou:South China University of Technology,2013. [6] 唐 俊 开.HTML5 移 动 Web 开 发 指 南 [M]. 北 京 : 电 子 工 业 出 版 社,2012. TANG Jun-kai.HTML5 Mobile Web Development Guide[M]. Beijing:Publishing House of Electronics Industry,2012. [7] 陈 云 海. 移 动 互 联 网 SoLoMo 应 用 模 式 分 析 [J]. 电 信 科 学, 2012,28(3):18 22. CHEN Yun-hai.Analysis on the Application of SoLoMo Mode in the Mobile Internet Industry[J].Telecommunications Science,2012,28(3):18 22. [8] 黄 悦 深. 基 于 HTML5 的 移 动 Web APP 开 发 [J]. 图 书 馆 杂 志, 2014,33(7):72 77. HUANG Yue-shen.Mobile Web APP Development Based on HTML5[J].Library Journal,2014,33(7):72 77. [9] 平 淑 文, 潘 珏 羽, 张 学 金, 等. 基 于 HTML5 和 JavaScript 轻 量 型 动 画 框 架 开 发 [J]. 计 算 机 技 术 与 发 展,2013,23(12):5 10. PING Shu-wen,PAN Yu-yu,ZHANG Xue-jin,et al. Development of a Lightweight Animation Engine Based on HTML5 and JavaScript[J].Computer Technology and Development, 2013,23(12):5 10. [10] 刘 海 娜. 基 于 HTML5 的 全 景 漫 游 技 术 研 究 [D]. 郑 州 : 郑 州 大 学,2013. LIU Hai-na.The Research on Panorama Technology Based on HTML5[D].Zhengzhou:Zhengzhou University,2013.