Web标准与用户体验.css

WebStandardandUserExperienceWeb标准与用户体验版权声明：CreativeCommon(署名-非商业-派生)版权联合：李超&EduBeta.com主题•什么是Web标准?•Web客户端表现层技术的起源与发展•表现(Design)与内容(Content)分离的页面技术•Web标准与用户体验(UE)设计什么是Web标准？Web标准是网站开发中的一系列标准的集合。每一个标准对应网站开发中的每一个环节，如HTML用于表现信息结构，CSS用于表现信息的展示方式，Javascript用于表现信息的简单动态处理等无论是HTML，还是XHTML，还是CSS，javascript,都是Web标准其中之一Web客户端表现层技术的起源与发展Web客户端表现层技术的起源与发展•Web的基本架构与主要功能•Web客户端表现技术的作用•HTML与JavaScript•Gif动画•Css技术•Quicktime、ActiveX控件•FlashWeb的基本架构与主要功能•分布式的Web架构网站服务器(WebServer)Mobile`PCPocketPCUserPC`PC应用服务器(AppsServer)XBox360Web的基本架构与主要功能•通过客户端与服务器端技术，向用户提供信息与服务服务器端(Server)`客户端(Client)User服务(Service)Web客户端表现层技术的作用•什么是客户端技术?客户端技术是一个广义的概念，他表示的是客户端与服务器端进行信息交换与展现的技术User`PCServer展现信息获得信息与数据交换Web客户端表现层技术的作用客户端表现层技术是指将从服务器端获得的信息进行展现与表现的技术•什么是客户端表现层技术?User`PCServer展现信息获得信息与数据交换Web客户端表现层技术的作用客户端表现层技术的最终目的是为用户提供最优质的信息，使用户拥有最好的用户体验(UserExperience)•客户端表现层技术的最终目的HTML与Javascript•历史–1945年,VannevarBush表达了一种文本之间超级链接相互关联的思想–1960年TedNelson为关联技术命名为超文本(Hypertext)–1969年IBM发明了GML语言用于描述超文本信息–1990年，HTML延生–1996年，Netscape开始支持JavaApplets和Javascript,同时IE3.0开始支持同样的技术HTML与Javascript•HTML的作用–最初仅仅作为实现一种非线性的信息组织而设计线性的非线性的HTML与Javascript•目前的HTML4.0–已经是一种非常成熟的页面描述语言，除了信息的组织，还有一定的设计功能，能对版式、字体颜色及图片等信息做出控制。Gif动画•早期的HTML纯文本网页满足不了对丰富图片信息的表现，于是GIF动画出现css技术•CSS是一种专注于对信息的视觉表现进行控制的技术。CSS的目标是用来取代HTML中的“设计”部分，使HTML专注于信息整理，而CSS来专注于信息的视觉表现•优秀的CSS与HTML设计使内容与表现完全分离，以更好的结构来展示信息，使得信息易于展现并易于修改Quicktime、ActiveX控件•网络趋向于多媒体形式的展示、通过Quicktime、ActiveX实现在网页中的视频与音乐播放。Flash•目前最优秀的互动表现技术、丰富用户体验•通过FLASH开发环境或编程实现与用户的实时交互•丰富的媒体支持及动画制作•是目前为品牌用户建立线上推广、为用户提供优秀交互界面的强大工具表现(Design)与内容(Content)分离的页面技术表现(Design)与内容(Content)分离的页面技术•什么是表现与内容？•为什么要实现表现与内容的分离？•XHTML与CSS的协同作战•高效开发•易于维护•其它方面优势•现阶段的问题什么是表现(Design)与内容(Content)？•内容是指具体的信息，仅仅表示信息正文及各部分的名称，如标题、作者、正文、图片•表现是指信息的展示形式，如标题使用16号黑体，正文使用12号宋体、图片采用文绕图间距10px的排列方式等内容(Content)表现(Design)什么是表现(Design)与内容(Content)？•使用传统的HTML来表现(Design)–设计方式复杂–控制区域较多–代码繁杂易读性差•表现与内容分离的技术–设计简单–易于控制–代码简单–易于修改什么是表现(Design)与内容(Content)？•DIV元素的掌握是表现与内容分离的基础传统表格式排版DIV排版更自由为什么要实现表现与内容的分离？•分离使得网站代码可维护性提高•分离使代码重用得到可能，大幅提高开发效率•重用使得代码量可以成倍减少，减轻服务器负担使得降低宽带成本成为可能•加快浏览器解析速度使用户阅读更快捷迅速为什么要实现表现与内容的分离？•分离技术使我们在制作网站的时候能够充分对网站统一性、可用性进行思考与设计，提高网站可用性，改善用户体验XHTML与CSS的协同作战•推荐使用XHTML+CSS的方式来对网站进行编码我们的应用级设计对象是用户,但代码级的设计目标是机器•使用DreamweaveMX2004或后续版本进行可视化开发高效开发•Macromedia.com–不同排版模式的高效重用div.columns-4-ABCD-A,div.columns-4-ABCD-B,div.columns-4-ABCD-C,div.columns-3-aaBcc-aa,div.columns-3-aaBcc-B,div.columns-3-aabbC-aa,div.columns-3-aabbC-bb,div.columns-3-ABC-A,div.columns-3-ABC-B,div.columns-2-aaB-aa,div.columns-2-Abb-A,div.columns-2-AB-A{padding:08px;margin-bottom:0.5em;float:left}ID定义易于维护•Macromedia.com–良好的规划与组织是维护的关键–多个CSS协调工作、层次清晰@importurl(/css/fonts.css);@importurl(/css/master.css);@importurl(/css/globalnav.css);@importurl(/css/globalfooter.css);@importurl(/css/styles.css);@importurl(/css/layout.css);@importurl(/css/columns.css);@importurl(/css/image_wrappers.css);@importurl(/css/forms.css);@importurl(/css/data.css);@importurl(/css/themes.css);易于维护•Macromedia.com–对信息区域的合理设计是维护的关键其它方面优势•分离使得设计人员、程序人员更好的独立工作•分离使内容转换到其它平台的成本更低•…现阶段的问题•浏览器对CSS支持的不完善•相同浏览器的不同版本、不同操作系统下显示不同•不同浏览器对CSS的支持是不同的Web标准与用户体验(UE)设计Web标准与用户体验(UE)设计•网站与用户体验（UE）的关系•Web标准帮助我们对用户体验进行思考•用户体验的几个思考过程•案例网站与用户体验（UE）的关系•用户体验是什么？WhatisUserExperneice?•网站是一个“自服务式”的产品•通过改善用户体验使网站所有者受益Web标准帮助我们对用户体验进行思考•Web标准设计的难点在于对网站的信息结构进行合理分配，归纳，设计–设计合理的网站层次–设计合理的导航系统–设计合理的版式结构–…•只有合理的网站信息结构的设计，才能让Web标准所支持的分离式结构有用武之地用户体验的思考过程•与用户一起走一篇用户体验的思考过程•与用户一起做一篇用户体验的思考过程•让用户感受细节案例