Manchester Reunited 网站设计报告
一．网站总体结构的规划与设计
1. 网站设计原则与建站初衷
经过这学期web与XML课程的学习，本人不仅学习到了初级的网页设计、XML文件操作和后台系统实现等知识，更了解到信息管理在网络应用上的重要性。而本人又一直是一个曼联的球迷，所以想以红魔死忠和信息管理专业学生双重身份来做一个网站，Manchester Reunited，它的具体创意和创新之处将在下面具体说明。这个网站实现了广义上的信息可视化（信息提供的可视化），充分利用了信息的可共享性，并且具有web2.0思想的服务。
在规划此网站时，在前端设计与后台实现方面都提出了一系列的原则，事实也证明，有了这些原则才能使网站具有统一的风格和良好的体验：
1）可靠性。网站的可靠性主要指网站运行的稳定程度，具体体现在后台程序结构的高程度优化和前端布局的固定化。
2）安全性。既然要信息共享就要注意信息安全，保护用户信息与数据是最基本的原则。
3）可扩展性。设计网站时处理系统的整体优化与重复建设的矛盾是网站建设始终要面对的问题， 保证系统的可扩展性。随着信息量的增加和前端应用的扩充，后台系统就必须要具备很好的可扩展性。
4）开放性。Web2.0已经是互联网最重要的技术和商业上的革命，它使得千千万万的网页不再单纯只是内容生产的结果，而是生产与消费并行的产物。网站的开放性在一定程度上说就是体现web2.0核心要素的程度。
5）易用性。用户体验是现如今所有软硬件的重要评判标准，它在终端上的重要性渐渐的也体现在网页上。流畅的浏览网页，便捷的获取想要的信息都是网站易用性的具体标准。
2. 网站需求分析、构思及创意
web 2.0的各式应用和服务可以让人了解目前万维网正在进行的一种改变——从一系列网站到一个成熟的为最终用户提供网络应用的服务平台。这它的特点是鼓励作为信息最终利用者通过分享，使得可供分享的资源变得更丰盛；相反的，过去的各种网上分享方式则显得支离破碎。Web 2.0是网络运用的新时代，网络成为了新的平台，内容因为每位用户的参与而产生（消费内容的同时生产内容），参与所产生的个人化内容（同时在消费内容的体现），借由人与人的分享，形成了现在Web 2.0的世界。
信息可视化，这条术语囊括了数据可视化、信息图形、知识可视化、科学可视化以及视觉设计方面的所有发展与进步。在这种层次上，如果加以充分适当的组织整理，任何事物都是一类信息：表格、图形、地图，甚至包括文本在内，无论其是静态的还是动态的，都将为我们提供某种方式或手段，从而让我们能够洞察其中的究竟，找出问题的答案，发现形形色色的关系，或许还能让我们理解在其他形式的情况下不易发觉的事情。不过，如今在科学技术研究领域，信息可视化这条术语则一般适用于大规模非数字型信息资源的可视化表达。
现在商业网站的主要存在模式还被限制在宣传网页+电子商务这两者上，只有较少的网站针对web2.0和信息可视化做出彻底的变革。
信息可视化技术的目的是“给信息以形象”，让信息的内容作深入的分析，并通过对原始文献的或者检索结果作可视化处理，刺激用户的感知功能，从而达到提高认知的水平的目的。[1]
作为一名信管专业的学生和忠实的曼联球迷，本人从web2.0和信息可视化的角度构思了这个网站。
它打破了传统球队官方非官方网站 新闻（宣传）+电子商务（SNS社区服务，交友）的限制，Manchester Reunited 把web2.0最具代表性的博客服务特化，用户在Manchester Reunited上传的不再仅仅是文字，而是一个经过可视化组织的信息，具体来说就是可以上传一支球队，长远发展是可以上传到这个球队的方方面面。
Manchester Reunited （下简称MRU），网站的内涵就存在于它的名称当中，“让他们重回梦剧场”----- 打造你心中永远的红魔曼联队。MRU把曼联各个历史时期的球员都汇聚到一起，运用时间序列可视化和层次信息可视化理论把曼联的球员、历史信息融合成了一个网站应用（building team system）,最终再上传到后台服务器并共享给所有人呈现在网络上。
3. 网站实现平台的选择
（1）网站架构开发
本网站的架构采用 基于“组件”（Component ，GUI设计也常称控件）、事件驱动的架构，具体为微软的.NET。采用这种架构是因为它的几个优点：复用性 -代码高度可重用；易于使用 -通常只需要配置控件的属性，编写相关的事件处理函数。使用ASP .NET的理由在于它是编译型的框架，最后生成的代码是编译生成的，不需要再次进行中间过程的诸多处理，所以在第一次执行之后速度会很快，一定程度缓解了基于组件架构的低效率问题。而且，MRU需要对页面中的很多组件设置不同处理操作，但对于性能又要求不是很高，所以基于组件的结构是最适合MRU的。
（2）网站运行环境，见表1
|
服务器环境 |
客户端环境 |
|
MS IIS7 asp.net/xml MS SQL2005 |
目标：oprea11,chrome10，ie9,firefox4 当前：oprea11 only
|
表1
（3）前端页面设计技术
MRU的前端设计采用符合W3C标准的网页设计开发技术。具体应用在：结构化标准语言XHTML；表现标准语言CSS(CSS3)，行为标准的对象模型（DOM）、ECMAScript等。本人还特地用MS expressi-
On design 进行了简单的艺术设计，以更好的表达主题和呈现更好的UI。
（4）后台服务器动态页面技术
MRU的动态页面的开发采用.NET架构的ASP.NET脚本技术，语言为C#。ASP.Net可完全利用.Net架构的强大，安全，高效的平台特性。ASP.Net在运行时进行预绑定（Early Binding）,即时编译，本地优化，缓存服务，零安装配置，基于运行时代码受管与验证的安全机制等都为ASP.Net带来卓越的性能。对XML，SOAP，WSDL等Internet标准的强健支持为ASP.Net在异构网络里提供了强大的扩展性。
（5）数据源与数据整合
MRU的数据源使用XML文件与数据库。XML文件用于存储队伍信息，由于目前开发能力的不足（没有能力掌握XML加密技术），为安全性考虑，用户的信息和资料将保存在数据库内统一管理。XML现在是在网络开发和行政开发中最主流的数据整合工具。所以在今后的扩展中需要通过XML获得更多的关联格式和其他商业格式标准。
（6）数据库
本网站的数据库管理系统使用微软的SQL Server，它可以适合大容量数据的应用，在功能上管理上也都满足需求。MSSQL在处理海量数据的效率，后台开发的灵活性，可扩展性等方面强大。MSSQL可以用存储过程，使查询效率大大增加并且其数据库的大小无极限限制。
二．网站应用设计，细节实现
1.子页面划分，见图2
如图所示，本网站的子页面是按应用功能来划分的，具体分为两大模块，4个内容划分。
第一个模块是主页+内容分页，以html网页呈现。主页起到了导航和重新定位的作用；而内容也则利用JS与DOM进行信息的可视化重组织并与用户进行交互，实现从曼联队史中选择不同历史时期的球星重聚在梦剧场老特拉福德这个场地上（简而言之就是组队系统，在UI与用户交互设计里会详细说明）。
第二个模块是上传+展示，以aspx动态网页实现。在上传页面中即包括了提交后台表单（onserver）把用户数据存储在数据库的表中，也包括了在后台动态的把队伍信息生成XML节点。而在展示页面，页面加载时提取表中最新添加的4个用户ID，并对照这些ID从XML的相应节点中把队伍信息提取出来，最以画廊形式来进行队伍的展示。
2.艺术设计
本人利用 MS expression design 设计了 MRU 的LOGO，内容页的透明图片背景，表单的透明背景。
这里给出LOGO与透明背景的设计：
LOGO
背景
3.UI与用户交互设计
MRU的UI设计践行了以下几条理念：
1）改变视角
传统的桌面视角对于信息的呈现以不是那么有力，而MRU 根据信息可视化理论和组队这一特殊
用将让用户看到一个更加贴切实际的视角。而且对于应用的概念也让人一目了然。
2）简约主义
本人认同用少数的色调和色块去表达简单性概念。因为尽管简约主义本质上是温和的，但是它也展示鲜艳的颜色；简约主义不是冷酷的，它是温暖的，开门见山的。主页根据简约主义会尽量压缩信息。
3）杂志布局
因为越来越多人从传统的打印媒体转移到在线信息娱乐，设计师们会挑战着欢迎这些简单的转变。杂志布局有一个步骤，就是所有信息会小心地放在页面的一块内， 使浏览者有机会去根据兴趣去探索。相似的布局吸引那些曾经看过报纸或者杂志的人。MRU的内容页正式按这种理念进行布局，左侧是梦剧场，而页面的主要内容是像杂志浏览形式一般的球星选择栏，把曼联每个时期的人物都按时间序列可视化理论来进行信息的重组织，最后呈现在页面的右侧。
MRU的应用主要体现在组队系统，这是一个高交互性的系统，只有在有一定交互技巧的支持下，用户体验才能变得更加完美，体会到这个系统的美妙之处，而在表单提交和队伍展示方面也有用到下面的技巧：
1）灵活的logo响应区：logo作为一个重要的可交互元素应该在鼠标划过时提供适当的反馈。
2）灵敏的可交互元素：导航要对鼠标操作及时响应。
3）清晰且温和的提示：加入一些辅助性信息不仅会让用户体验更好也加强了表单验证的严谨性。
4）隐藏或弱化不常用的操作：换句话说就是根据页面具体安排元素，不要干扰用户的阅读。
5）引导和强化推荐操作：适当的引导用户在跳跃性、非线性的浏览体验中是十分必要的。
MRU页面截图：
主页，具体CSS技术应用有div布局，盒子阴影效果，透明向上的导航栏，文字加亮（阴影）
关键CSS代码：
盒子阴影：box-shadow: 0 0 10px #333;
导航栏透明效果：filter:alpha(opacity=50);-moz-opacity:0.5;
-khtml-opacity: 0.5;opacity: 0.8;
文字加亮：text-shadow:0 0 0.12em #F87;
内容页，具体CSS技术应用有div盒子的固定与层叠，JS技术应用有onclick事件动态改变
html标签，cookie保存页面数据（即使刷新或去到其他页面选的人也不会从球场上消失）
关键CSS代码：position:fixed; z-index:-3;
上传页面，具体.NET技术应用有在后台验证表单错误时注册前台JS代码来弹出对话框提示用户
展示页面，具体CSS应用有用ul导航栏标签和float与overflow属性实现的画廊,JS与
.NET技术有前后台变量的互相调用。
关键CSS代码：float: left; overflow:hidden;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
opacity:1.0;
4.数据库表的设计及XML文件
如上面总体设计所述，MRU采用了两种数据源来存储网站的数据，用户的资料与信息保存到数据 库的表中，具体见图3
图3
ID为主键，ID和e-mail不能为空，autoIncreasing为标识列，会自动增长，用于查找最新上传记录所用。
XML文件的节点存储形式见图4
图4
把用户的队伍存储为一个the_team元素，ID与元素的名字都由ID决定也都是唯一的，它的子节点就为队伍的信息了。
5.处理过程设计
（1）模块1 MRU核心应用 Build the team System(组队系统)
图5为系统流程图。该模块主要是前台的交互，应用服务需要JS+DOM对象等技术来完成，其中get him!;cancel;Confirm!;Clear all是四个按钮，分别对应各自的JS函数以完成各自的功能，下面给出函数功能与核心代码。
（2）cancel按钮控件对应的JS函数： clearParent_442(name)
功能如流程图描述，使对应球员下场，具体为清空对应位置标签的内容，参数为球员的名字。
if (name == document.getElementById("…").innerHTML) {
document.getElementById("…").innerHTML = "";
setCookie("…", name, 55);
}
利用DOM的方法getElementById来寻找标签并清空，其中”…”为标签的唯一ID。
（1）get him!按钮控件对应的JS函数： bring_442(name, select)
功能是使球员出现在场上，在指定的位置标签内写入球员名字。
clearParent_442(name);
var position = document.getElementById(select).options[document.
getElementById(select).selectedIndex].value;
switch (position) {
case "…":
{
document.getElementById("…").innerHTML = name;
setCookie("…", name, 55);
break;
}
首先调用 clearParent_422 函数使当前球员先从原来的位置下场，然后再在新的位置上上场，利用了 swich case 语句。
（4）Clear all 按钮控件对应的JS函数： clearAll_442()
把清空球场，所有球员下场，也就是清空所有位置标签的内容。原理同 clearParent_442
（3）Confirm 按钮控件对应的JS函数：confirm_442()
确认，把队伍传到阵容栏内，就是通过DOM对象把html标签内容的转移。原理同bring_442
（5） Upload 按钮控件对应的JS函数：upload_442()
上传，上传前先检查队伍，如阵容齐整的话则转至提交表单的页面。
var judge = 1;
for (metterNO = 0; metterNO < 11; metterNO++) {
var metter = "metter" + metterNO.toString();
if (document.getElementById(metter.toString()).innerHTML == "") {
alert("您的队伍必须完整");
judge = 0;
break;
}
}
if (judge == 1) {
window.location.href = "http://127.0.0.1/期末设计/upload_info.aspx";
}
用循环来依次判断每个元素是否为空，并用一变量记录，若每个标签都有内容则页面跳转。
（2）模块2 提交用户信息和队伍数据并查看
图6为该模块流程图，核心处理过程为验证表单；与数据库的连接，插入提取数据；建立XML文件并查询访问节点。因该模块核心代码较多，注释说明嵌入在代码里。
在后台cs文件验证表单的关键代码（语言c#,下同）：
// Request方法取表单控件值
string sMail = Request["mail"];
// 给一变量来判断表单是否合符验证标准
bool formIsComfirm = true;
// 用正则表达式检测e-mail地址格式的正确性
Regex emailReg = new Regex(@"^([a-z0-9A-Z]+[-|\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-zA-Z]{2,}$");
try
{
if (!emailReg.IsMatch(sMail))
{
// 后台注册前台JS脚本弹出对话框提示用户
Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "yourkey", "<script>alert('您的e-mail地址格式不正确');window.location='upload_info.aspx';</script>");
formIsComfirm = false;
}
} // 用 try catch 块检验输入异常
同理检测ID是否为空还有年龄的正确性（年龄不是必填项但填写就要检查合理性）。
后台数据库操作,cs文件关键代码：
// 连接数据库
string connectionString = "server = …; database = …; integrated security = …;
SqlConnection mySqlConnection = new SqlConnection(connectionString);
mySqlConnection.Open();
// 查询数据库并提取信息（在提交表单时用来查找是否有重复的ID）
string sqlSelect = "…";
SqlCommand cmdSelect = new SqlCommand(sqlSelect, mySqlConnection);
SqlDataReader rData = cmdSelect.ExecuteReader();
while (rData.Read())
{
// 具体操作，通过rData[i].ToString()取到具体表中每条记录的一列？（一条记录的某个元素）
｝
// 读完要做垃圾处理
Data.Close();
cmdSelect.Dispose();
// 往表中插入记录
string sqlInsert = "…"; // 具体sql语句，特别注意一定要符合表的数据类型及各种约束
SqlCommand cmdInsert = new SqlCommand(sqlInsert, mySqlConnection);
cmdInsert.ExecuteNonQuery();
// 执行完语句后手动垃圾处理（这种方式比较有效率也比较安全）
System.Threading.Thread.Sleep(2222);
mySqlConnection.Close();
mySqlConnection.Dispose();
后台操作XML文件 cs文件关键代码：
创建XML文件：
string path = @"…"; // 路径变量，用于判断文件是否存在
if (!File.Exists(path))
｛
XmlDocument xd0 = new XmlDocument(); // 表示XML文档
XmlDeclaration xde; // 表示 XML 声明节点：<?xml version='1.0'...?>
xde = xd0.CreateXmlDeclaration("1.0", null, null); // 参数的第二项为编码方式
xde.Encoding = "UTF-16"; // 决定XML的编码方式
xde.Standalone = "yes"; // standalone定义了是否可以在不读取任何其它文件的情况下处理该文// 档,默认为no
xd0.AppendChild(xde);
XmlElement xe = xd0.CreateElement("Root"); // 创建一个Root根元素
xd0.AppendChild(xe); // Root根元素创建完成
XmlNode root0 = xd0.SelectSingleNode("Root"); // 查找<Root>
xd0.Save(Server.MapPath("teams.xml")); // 保存
｝
加载XML文件：
XmlDocument xd = new XmlDocument();
xd.Load(Server.MapPath("…"));
XmlNode root = xd.SelectSingleNode("Root");
创建子节点：
XmlElement xeTeam = xd.CreateElement("the_team_" + sName); // 在<Root>之下创建元素
xeTeam.SetAttribute("name", sName); // 设定节点属性
xeTeam.InnerText = sName + "'s team"; // 指定属性文本节点
root.AppendChild(xeTeam);
查询节点并提取节点内容：
XmlNodeList nodeList = xmlDoc.SelectSingleNode("Root").ChildNodes; // 提取根节点的孩子节点为节// 点列表
foreach (XmlNode xn in nodeList)
{
XmlElement xe = (XmlElement)xn; // 将子节点类型转换为XmlElement类型
// 具体操作
XmlNodeList nls = xe.ChildNodes; // 继续获取子节点，注意这时不需再转换类型
foreach (XmlNode xn1 in nls) // 遍历
{
// 具体操作
｝
｝
