web2.0及其相关技术

一    什么是web2.0?

1     产生的背景

1)        互联网质的变化-互联网正在升级换代

截至2005 年12 月底，全球有9 亿多互联网用户，中国有1.11 亿多互联网用户。

量变会引发质变，互联网上不仅仅是量的变化，成员扩充到一定阶段必然引发质的变化。而今天和未来一段时间我们和业界都感觉到互联网正在经历这样重大的变革，互联网正在升级换代，不仅仅单纯是技术上的，这次更多是互联网社会体制的变化，我们今天笼统将其称之为web2.0（互联网2.0）的抽象概念，而实际上带来的东西可能会超出我们的想象，因为我们知道，社会体系的变化是深层次的变化，整个会引起生产关系和生产力的变化从而激发出新的量级的效率和财富。

2)        互联网用户强劲的个性独立和社会化需求

互联网用户需求和行为一直是互联网产业所关注的重心。

个性独立和社会化是今天互联网用户日益深化的需求，也是未来不可阻挡的趋势。而两者并不矛盾，个性独立是社会化的前提。

互联网-web2.0 其本质是社会化的互联网，是要重构过去的少数人主导的集中控制式的体系而更多关注个体以及在个体基础上形成的社群并在充分激发释放出个体能量的基础上带动体系的增长。

l 个性独立起因

个性独立需求始终是存在的，这是独立的人的基本需求，会延伸到网络社会中，而个性独立今天爆发出来的原因在于

n 技术和理念的发展使得互联网用户自我呈现表达的门槛降低

n 得到重视和仿效：由于越来越多的人表达出自己，很多人由于内心需求的驱动纷纷仿效并开始形成一种现象

n 互联网用户需求在深化，在很多基本需求被满足以后，有了社会交往和个性表达的深入需求

l 社会化起因

人多了就会形成各种隐性的（看不见的）、显性的（看的见的）千丝万缕的联系，互联网上也是如此。今天和未来是一个开放的社会，一个趋于真实社会的社会，今天的社会学理论（例如六度分隔理论以及社会资本、社会性网络）同样也在互联网社会中得到实践和验证并推动网络社会的和谐，而今天的互联网社会和商业体制也在社会化的浪潮中开始升级换代。

3)        互联网创新应用和创新思考的积累

公众互联网的商业发展经历了若干年（中国十年，美国十五年），留给今天业者的思考就是：为什么有些互联网公司取得了非凡的成功，而有些互联网公司却消失了或苦苦挣扎？这些成功的互联网公司其成功的决定性因素是什么？还有一些新涌现的现象，例如博客（blog）在蓬勃的发展，一些新的创新应用的轻量型的公司在给用户带来非凡的体验。而这些似乎都有一些共同之处，有一个隐型的纽带在联结。

这都是业者思考的问题，而到2004 年这些创新的思考的片段汇聚在了一起，逐渐在业者的讨论中形成了系统的理论和思想体系并不断被人认识、思考、完善和应用，这个系统的理论和思想体系就是web2.0。

2.         概念的提出

2004 年，O'Reilly 公司和MediaLive 国际公司之间的头脑风暴产生了web2.0 的概念。O'Reilly 公司副总裁戴尔·多尔蒂(Dale Dougherty)注意到，同互联网“崩溃”的说法迥然不同，互联网比其他任何时候都更重要，令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更重要的是，那些幸免于当初网络泡沫的公司，看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折？Web 2.0（互联网2.0）的概念由此诞生。

3.         web2.0的是什么?

Web2.0是什么？很多人在说，又好像所有的人都无法说清。可以肯定地是Web2.0不是一种单纯的技术变革，不是一-种简单的诸如C2C、IM这样可以描述出来的相对独立的服务或应用

web2.0 目前没有一个统一的定义，它只是一个符号，表明的是正在变化中的互联网，这些变化相辅相成，彼此联系在一起，才促使互联网出现今天的模样，才让社会性、用户、参与和创作浮到表面成为互联网文化的中坚力量并表征了未来

互联网协会对web2.0的定义是：

web2.0是互联网的一次理念和思想体系的升级换代，由原来的自上而下的由少数资源控制者集中控制主导的互联网体系转变为自下而上的由广大用户集体智慧和力量主导的互联网体系。web2.0 内在的动力来源是将互联网的主导权交还个人从而充分发掘了个人的积极性参与到体系中来，广大个人所贡献的影响和智慧和个人联系形成的社群的影响就替代了原来少数人所控制和制造的影响，从而极大解放了个人的创作和贡献的潜能，使得互联网的创造力上升到了新的量级。

4.         与web1.0的对比

其实互联网上本没有web1.0，web2.0，说得人多了也就有了，web1.0泛指web2.0概念产生之前即2003年之前互联网的应用的统称

	web 1.0	web 2.0
时间	1993-2003	2003-?
表现形式	通过浏览器浏览大量网页	网页，加上很多通过web分享的其他“内容”，更加互动，更像一个应用程序而非一个“网页”
模式	“读”	“写”和贡献
主要内容单元	“网页 ”	“帖子/记录”(微内容)
形态	“静态 ”	“动态 ”(聚合)
浏览方式	浏览器	浏览器、RSS阅读器、其他
体系结构	客户服务器	“web 服务”
内容创建者	网页编写者	任何人
主导者	“geeks”极客	“大量业余人士 ”
旗手	netscape, yahoo, google	google

 

微内容:

由用户所生产的任何数据都算是微内容，比如一则网志，评论，图片，收藏的书签，喜好的音乐列表、想要做的事情，想要去的地方、新的朋友等等。这些微内容，充斥着我们的生活、工作和学习，它的数量、重要性，还有我们对它的依赖，并不亚于那些正统文章、论文、书籍。

极客:

六度分隔理论:( Six Degrees of Separation)

1967年，哈佛大学还是耶鲁的心理学教授Stanley Milgram （1933～1984）米尔格兰姆设计了一个连锁信件实验。他将一套连锁信件随机分送给居住在内布拉斯加州奥马哈的160个人，信中放了波士顿股票经济人的名字，信中要求每个收信人将这套信寄给自己认为比较接近那个经济人的朋友，朋友收到信后照此办理，最终大部份信经过五、六个步骤后抵达该股票经济人。根据这个实验的结果，他创立六度分隔理论，简单地来说，六度分隔就是在这个社会里，任何两个人建立一种联系，最多需要六个人(包括这两个人在内)，无论这两个人是否认识，生活在地球的任何地方，他们之间间所间隔的人不会超过六个，也就是说，最多通过六个人你就能够认识任何一个陌生人。”

:

Web 1.0 is making the internet for people，web 2.0 is making the internet better for computers

web1.0是为人创造internet, 经常谈到的是门户，内容，商业模式，封闭，大而全，以网站为中心,它是一对一的(网站对用户)。

web2.0是为计算机更好的创造internet，相对于web1.0谈论的是个性化，应用，服务，开放，聚合，以个人为中心，它是社会性网络(用户对用户)。

netscape: 研发出第一个大规模商用的浏览器

yahoo:     杨致远提出了互联网黄页，将网站进行分类。

google:    后来居上，推出了大受欢迎的搜索服务

netscape: 以传统的软件摹本来勾勒其所谓的“互联网作为平台”：其旗舰产品是互联网浏览器，一个桌面应用程序。同时，他们的战略是利用其在浏览器市场的统治地位，来为昂贵的服务器产品建立起市场。最终，浏览器和网络服务器都变成了“日用品”，同时价值链条也向上移动到了在互联网平台上传递的服务。

google: 以天生的网络应用程序的角色问世，它从不出售或者打包程序，而是以服务的方式来传递。没有了定期的软件发布，只需要持续的改善。没有了许可证或销售，只需要使用。没有了平台迁移，只需要搭建宏大的、由众多个人计算机组成的、可伸缩的网络，其上运行开源操作系统，及其自行研制的应用程序和工具，而公司之外的任何人则永远无法接触到这些东西。

 

关于web1.0是为人创造internet而web2.0是为计算机更好的创造internet的解释:

World Wide Web，简称WWW，是英国人TimBerners-Lee 1989年在欧洲共同体的一个大型科研机构任职时发明的。通过WEB，互联网上的资源，可以在一个网页里比较直观的表示出来；而且资源之间，在网页上可以链来链去。在WEB1.0上做出巨大贡献的公司有Netscape，Yahoo和Google。 Netscape研发出第一个大规模商用的浏览器，Yahoo的杨致远提出了互联网黄页，将互联网进行了分类，而Google后来居上，推出了大受欢迎的搜索服务。

搜索最大的贡献是，把互联网上海量的信息，用机器初步分了个线索。但是，光知道网页里有哪些关键字，只解决了人浏览网页的需求。所以，Tim-Berners-Lee在提出WWW不久，即开始推崇语义网（Semantic Web）的概念。为什么呢？因为互联网上的内容，机器不能理解。他的理想是，网页制作时和架构数据库时，大家都用一种语义的方式，将网页里的内容表述成机器可以理解的格式。这样，整个互联网就成了一个结构严谨的知识库。从理想的角度，这是很诱人的，因为科学家和机器都喜欢有次序的东西。Berners-Lee关心的是，互联网上数据，及能否被其它的互联网应用所重复引用。举一个例子说明标准数据库的魅力。有个产品叫LiberyLink。装了它后，到Amazon上去浏览时，会自动告诉你某一本书在用户当地的图书馆能否找到，书号是多少等。因为一本书有统一的书号和书名，两个不同的互联网服务（Amazon 和当地图书馆数据库检索）可以公享数据，给用户提供全新服务。

但是，语义网提出之后，曲高和寡，响应的人不多。为什么？因为指望要网页的制作者提供这么多额外的信息去让机器理解一个网页，太难；简直就是人给机器打工。这违反了人们能偷懒就偷懒的本性。看看Google的成功就知道。 Google有个Page Rank技术，将网页之间互相链接的关系，用来做结果排序的一个依据，变相利用了网页制作人的判断力。想一想网页的制作者们，从数量来说，比纯浏览者的数量小得多。但Google就这一个革新，用上了网页的制作者的一部份力量，已将其推上了互联网的顶峰。

所以互联网下一步，是要让所有的人都忙起来，全民织网，然后用软件，机器的力量使这些信息更容易被需要的人找到和浏览。如果说WEB1.0是以数据为核心的互联网，那么WEB2.0可以说是以人为出发点的互联网。

二    web2.0的特征

l 互联网成为平台（参与体系）而不是利用互联网来统治和控制；

l 充分重视并利用集体力量和智慧；

l 将数据变成“Intel Inside”；

l 分享和参与的架构驱动的网络效应；

l 通过带动分散的、独立的开发者把各个系统和网站组合形成大汇集的改革；

l 通过内容和服务的联合使轻量的业务模型可行，分享经济的模式；

l 注重用户体验的持续的服务（“永久的Beta 版”）；

l 服务和应用无处不在（非单机版和单一平台版本）；

l 不仅仅是少数重要用户，而是渗透到全体用户，包括大量的普通用户，要有拉动长尾的能力；

长尾:

 

 

三    web2.0的应用及成功案例

1.         blog

Blog是个人或群体以时间顺序所作的一种记录，且不断更新。Blog之间的交流主要是通过反向引用（TrackBack ）和留言/ 评论（Comment ）的方式来进行的。Blog的作者（Blogger ），既是这个Blog的创作人，也是其档案管理人。

 

TrackBack：是一种Blog应用工具，它可以让Blogger 知道有哪些人看到自己的文章后撰写了与之有关的内容。这种功能实现了网站之间的互相通告；因此它也可以看作一种提醒功能。

在Web 2.0 的世界中，Blog（中文翻译作“网志”、“博客”）绝对是个“招牌菜”，它已获得了广泛的知名度，代表个人媒体的崛起。

“911 事件”是Blog发展史上的里程碑阶段。人们发现，恐怖事件现场当事人建立的Blog才是最可能给出第一手和最真实信息的人。一个重要的博客类战争Blog（WarBlog ）因此繁荣起来。“对911 事件最真实最生动的描述不在《纽约时报》，而在那些幸存者的Blog中”一位Blog作者写道。

在中文世界，让“博客”一举成名的人当属“木子美”，她对个人隐私毫不避讳的曝光，完全颠覆了中国人的伦理传统。网民们蜂拥而至“木子美”的Blog，“木子美”私生活曝光的同时，Blog也走进大众传播领域。

Blog并不是一个充满技术含量的概念，为了便于理解，你甚至可以把它看作以时间为顺序更新的个人主页。Blog的可贵之处在于，它让世人认识到，写作并不是媒体的专利，新闻也不是记者的特权。再眼疾手快的记者也不如在现场的人更了解事实。目击者的Blog比新闻记者拥有更高的权威和更接近事实的判断。

在亚洲，韩国人Oh Yeon Ho创立的Blog网站已经成为韩国重要的媒体力量，通过发动全社会的力量，无论是韩国总统卢武铉遭弹劾事件，还是韩国人金善逸在伊拉克遭到绑架并被杀害事件，都走在了韩国各大媒体的前列。这个网站的一条新闻上竟然有85000 条评论，远超过其他媒体互动水平。

著名硅谷IT专栏作家丹。吉尔默总结说，Blog本身代表着“新闻媒体3.0”。1.0是指传统媒体或说旧媒体（Old Media ，如“晚报、CCTV”），2.0 就是人们通常所说的新媒体（New Media ，如新浪、雅虎）也叫作跨媒体，3.0 就是以Blog为代表的（We Media）的个人媒体或者叫自媒体。

Blog发展到现在，内容已并不仅局限于文字。图片、音频和视频都是可选项，而音频Blog就有一个自己的名字—Podcast （国内翻译为“播客”）。Blog搭起从互联网阅读时代到写录时代的桥梁。

2.         wiki

Wiki是Web 2.0 体系下的又一个概念。Wiki可以简单地解释为由网友自发维护的网络大百科全书，这个大百科全书由网友自发编辑并修改内容，每个人既可以是某个词条的读者，又可以是这个词条的编撰者，读者和编辑的界限在Wiki中被模糊了。首个Wiki网站的创建者WardCunningham说：“我创建第一个Wiki的初衷就是要建立一种环境，我们能够交流彼此的经验。”

3.         tag

标签是一种更为灵活、有趣的日志分类方式, 可以让你为自己所创造的内容（Blog文字、图片、音频等）创建多个用作解释的关键字。比如一副雪景的图片就可以定义“雪花”、“冬天”、“北极”“风景照片”这几个。.雅虎刚刚收购的图片共享网站Flickr就对此提供支持。Tag 类似于传统媒体的“栏目”，它的相对优势则在于创作者不会因媒体栏目的有限性而无法给作品归类，体现了群体的力量，使得日志之间的相关性和用户之间的交互性大大增强，其核心价值是社会化书签SocialBookmark，用于分享多人的网络书签

4.         sns

social network service, 社会性网络服务，依据六度分隔理论，以认识朋友的朋友为基础，扩展自己的人脉，便于在需要的时候可以随时获取一点，得到该人脉的帮助。sns网站，就是依据六度分隔理论建立的网站，帮你运营朋友圈里的朋友。

Google推出1GB 免费信箱也是一个SNS 应用，通过网友之间的互相邀请，Gmail 在很短的时间内就获得了巨大的用户群。

5.         rss

RSS是一种用于共享新闻和其他Web内容的数据交换规范，起源于网景通讯公司netscape的推"Push"技术，将订户订阅的内容传送给他们的通讯协同格式(Protocol)。主要版本有0.91、1.0和2.0。广泛用于blog、wiki和网上新闻频道。借助RSS ，网民可以自由订阅指定Blog或是新闻等支持RSS的网站（绝大多数的Blog都支持RSS ），也就是说读者可以自定义自己喜欢的内容，而不是象Web 1.0 那样由网络编辑选出读者阅读的内容。世界多数知名新闻社网站都提供RSS订阅支持。它的核心价值在于颠覆了传统媒体中心的理念。雅虎首席运营官丹尼尔。罗森格告诉记者，“（对传统媒体的）颠覆倒不敢说，但RSS 重新定义了信息分享的方法，颠覆了未来信息社会必须有一个核心的理念，虽然RSS 眼下并不会为网络广告带来什么帮助，但是却能让所有人更好地分享信息。”

 

 

web2.0 vs BBS

blog 的互动与传统BBS 有何不同？ Blog是集原创文章、链接评价、链接、网友跟进于一体的，比起BBS 那种口无遮拦、随心所欲、良莠不齐的情绪化发言，博客制作的日志更加审慎、仔细和周详，其单个文本的丰富性、讨论脉络的清晰度、论题的拓展空间都超过了BBS 的网友发言帖子。

Wiki vs BBS，BBS没有上下文的概念，讨论经常无法持久地进行。讨论组反复围绕着同一个话题，但是人们经常忘了以前说过什么，讨论的内容无法积累和沉淀。

wiki vs blog

Wiki站点一般都有着一个严格的共同关注，Wiki的主题一般是明确的坚定的。Wiki站点的内容要求着高度相关性。最其确定的主旨，任何写作者和参与者都应当严肃地遵从。Wiki的协作是针对同一主题作外延式和内涵式的扩展，将同一个问题谈得很充分很深入。

Wiki非常适合于做一种 “All about something”的站点。个性化在这里不是最重要的，信息的完整性和充分性以及权威性才是真正的目标。Wiki由于其技术实现和含义的交织和复杂性，如果你漫无主题地去发挥，最终连建立者自己都

会很快的迷失。

Wiki使用最多也最合适的就是去共同进行文档的写作或者文章/书籍的写作。特别是技术相关的（尤以程序开发相关的）FAQ，更多的也是更合适地以Wiki来展现。

Blog是一种无主题变奏，一般来说是少数人（大多数情况下是一个人）的关注的蔓延。一般的Blog站点都会有一个主题，凡是这个主旨往往都是很松散的，而且一般不会去刻意地控制内容的相关性。

Blog注重的是个人的思想（不管多么不成熟，多么地匪夷所思），个性化是Blog的最重要特色。Blog注重交流，一般是小范围的交流，通过访问者对一些或者一篇Blog文章的评论和交互。

Blog也有协作的意思，但是协作一般是指多人维护，而维护者之间可能着力于完全不同的内容。这种协作在内容而言是比较松散的。任何人，任何主题的站点，你都可以以Blog方式展示，都有它的生机和活力。

四    应用举例

       1.    Flickr 是一个分享图片的社会化网络

              Flickr利用用户产生的内容连接起一个社会网络。

用户可以合作并利用彼此的Tags(标签)来发现新的图片。

Flickr还提供了API（应用程序接口）用来将收藏的图片与Blog和其它应用整合起来。

 

       2.    美味书签是一个使用“分众分类”社会化书签

       3.    Wikipedia 是一个可以被任何人实时编辑的，合作而成的百科全书

 

五 web2.0在教育中的思考

       由前面的表可以看出，web1.0向web2.0的升级换代，创设的是新型的结构与内容的契合关系，得到的是更优秀的用户体验；把“web”换成“教育”，是否有迹可寻呢？

       现代新教育理念与web2.0有许多类似的地方。Web2.0时代用户不再围着门户网站作圆周运动，用户变被动的信息接受者为信息的发布者，用户可以在网络中充分体验，在互联网上交流互动。新教育理念强调以学生为主体，让学生主动地获取知识、锻炼能力，为学生创造一个宽松和谐的环境，学生在教育中互动、分享，充分体验到学习的快乐。 根据web2.0与1.0的比较表，可以依葫芦画瓢试对教育2.0与1.0的作一比较：

      

	教育1.0	教育2.0
模式	一个师教生学的单向知识灌输渠道 单向传输	师生共同创建的一个建构知识、分享知识、促进交流、共同发展的空间 互动探究
基本构成单元	教材	学生认识水平、规化指导文字
教学形态	讲授、习题、作业	问题、思考、交流、反馈、推广
知识结构	教材	教材、资料、教学用具、观察实践、信息媒体、他人等
内容创建者	教师	教师组织引导学生共同创建
教育主导者	教师	教育过程中全体参与者
师生关系	教师权威	师生平等的伙伴关系
学生地位	单纯的学习者	学习的主体、研究团队中的个体
教师地位	单纯的传授者	管理者、帮促者，研究团队中的个体

 

五    web2.0的相关技术

1)      web标准

a)         什么是web标准

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

b)        相应的标准

l XML

XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（​​www.w3.org/TR/2000/REC-XML-20001006​​）。 和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息 发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。

l XHTML

XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http: //www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时 过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的 过渡。

l CSS

CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考​​http://www.w3.org/TR/CSS2/​​）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

l DOM

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（​​http://www.w3.org/DOM/​​）， DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和 Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

l ECMAScript

ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（​​http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM​​）。

c)         web标准的目的

我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996- 1999年典型的"浏览器大战"，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现， 我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对 某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。

如何解决这些问题呢？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft 等)也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网 站标准组织（​​webstandards.org​​）的督促下推广执行。

简单说，网站标准的目的就是：

·         提供最多利益给最多的网站用户

·         确保任何网站文挡都能够长期有效

·         简化代码、降低建设成本

·         让网站更容易使用，能适应更多不同用户和更多网路设备

·         当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。

d)        采用web标准的好处

对网站浏览者的好处

·         文件下载与页面显示速度更快；

·         内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；

·         内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）

·         用户能够通过样式选择定制自己的表现界面

·         所有页面都能提供适于打印的版本

对网站所有者和开发者的好处

·         更少的代码和组件，容易维护

·         带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。

·         更容易被搜寻引擎搜索到

·         改版方便，不需要变动页面内容

·         提供打印版本而不需要复制内容

·         提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

e)         怎样过渡

我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程，使现有网站符合网 站标准也不可能一步到位。最好的方法是循序渐进，分阶段来逐步达到完全符合网站标准的目标。如果你是新手，或者对代码不是很熟悉，也可以采用遵循标准的编 辑工具，例如Dreamweaver MX 2004，它是目前支持CSS标准最完善的工具。

l 初级改善

n 为页面添加正确的DOCTYPE

很多设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以， 如果你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择：

1)        过渡型（Transitional ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2)        严格型（Strict ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3)   框架型（Frameset ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

对于我们初级改善来说，只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等，不至于让你觉得变化太大，难以掌握。

 

n 设定一个名字空间

直接在DOCTYPE声明后面添加如下代码：

<html XMLns="http://www.w3.org/1999/xhtml" >

一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

 

n 声明你的编码语言

为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

n 用小写字母书写所有的标签

XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的

n 为图片添加 alt 属性

为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性

n 给所有属性值加引号

在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号,是向XML过渡的要求

n 关闭所有的标签

在XHTML中，每一个打开的标签都必须关闭

 

经过上述七个规则处理后，页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务 （http://validator.w3.org/）。发现错误后逐个修改。在后面的资源列表中我们也提供了其他校验服务和对校验进行指导的网址，可以 作为W3C校验的补充。当最后通过了XHTML验证，恭喜你已经向网站标准迈出了一大步。不是想象中的那么难吧

 

l 中级改善

接下来我们的改善主要在结构和表现相分离上，这一步不象第一步那么容易实现，我们需要观念上的转变，以及对CSS2技术的学习和运用。但学习任何新知识都 需要花点时间的，不是吗？诀窍在于边做边学。假如你一直采用表格布局，根本没用过 CSS，也不必急于跟表格布局说再见，你可以先用样式表代替 font 标签。随着你学到的越多，你能做的就越多。好，一起来看看我们需要做哪些事

n 用CSS定义元素外观

我们在写标识时已经养成习惯，当希望字体大点就用<h1>，希望在前面加个点符号就用<li>。我们总是想< h1>的意思是大的，<li>的意思是圆点，<b>的意思是“加粗文本”。而实际上， <h1>能变成你想要的任何样子，通过CSS，<h1>能变成小的字体，<p>文本能够变成巨大的、粗体的， <li>能够变成一张图片等等。我们不能强迫用结构元素实现表现效果，我们应该使用CSS来确定那些元素的外观。例如，我们可以使原来默认的 6级标题可以看起来大小一样：

h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }

n 用结构化元素代替无意义的垃圾

许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现，而不是结构。例如，一段列表内容可能会使用下面这样的标识：

句子一<br /> 句子二<br /> 句子三<br />

如果我们采用一个无序列表代替会更好：

<ul> <li>句子一</li> <li>句子二</li> <li>句子三</li> </ul>

你或许会说“但是<li>显示的是一个圆点，我不想用圆点”。事实上，CSS没有设定元素看起来是什么样子，你完全可以用CSS关掉圆点。

n 给每个表格和表单加上id

给表格或表单赋予一个唯一的、结构的标记，例如

<table id="menu">

接下来，在书写样式表的时候，你就可以创建一个“menu”的选择器，并且关联一个CSS规则，用来告诉表格单元、文本标签和所有其他元素怎么去显 示。这样，不需要对每个<td>标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记（标记 “menu”的id标记），你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。

中级改善我们这里先列主要的三点，但其中包含的内容和知识点非常多，需要我们逐步学习和掌握，直到最后实现完全采用CSS而不才用任何表格实现布局

 

 

1)      ajax

a)            ajax的定义

AJAX全称为“Asynchronous JavaScript and XML”（异步​​JavaScript​​和​​XML​​），是一种创建交互式网页应用的网页开发技术。Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括:

l 使用​​XHTML​​+​​CSS​​来表示信息

l 使用​​JavaScript​​操作​​DOM​​（Document Object Model）进行动态显示及交互

l 使用 ​​XML​​ 和 ​​XSLT​​ 进行数据交换及相关操作

l 使用 ​​XMLHttpRequest​​对象与Web服务器进行异步数据交换

l 使用 JavaScript 将所有的东西绑定在一起。

b)           与传统web应模型的对比

图1: 传统Web应用模型(左)与Ajax模型的比较(右).

 

图 2: 传统Web应用的同步交互过程(上)和Ajax应用的异步交互过程的比较(下).

传统的web​​应用模型​​工作起来就象这样：大部分界面上的用户动作触发一个连接到​​Web服务器​​的HTTP 请求。服务器完成一些处理---接收数据，处理计算，再访问其它的数据库系统，最后返回一个HTML页面到客户端。这是一个老套的模式，自采用超文本作为 web使用以来，一直都这样用,这就限制了Web界面没有桌面软件那么好用。

这种旧的途径让我们认识到了许多技术，但它不会产生很好的用户体验。当服务器正在处理自己的事情的时候，用户在做什么？没错，等待。每一个动作，用户都要等待。很明显，如果我们按桌面程序的思维设计Web应用，我们不愿意让用户总是等待。当界面加载后，为什么还要让用户每次再花一半的时间从服务取数据？实际上，为什么老是让用户看到程序去服务器取数据呢？

c)            ajax好处

1) 减轻服务器的负担

因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担

2) 无刷新更新页面，减少用户实际和心理等待时间

首先，“按需取数据”的模式减少了数据的实际读取量，其次，即使要读取比较大的数据，也不用像RELOAD一样出现白屏的情况，由于Ajax是用XMLHTTP发送请求得到服务端应答数据，在不重新载入整个 页面的情况下用Javascript操作DOM最终更新页面的，所以在读取数据的过程中，用户所面对的也不是白屏，而是原来的页面状态（或者可以加一个 LOADING的提示框让用户了解数据读取的状态），只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的，用户几乎感觉不到。

3) 更好的用户体验

4)      也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本

5) Ajax由于可以调用外部数据

6) 基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序

7) Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离）

d)           ajax的问题

l 搜索引擎不友好

l 一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax

l 用JavaScript作的Ajax引擎，JavaScript的兼容性和调试都是让人头痛的事

l Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚

现在的数据是新的还是已经更新过的

l 对流媒体的支持没有FLASH、Java Applet好

e)            ajax框架及分类

1.             Aplication frameworks

应用程序框架, 通过窗口生成组件建立GUI

l Bindows

l BackBase

l DOJO

l qooxdoo

2.             Infrastructural frameworks:

提供基本的框架功能和轻便式浏览器端操作，让开发者去创建具体应用，主要功能包括：

l 基于XMLHttpRequest组件的浏览器交互功能

l XML解析和操作功能

l 根据XMLHttpRequest的返回信息进行相应的DOM操作

l 一些特殊情况下，和其他的浏览器端技术如Flash（或Java Applets）等集合到一起应用

 

l AjaxCaller

l Flash JavaScript Integration Kit

l Google AJAXSLT

 

3.             基于服务器端的应用框架通

n HTML/JS生成: 通过服务器端生成HTML和JS代码在传递给浏览器端进行直接运行

n 远程交互: JavaScript调用服务器端函数(例如调用Java函数)并返回给JavaScript的回调句柄，或者请求服务器端数据信息，例如Session信息，数据库查询等

 

l Echo 2

l Direct Web Remoting (DWR)

 

f)            ajax应用

l http://mail.google.com

l http://maps.google.com

l http://www.flickr.com/