14、可视化 Web 工程：从设计到复用的全面解析

可视化 Web 工程：从设计到复用的全面解析

1. HWI 工具与 HWIT 介绍

在 Web 设计与维护领域，HWI 框架为设计师提供了统一的图形化视图，便于有效地设计和维护网站。通过绘制概念上代表网站结构的 Web 图，设计师可以生成网站，而用户也能在同一 Web 图上进行网站的导航和维护。

在设计或导航过程中，用户可以直接点击图中的节点进入对应的页面，无需经过中间页面，这种通过 Web 图的直接访问方式比传统浏览器的线性访问更高效。同时，网站的语法和结构组织能够检查各种完整性条件，并系统地报告任何违规或不一致情况，例如检测因删除某些页面而产生的孤立页面。

为了实现 HWI 的功能，我们设计了实验性工具 HWIT（Human - Web Interface Tool）。它通过可视化 Web 编程和 Web 可视化，让设计师和用户能够以结构化和个性化的方式从不同角度查看任何网站。HWIT 还支持用户使用定制器定义和指定的过滤器，不仅方便用户浏览和探索 Web，还帮助设计师设计和维护结构更优的网站。

以下是使用 HWIT 进行网站导航和设计的步骤：
1. 打开 HWIT 工具。
2. 若要导航网站，点击图中的节点，直接进入对应页面。
3. 若要设计网站，绘制代表网站结构的 Web 图，使用定制器定义过滤器和完整性条件。
4. 检查网站的语法和结构完整性，确保无违规或不一致情况。

2. 图形化编程用于 Web 设计

2.1 Web 图和设计符号

Web 图 G (N, E) 由有限的节点集 N 和边集 E 组成，边是节点集中的有序对。一个图的节点可以是另一