第四章 媒体项目开发

第四章媒体项目开发计算机主机（CPU、RAM）纸质图片声音视频远程计算机网络交换文本感觉媒体存储媒体表现媒体表示媒体表现媒体传输媒体纸质图片声音视频文本感觉媒体磁盘、光盘等输入设备输出设备4．1数字媒体出版角度看媒体分类感觉媒体——最终传达给读者（使用者）感觉的形式。媒体的研究以用户感受（感觉媒体）为出发点和目标表示媒体——文字、音乐、图像等信息的编码、组织、加工，技术处理方式表现媒体——接收设备，信息终端。影响受众的范围和使用方式存储媒体——载体，复制品中介物。物的属性，出版物存在形式传输媒体——信息传递方式。发行与传播形式数字出版中表现媒体、存储媒体、传输媒体的关系！数字媒体数字媒体以信息科学和数字技术为主导以大众传播理论为依据以现代艺术为指导将信息传播技术应用到文化、艺术、商业、教育和管理等领域《2005中国数字媒体技术发展白皮书》数字媒体是数字化的内容作品，以现代网络为主要传播载体，通过完善的服务体系，分发到终端和用户进行消费的全过程数字媒体数字媒体技术是通过现代计算和通信手段综合处理各种信息使抽象的信息变成可感知、可管理和可交互的技术手段对象目的4．2媒体表现4．2．1媒体特征及其性质不同类型的媒体所表达的信息的程度不同每种媒体有自己承载信息的形式特征，人类对不同种类信息的接受程度和理解不同一般来说，越接近人类原始表达的信息越丰富，但也越模糊，如人类的表情，动作；越是抽象化（即远离原始信息的表达）的信息，所含信息量越少，但也越精确，如数字，符号等提供具体信息的媒体使用于最初的探索阶段，能描述抽象概念的文本媒体使用于最后的分析阶段，而直观信息介于两者之间，比较适合于综合媒体的信息表现媒体的信息表现信息系统角度看，不同类型的媒体数据适合表示的媒体信息不同，数据组织和处理的方法也不同文本适合于表现抽象的概念和从各方面刻划细节图形适合于表述事物的轮廓以及蕴涵大量数值数据内在联系的趋势性信息视频适合于表现真实的场景声音与视频同时出现时，适用于说明和示意，或起到效果渲染和烘托作用。也可在强调听觉的地方单独出现运动媒体则可反映用户直接的交互意图有目的的直接经验设计模型、模拟学习环境(间接的经验）演戏的经验观摩示范参观、访问、考察参观展览电视电影录音、广播

静画视觉符号抽象的形象的能动的语言符号戴尔经验之塔最底层的经验最具体，越往上越抽象位于“塔”中间部位的那些视听经验，比上层的言语和视觉符号具体、形象，又能突破时间和空间的限制，弥补下层各种直接经验方式之不足教学活动应从具体经验入手，逐步进入抽象经验在学校教学中使用各种媒体，可以使教学活动更具体，也能为抽象概括创造条件4．2．2媒体信息的心理感受声音心理特征观测者经验，响度和声调，低频敏感，高频不敏感

频率越低或越高，响度感觉越差，而对中高频率（1kHz～5kHz）的声音相对比较灵敏

203003K20Kf(Hz)音频（Audio）带宽语音(Speech)带宽次声带超声带媒体信息的心理感受视觉心理特征亮度，色调，饱和度，对比度视觉敏感程度：对亮度信息敏感，颜色敏感度相对较弱视觉时间特征：视觉图像建立、持续、消逝色彩记忆性感觉：暖色较冷色记忆性强色彩心理感受：不同颜色对人的心理影响色彩好恶：地域、文化、宗教、年龄……基于心理学的技术处理编码：压缩对人不敏感的信息以减少数据量DVD（MPEG）声音—减损式压缩模式，将听觉上采撷不到的信息删除再现：依据人对信息的接受方式表现信息立体声—听觉空间的心理模拟，时间差、强度差例：基于心理学的应用——JPGFDCT熵编码器量化表有失真编码器源图像数据压缩图像数据量化器编码表88块例：基于心理学的应用——MP3MPEG音频压缩的主要依据是人耳朵的听觉特性，利用了“心理声学模型”心理声学模型的一个基本概念：听觉阈值。低于听觉阈值的声音信号听不到，因此就可以把这部分信号去掉心理声学模型的另一个概念：听觉掩饰特性，即听觉阈值会随听到的不同频率的声音而发生变化例如，同时有两种频率的声音存在，一种是1000Hz的声音，另一种是1100Hz的声音，但它的强度比前者低18分贝，在这种情况下，1100Hz的声音就听不到MP3文件结构MP3文件大体分为三部分：TAG_V2(ID3V2)，Frame,

TAG_V1(ID3V1)ID3V2包含作者，作曲，专辑等信息，长度不固定，扩展了ID3V1的信息量Frame...Frame一系列的帧，个数由文件大小和帧长决定，每个FRAME的长度可能不固定，也可能固定，由位率bitrate决定。每个FRAME又分为帧头和数据实体两部分，帧头记录了mp3的位率，采样率，版本等信息，每个帧之间相互独立ID3V1包含作者，作曲，专辑等信息，长度为128BYTEMPEGaudio层3编码器和解码器的结构例：基于心理学的应用——立体声双耳效应人双耳之间有一定的距离（约17cm），若一点声源偏离听音人前方主轴方向，到达两耳的声音就会产生差别，听觉系统根据这些差别就可以判断出声源的方位，即“双耳效应”理论。双耳效应理论认为：人耳对声源方位的判断能力是根据双耳距离差引起的四个物理因素产生的声音到达双耳间的时间差声音到达双耳间的强度差（声音在空气中传播由于距离造成的衰减差异）声音低频分量由于时间差产生的相位差（低频声音的波长长，因而在时间差产生的相位差在一定数量值内，可以作为判断声源方位的信息）由于人的头部对高频分量的遮蔽作用产生的音色差基于心理学的应用——立体声声像听音人在一定条件（两扬声器的信号完全一致）下感觉不到两个声源的存在，而是感觉好象在两个扬声器之间有一个空间点在发声，即声像，因为这个点实际不存在，所以也称幻象声像，或虚声像幻象声像的产生利用了“双耳效应”理论。由于幻象声像的存在使听音人能够在听音活动过程中感受到声音方位的变化，使再现声音的方位信息成为可能基于心理学的应用——立体声在立体声重放系统中若在一定范围内调整两个扬声器间信号的时间差或强度差，声像就会从两扬声器连线的中心点沿着这条连线向其中一只扬声器传递，并定位在某一点上。这个现象就是立体声重放的基础。某一声像的定位是两只扬声器发出的两个声音重叠后到达听音人双耳的结果媒体结合的影响从信息理解角度看，多种媒体的合理结合有利于信息的接受和理解，反映在理解程度和记忆驻留效果上

心理学实验理解程度：视觉83%，听觉11%，触觉3%，其他<4%

记忆驻留：

方式 2小时后 72小时后 谈话 70% 10%

观看 72% 20%视听并举 85% 65%“感觉相乘”效应4．2．3出版物的媒体特征文本媒体主要形式：书﹑报﹑刊一般用途：报道，描述，分析主要特点：可以细致地﹑多角度地刻划事物或人物的各个方面，也可以做深刻的分析，可以表达人们的思想，也可以描述抽象的规律和概念形态：静态功能：“述”、“析”观点：文字是人类思维的工具，以文本表示的信息带有更多的主观色彩，带有较多的逻辑思维特征。由于主要是文本媒体记录了人类的知识﹑文化和思想，因此，它也是各种媒体中最重要﹑最基本的出版物的媒体特征图画媒体主要形式：图片﹑画册及幻灯﹑胶片等

一般用途：可以和文字相互补充，用于直观报道和形象描述，也可以专门用于欣赏

主要特点：直观，形象

形态：静态

功能：“示”

观点：图画媒体给人的感觉要比文字客观，表达的信息也更容易使人接受

出版物的媒体特征音像媒体一般用途：欣赏、报道主要特点：比图画更加直观形象，强调可信度和感染力形态：动态，过程功能：“演/播”

观点：音像媒体往往可以给人最客观的感觉，表达的信息也最容易使人接受，是形象化思维表现4．2．4多媒体的信息表现多媒体综合各种媒体的表现特征，媒体之间相互作用，可以表达出比各种媒体简单合在一起更多的信息与心理学中“感觉相乘”对应，可以称之为“媒体相乘”作用多媒体既适合表现形象的，也适合表现抽象的，既可以含有静态的展示，又可以进行动态的演播，表现既可直观生动，又可深刻理智，而且各方面可以有机的结合在一起4．2．5形象媒体与抽象媒体抽象符号需要较多理性的思考，如文字、数学符号形象媒体传递给人较多的是感觉人类对信息的接受首先是感觉，然后是感受（与经验、知识相关）人类心理倾向于感觉、理解，而不是理性分析与探究！多媒体中抽象、理性的内容将受到严重影响媒体心理学专家观点媒体心理学专家彼特.温特浩夫－斯伯克（德）电视使社会的情感结构趋于肤浅，人的情感趋于做作和以性为取向。结果是情感交流变成了经过精心设计的自我表演，人们不断追求新的刺激。感情只是被表演给人看，而实际上并没有被感受到未来的公民将是这样一种类型的人：他们精神脆弱，自我中心，只注重外在表现，醉心于人工策划的事件在所谓的具有绝对灵活性和移动性的时代，社会联系的纽带越来越不可靠，而电视就成为了一个隐蔽的教育工作者技术是偏方，人本是正道有人说，他设计了一个实验室，从这个门进去，你还不是老师；从那个门出来，你就是一个好老师了。你信吗？4．3媒体设计4．3．1人机交互技术用户：我又错了？用户必须不断地适应计算机，而不是相反！人机交互技术人机交互定义（ACM,1992）一门研究人类所使用的交互式计算系统的设计、实施、评估及相关主要现象的学科控制信息显示信息人机交互技术人机交互技术信息表示的多样化和如何通过多种输入输出设备与计算机进行交互是人机交互技术的重要内容未来的用户界面将更多的运用虚拟现实技术，使用户能够摆脱键盘与鼠标的交互方式，而通过动作、语言，甚至是脑电波来控制计算机基于视线跟踪、语音识别、手势输入、感觉反馈等交互技术人机交互技术人机交互方式键盘输入：传统方式鼠标输入：图形用户界面的重要输入方式折叠键盘西门子虚拟键盘最古老的鼠标无线电式鼠标人机交互方式手写输入：手写汉字的识别，“平板电脑”语音输入触摸屏输入数字化仪输入：适用于CAD/CAM系统扫描输入：条形码、扫描仪、光电阅读器人机交互方式三维输入：数据手套、三维鼠标、力矩球等视觉输入：摄像设备。机器人的视觉显示终端输出：重要工具声响输出：声波打印输出：标准输出设备之一三维输出：产生三维输出的设备有投影显示器、头盔显示器、电视眼镜等3维鼠标人机交互技术人机交互技术应用领域软件界面设计：多媒体化自然语言人机交互输入输出装置的设计计算机辅助设计和制造(ComputerAideddesignCAD/ComputeraidedmanufacturingCAM)人机交互技术人机交互技术发展人机交互是基于视线跟踪、语音识别、手势输入、感觉反馈等新的交互技术视线跟踪手势输入体验“接吻”感觉的触觉交互设备人机交互设计原理人机界面的设计需考虑三个元素：人的因素、交互设备、实现人机对话的软件人机工程与界面设计人机工程学人机系统总体设计人机系统由人和机组成，相互联系构成整体强调人机系统的各个成分，克服忽视人和人的效能的问题设计目标：使系统的每个成分都为实现系统目标而能够协调一致地发挥各自的功能人机交互设计原理——屏幕人机交互的创意设计创意设计：即屏幕设计、界面设计屏幕设计创意通过各种手法表现与主题向适应的意境屏幕的各构成要素按照视觉运动的法则精心安排，主次、大小、疏密得当狭义：研究各种视觉元素的位置、面积、大小的排列组合和视觉流程问题广义：研究各种视觉元素得搭配格调，能通过屏幕信息强化主题人机交互设计原理屏幕创意设计原则内容与形式表现必须统一，形式服从内容充分考虑各视觉元素的视觉流程，突出主题保持屏幕界面视觉上的相对均衡感注意屏幕设计中的空白的处理注重整体的对比因素，强化界面的整体吸引力注意提高屏幕界面信息内容的视读性创造一定的韵律感，界面流畅人机交互设计原理屏幕创意设计表现手法视觉流程：在阅读信息时，视线通常是从左到右，从上到下的过程点、线、面的关系形状间的组合对比与统一节奏与韵律装饰与趣味视觉流向人机交互设计原理多媒体人机交互设计原理使界面一致使界面具有指导性使界面健全易用使界面友好使界面功能强大图形用户界面交互方式GUI：GraphicsUserInterface4．3．２布局版面结构设计版面指的是浏览器看到的完整的一个页面（可以包含框架和层）布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置首先看到什么（用户）要传达什么信息（表达者）如何传达（技术）布局标题栏子栏目名称主要内容内容提示附加信息网页布局设计基本布局元素标题：将被显示在浏览器的标题栏中网站标志（LOGO)：放在网页中最显眼的位置标识代表网站的形象页眉：是网页中最显眼的位置，用来放置网站中浏览者最希望看到网站的内容导航：是提供网站中内容的索引。通过导航可以方便到达网站的各个栏目。一个合理的导航设计可以使得网站变得合理应用正文内容：是网站的精神所在。有方向性页脚：提供了字数，版权信息，联系方式等4.3.3色彩配色与设计风格给人感觉不同每个人对色彩的感觉不同，所以无法设计出让浏览者感觉相同的网页配色方案——网页设计者根据什么设计网页颜色和色系呢？根据色彩的联想决定颜色和色系色彩红色代表：热情、活泼、热闹、温暖、幸福橙色代表：光明、华丽、兴奋、快乐黄色代表：明朗、愉快、高贵、希望绿色代表：平静、和平、柔和、安静、青春蓝色代表：永恒、沉静、理智、诚实紫色代表：高贵、魅力、自傲白色代表：纯洁、朴实、神圣灰色代表：消极、谦虚、平凡、中庸、寂寞黑色代表：坚实、严肃、粗莽色彩灰色：象征冷静、中立（苹果、维基百科、纽约时报……）绿色：象征健康、生命（BP石油、食品超市wholefoods、星巴克……）蓝色：象征可靠、力量（戴尔、大众汽车、IBM……）紫色：象征智慧、想象（雅虎、T-Mobile、科幻主题电视台Syfy……）红色：象征血气、年轻（可口可乐、乐高、肯德基……）橙色：象征欢乐、信任（芬达、亚马逊、火狐……）黄色：象征温暖、透明（百思买、法拉利、麦当劳……）色彩的搭配——使用单色通过调整色彩的饱和度和透明度也可以产生变化，避免单调色彩的搭配——使用邻近色所谓邻近色，就是在色轮上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计可以使网页避色彩杂乱，易于达到和谐统一色彩的搭配——使用对比色对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用分割互补色——使用一个色调和两个与它的补色邻近色调三分色阶——使用色轮中的等距三个色调

双互补色——使用两个色调和它们的补色

近似互补色——使用两个互补色调和一个颜色相近色调

中间色——使用没有色度的颜色

突出色——在没有色调的颜色中突出一个高饱和度的色调

使用暖色调的颜色

使用冷色调的颜色

色彩的整体感网页色彩的整体感很大程度决定了网站风格的确认

色彩的系统性网页色彩整体感首先指的是网页之间色彩的系统性

协调感网页色彩整体感还体现为网页页面本身的协调感

色彩的形式感

马蒂斯说：“色彩因自身而存在，色彩具有它自身的美。”色彩是凝固的音乐，色彩的音乐感是伴随着视线的流动而产生的。色彩的音乐感类似于音乐表现的色彩感觉。

www.jazzsaalfelden.at

色彩的节奏和韵律色彩的节奏和韵律也是网页色彩的形式感体现，它是通过色彩的交替变化出现的

www.slagtehal3.dk色彩的均衡与对比色彩的均衡是指各色块之间的平衡

www.visionmedia.nl

色彩的均衡与对比对比是自然界普遍存在的规律，色彩的对比也始终存在于网页色彩当中。应用好色彩的对比，关键是把握好“对比之中求调和，调和之中求对比”这一设计法则fuse-media.co.uk

网页色彩的情感

色调与情感色彩的色调如同音乐中的调子，它确定了网页的整体感觉，决定了网页的情感倾向

www.download-days.de

色彩排列与情感色彩的排列方式也影响着色彩的情感表现。同样的色调因色彩的排列方式不同，也会影响着人的情绪

网页色彩的风格

色彩风格的确立取决于网站的目标定位，网页的终端受众首先决定了色彩的倾向

色彩的使用蓝色调为主，加上白色和红色，强调权威与真实色彩的使用橙色为主，白色为辅，具有轻快，时尚的效果色彩的使用绿色为主，白色为辅，产生舒适、优雅、适于阅读的气氛色彩的使用红色为主，产生热情、活力的感觉，充满欢乐的气氛4．3．4用户体验用户体验：UE（UX）用户体验并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用，也就是人们如何“接触“或者“使用”它Web中的用户体验是指用户在访问平台的过程中的全部体验，它包括平台是否有用，疑惑或者bug程度，功能是否易用、简约，界面设计和交互设计是否友好等方面。用户体验的核心是UCD，即“以用户为中心的设计”用户体验目的留住现有的用户（提升用户忠诚度）吸引更多的用户（口碑传播）形式帮助人们提升效率减少人们犯错的几率“AJAX之父”JesseJamesGarrett（2000）《用户体验的要素：以用户为中心的Web设计》战略层为底层，表现层为最上层想象一个产品像大树一样。从根到躯干，到枝叶，最后到开花结果用户体验的要素——战略层战略层【自身目标与用户需求】成功的用户体验，其基础是一个被明确表达的“战略”战略层关注的内容主要为用户需求以及网站目标“我们想要什么”“我们的用户想要什么用户体验的要素——范围层范围层【对需求的整合】带着“我们想要什么”、“我们的用户想要什么”的明确认识，弄清如何满足所有这些战略的目标。当把用户需求和网站目标转变成网站应该提供给用户什么样的内容和功能时，战略就变成了范围可以理解成为功能层，产品可以干些什么。这个产品有哪些功能。例如“”，能发图片，发文字，能互相关注，这就是范围层需要考虑的东西。范围层关注的内容为：产品的功能设计和信息的内容需求（定义内容的详细属性）用户体验的要素——结构层结构层【交互。如何、可以、应该……】在收集完用户需求并将其排列好优先级别之后，对于最终产品将会包括什么特性已经有了清楚的图像。然而，这些需求并没有说明如何将这些分散的片段组成一个整体。这就是范围层的上面一层：为网站创建一个概念结构结构层比较抽象，主要用于设计用户如何到达某个页面，当完成了这个页面的任务以后，用户又要去什么地方。框架层定义了导航条上各项的排列方式，而结构层则确定了哪些类别应该出现在导航条上。结构层关注的内容：产品的交互设计和信息架构设计

用户体验的要素——框架层框架层（skeleton）【布局】表现层之下是框架层：按钮、表格、照片和文本区域的位置。框架层用于优化设计布局，以达到这些元素的最大效果和效率——使你在需要的时候，能记得标识并找到购物车的按钮结构层体现需求，这些需求来自战略目标需求。在框架层，确定很详细的界面外观、导航和信息设计，这能让晦涩的结构变得更实在用户体验的要素——表现层表现层（surface）【视觉呈现】看到的是一系列的网页，由图片和文字组成。一些图片是可以点击的，从而执行某种功能，例如把你带到购物车里去。一些图片就只是图片，比如一本书的封面或网站自己的标志在这个五层模型的顶端，我们把注意力转移到网站用户会首先注意到的那方面：视觉设计。这里，内容、功能和美学汇集导一起来产生一个最终设计，这将满足其他四个层面的所有目标交互设计交互：用户通过某种方式发出指令，且系统对此作出相应的反应交互设计是关于创建新的用户体验的问题，目的在于增强和扩充人们的工作、通信及交互方式，使他们能够更加有效地进行日常工作和学习UI设计UserInterfaceDesign用户界面设计，在很大程度上就是在探讨如何让产品的界面更加具有可用性，如何让用户有更良好的体验。这是一种优化后的界面，通过这种界面，用户能更方面地完成任务，获得良好的感觉例如：一个按钮的设计，美工设计考虑如何好看，而用户界面设计师则考虑按钮如何摆放，上面显示什么文字，甚至到底要不要这个按钮的问题软件设计、UI设计、交互设计《软件设计的艺术》TerryWinograd（2004年度的ACM人机交互院士）开发软件建房子土木工程师装修设计师建筑设计师软件设计ＵＩ设计交互设计实现模型和心理模型心理模型表现模型实现模型容易使用，体验良好记忆负担，体验较差最好的技术是消失在生活当中的技术JakobNielson博士交互设计十原则1.让用户随时了解系统的状态例如导入导出的提示功能2.系统应该与真实世界相符合（使用用户惯用的词汇和概念）3.给用户控制权和自主权当系统出错或者误操作后能够紧急退出4.提倡一致性和标准化相似的任务提供相似的元素JakobNielson博士交互设计十原则5.帮助用户诊断、识别和恢复错误。告诉用户大概的原因和解决办法6.预防错误7.依赖于识别而不是记忆8.强调实用的灵活性和有效性：输入搜索内容后直接按回车键就能搜索而不一定要点击搜索图标

9．最小化设计10.提供帮助及文档BenShneiderman交互设计原则性力求一致性：高度一致性的界面能够给人清晰和整体的感觉提供明确的反馈设计对话，告诉用户任务已经完成提供错误预防和简单的纠错功能应该方便用户取消某个操作用户应掌握控制权（授课计划的跳过该动画）减轻用户的记忆负担4．4Web前端技术网站标准的简单历史XHTML1ContentCSS2.1Presentation2001-2006HTML5ContentCSS3Presentation2007-Present2013年Web设计三大趋势趋势1：响应式设计响应式设计，是指XHTML/HTML5、CSS（3）和JavaScript技术的组合。使用这三种技术，检测用户的屏幕尺寸，自动调整网站的布局以适应用户的屏幕尺寸不管用户是使用智能手机浏览网站，还是使用Retina高分辨率屏幕的iPad4浏览网站，都能获得很好的视觉效果响应式设计RWD（ResponsiveWebDesign），伊桑·马克特（EthanMarcotte），2010三种已有开发技巧弹性网格布局弹性图片媒体查询响应式网页设计，即是一种针对任意设备对网页内容都能进行完美布局的显示机制

媒体查询例body{background-color:grey;}@mediascreenand(max-width:960px){body{background-color:red;}}@mediascreenand(max-width:768px){body{background-color:orange;}}媒体查询例@mediascreenand(max-width:550px){body{background-color:yellow;}}@mediascreenand(max-width:320px){body{background-color:green;}}

2013年Web设计三大趋势趋势2：Metro（地铁）风格MetroUI是一种界面展示技术，和苹果的iOS、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象，而Metro界面强调的是信息本身，而不是冗余的界面元素为Metro设计主题应该是：“光滑、快、现代”2013年Web设计三大趋势趋势3：大按钮操作Web设计正在受到智能手机和平板电脑的影响手机之类的屏幕，尺寸很小，用手指触摸操作，如果按钮很小，那么操作极为不便为了给用户提供更好的体验，大按钮的设计势在必行4.1.1Web前端技术简介Web前端主要指浏览器端Web2.0时代，网站前端发生重大变化，网页不再只呈现供人浏览的信息，而是出现大量类似于传统桌面软件的应用，媒体信息和交互方式越来越丰富，用户体验越来越好智能手机、平板电脑等移动数字终端的普及使移动互联网成为信息产业当前最重要的应用，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的Web前端技术简介通俗讲：通过浏览器到用户端计算机的统称为前端技术，相反存贮于服务器端的统称为后端技术前端开发工作通常需要视觉设计师、交互设计师和网页设计师相互配合完成，也可以一人兼任多种角色前端开发主要方向网页设计（重构）：根据设计图用HTML和CSS完成页面制作（与视觉设计师和交互设计师配合）web前端开发：主要负责交互设计。根据网站的可用性分析和用户反馈改进和优化网站的前端。利用JavaScript结合html+css技术开发出用户体验更好的网站页面Web前端模型MVC（ModelViewController）模型（model）－视图（view）－控制器（controller）的缩写一种软件设计典范，用于组织代码一种业务逻辑和数据显示分离的方法方法假设前提是，如果业务逻辑被聚集到一个部件里面，且界面和用户围绕数据的交互能被改进和个性化定制，而不需要重新编写业务逻辑MVC用于把传统的输入、处理和输出功能映射在一个逻辑的图形化用户界面结构中Web前端技术简介Web前端技术简介Web前端开发利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发致力于通过技术改善用户体验前端开发所需技能精通HTML(5)/XHTML、CSS(3)等网页制作技术，熟悉页面架构和布局（盒模型，定位，浮动，段落、图片、文字的属性控制，浏览器bug…）熟悉W3C标准，对表现与数据分离、Web语义化等有深刻理解（至此即可实现静态页面开发）精通JavaScript、Ajax等Web开发技术

对算法、数据结构以及后台开发(C/C++/PHP/Java等)有一定了解（可实现交互、动画等功能）前端开发基本流程需求分析，设计UI界面构建HTML框架结构编写外部样式（CSS）编写外部js文件页面细节的完善和优化页面（浏览器）兼容性和js效果测试及修正上传服务器及后期维护Web前端—浏览器端浏览器主要功能是呈现用户选择的Web资源，它从服务器请求资源，并将其显示在浏览器窗口中资源的格式通常是HTML，也包括PDF、image及其他格式用户用URI(UniformResourceIdentifier统一资源标识符)来指定所请求资源的位置Web即计算机，浏览器即桌面浏览器演变1995～1998，IEvs.Netscape2005～2007，IEvs.Firefox2012，Chrome份额超过IE今天，IE……浏览器的结构与远程服务器通信输出至显示器从鼠标和键盘输入网络接口可选客户程序HTML解释程序可选解释程序控制程序驱动程序……HTTP客户程序缓存浏览器的主要组件用户界面-包括地址栏、后退/前进按钮、书签目录等，就是除了用来显示所请求页面的主窗口之外的其他部分浏览器引擎-用来查询及操作渲染引擎的接口渲染引擎

–也被称为浏览器内核，用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来网络

-用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作浏览器的主要组件UI后端

-用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口JS解释器

-用来解释执行JS代码数据存储

-属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了webdatabase技术，这是一种轻量级完整的客户端存储技术浏览器的主要组件

组件间的通信渲染引擎（Renderingengines）渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容默认情况下，渲染引擎可以显示html、xml文档及图片也可以借助插件(一种浏览器扩展)显示其他类型数据例如使用PDF阅读器插件，可以显示PDF格式Flash也是插件——与HTML5之争Firefox使用GeokoSafari和Chrome使用webkitIE以webcontrol控件为内核，QQ、360、搜狗、猎豹……http://

组件间的通信主流程（Themainflow）渲染引擎首先通过网络获得所请求文档的内容解析html以构建dom树构建render树布局render树绘制render树内容属性布局绘制Webkit渲染引擎主流程

Mozilla的Geoko渲染引擎主流程HTML页面加载和解析流程

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求（http），服务器返回html文件（http）浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件浏览器发出CSS文件的请求，服务器返回CSS文件（http）浏览器继续载入html中<body>部分代码，由于CSS文件已经载入，可以开始渲染页面（看来不错）浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码（http）HTML页面加载和解析流程服务器返回图片文件，由于图片占用了一定面积，影响后面段落布局，因此浏览器要重新渲染这部分代码（MyGod）浏览器发现包含Javascript代码的<script>标签，赶快运行它Javascript脚本执行这条语句，它命令浏览器隐藏代码中的某个<style>（style.display=“none”）。少了这个元素，浏览器不得不重新渲染这部分代码（MyGod）执行到</html>（终于……）HTML页面加载和解析流程用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径（泪奔泪流……）浏览器召集在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面（唉……）浏览器加载和渲染HTML的顺序下载顺序从上到下，渲染（即把请求内容显示到浏览器屏幕）顺序也是从上到下，下载和渲染同时进行在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时的下载过程会启用单独连接进行下载样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染JS、CSS中如有重定义，后定义函数将覆盖前定义函数页面加载速度优化近年Web网页显著增大。HTTPArchive研究表明，平均一个页面1.25M，2015年达2M页面性能优化策略不论PC还是移动浏览器，页面展示需要的时间里，20%用来读取页面的HTML，80%用来加载额外的像样式表、脚本文件、或者图片这样的资源和执行客户端的程序主要改善性能的策略减少每个页面需要获取额外资源的HTTP请求数（少访问服务器）减少每个请求加载的大小（少从服务器传数据）优化客户端执行的优先级和脚本执行的效率（提高处理速度）YSlowYahoo发布的一款基于FireFox的插件（YSlowforChrome）分析网站页面，并告之为了提高网站性能，基于某些规则（23条）如何进行优化页面加载速度优化建议（Radware）合并Js文件和CSS-减http次数不仅简化代码，而且减少Get（http）请求次数Sprites图片技术-减http次数一种网页图片应用处理方式。将零星图片包含到一张大图中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置压缩文本和图片-减文件大小压缩技术如gzip可以有效减少页面加载的时间包括HTML，XML，JSON（JavaScript对象符号），JavaScript和CSS等，压缩率都可以在大小70%左右页面加载速度优化建议延迟显示可见区域外的内容-显示调度策略为了确保用户可以更快看见可见区域的网页，可以延迟加载或展现可见区域外的内容，为了避免页面变形，可以使用占位符标签制定正确的高度和宽度如jQueryImage

LazyLoad可以在用户停留在第一屏时，不加载任何第一屏以下的图片信息，当鼠标往下滚动时，这些图片才开始加载确保功能图片优先加载-显示调度策略主要考虑可用性的重要性，一个功能按钮要提前加载页面加载速度优化建议重新布置Call-to-Action按钮-显示调度策略从用户体验速度着手，跳过了网页的整体加载速度，让一些行为按钮提前，Call-to-Action按钮一般习惯设计在页面底部可以调整CTA按钮位置或使用滑动图片按钮。很多大型购物网站的加入购物车就是这种类型图片格式优化-减文件大小正确的图片格式可以让图片缩小数倍，可以节省大量带宽，减少处理时间，加快页面加载速度图片减肥工具如Smush.it和TinyPNG页面加载速度优化建议使用ProgressiveJPEGs-JPEG2000渐进方式低速网络精简代码-减文件大小网页代码瘦身，删除不必要的沉冗代码，比如不必要的空格、换行符、注释等，包括JS代码中的无用代码也需要清除延迟加载和执行非必要脚本-执行调度策略网页中很多脚本在页面完全加载完前不需要执行，可以延迟加载和执行非必要脚本这些脚本可以在onload事件之后执行，避免对网页上重要内容的呈现造成影响这些脚本往往是一些第三方脚本，这样的有很多，比如评论、广告、智能推荐、百度云图、分享等等，这些完全可以等主体内容加载完后再执行页面加载速度优化建议使用AJAX-异步（调度）+减文件大小AJAX即“AsynchronousJavascript+XML”，通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步操作局部更新自动化的页面性能优化自动化的页面性能优化是借助工具如Radware推荐了自家的RadwareFastView简单建议外部JS和CSSHead（显示主要页面用）Body尾部（被调用）可以用CSS处尽量用少调文件减少HTTP，DNS（不同域名使用越少越好）合并文件网址尾部加/（不是文件时）图片或表格指定height和width参数（减少计算）用缓存（特别是HTML5）减少图片（如能用HTML或JS生成）和FLASH（特别是HTML5）网页数据分析工具（Httpfox）HttpWatch（Httpfox）记录HTTP

与Internet浏览器和Firefox集成独立的日志文件查看器按页面的请求分组请求LevelTime图表页面事件可定制的数据列自动化支持毫秒级的计时HTTP压缩可扩展的Cookie信息原始HTTP流网页数据分析工具导入HAR文件键盘加速器准确地记录请求和响应支持国际字符集容易，简单而且功能强大‘解密HTTPS流量压缩型和综合性日志文件记录的流量摘要信息从您的客户中收集日志文件实时页面级时间图表检测潜在的问题网页数据分析工具数据提示先进的过滤功能动态排序网络级的性能数据显示与浏览器Cache的交互将数据导出到CSV,HAR和XML文件中可定制的CSV导出访问缓存的和已下载的内容自动记录和保存支持打印Web前端技术简介基本模型：HTML（5）展示外观：CSS（3）实现操作：JavaScriptJquery（尤其Chrome）数据库技术MySql\SQLServer\Oracle\SQLilePHP/JSP/ASP服务器技术Node.js架构Jquery/Bootstrap4．4．2HTML5HTML发展历史19982000200220042007HTML4.0XHTML1XHTML2WHATWGHTML5WHATWG：WebHypertextApplicationTechnologyWorkingGroupHTML5DEMOHTML发展历史HTMLfirstpublished199120122002-20092000HTML2.0HTML3.2HTML4.01XHTML1.0XHTML2.0HTML5199519971999HTML5ismuchmoretolerantandcanhandlemarkupfromallthepriorversions.ThoughHTML5waspublishedofficiallyin2012,ithasbeenindevelopmentsince2004.AfterHTML4.01wasreleased,focusshiftedtoXHTMLanditsstricterstandards.XHTML2.0hadevenstricterstandardsthan1.0,rejectingwebpagesthatdidnotcomply.Itfelloutoffavorgraduallyandwasabandonedcompletelyin2009.支持HTML5的浏览器Opera9.5+Cross-documentmessagingServer-senteventsWebForms2.0CanvasandvideoSafari3.1+<video>and<audio>tagsOfflinedatastorageAPIWebkit(Iphone/Chrome/Android/

Nokias60/Palm'sWebOS)支持HTML5的浏览器FireFox3.1+offlinestorageandcanvasGeolocation/WebWorkers/

ContentEditableGecko(moreHTML5APIs)InternetExplorer8.0+embedelementand

contentEditableattributecross-documentmessagingHTML5概览通用适合所有浏览器结构清晰标签代替DIV减少JavaScript编程标签代替API代替插件安全性、兼容性、……TobeornottobeAPIs,还有库的支持，如jQueryFlash的噩梦:网页中地位下降HTML5概览强化Web网页的表现性能，提供了绘制、视频和音频工具，追加本地数据库等Web应用的功能促进Web上的和便携设备的跨浏览器应用的开发。HTML5是驱动移动云计算服务方面发展的技术之一浏览器支持程度评测网站

/HTML5技术概览HTML5新增和移除的元素HTML5基本布局HTML5对表单的支持HTML5DOM变化HTML5的JavascriptAPIsCanvasVideo/AudioDrag&DropGeolocationApplicationCacheDatabaseStorageX-DocumentMessagingHTML5新增的元素多媒体及交互式元素video,audio...details,menu,command...结构元素header,footer,section,article,nav...块级语义及行内元素aside,figure,dialog...time,meter,mark,progress...表单控件email,url,datetime,number,range,color...HTML5新增的属性contenteditable,contextmenu,data-*,hidden,item,itemprop,subject,

role,aria-*,spellcheck,draggable,irrelevant,template,placeholder,autofocus,required,async,manifest...HTML5新增的事件onabort,onbeforeunload,oncontextmenu,ondrag,ondragend,ondragenter,ondragleave,ondragover,ondragstart,ondrop,onerror,onmessage,onmousewheel,onresize,onscroll,onunload...HTML5移除的元素移除的元素font,center,strike,big,s,u,acronym,applet,dir...移除的属性如a,area,button,input,label,legend和textarea元素的accesskey属性如link和a元素的rev和charset属性,link元素的target属性,td的scope属性，script元素的language属性,body元素的alink，link，text和vlink属性HTML5基本布局HTML4HTML5<!DOCTYPEhtml><htmlang="en"><head><metacharset="utf-8"><title>HTML5Demo</title><body><header><h1></h1><h2></h2></header><nav><ul><li></li><li></li></ul></nav><section><article></article><article></article></section><aside></aside><footer></footer></body></html><!DOCTYPEhtml><html><head><style>*{margin:0;padding:0;}body{width:962px;background-color:white;margin:15pxauto;border:1pxsolidblack;}h1{padding:10px;}header{border-bottom:2pxsolid#ef9c00;}section{height:400px;width:600px;float:left;border-right:2pxsolid#ef9c00;float:left;}aside{width:360px;float:right;}footer{clear:both;border-top:2pxsolid#ef9c00;}</style></head><body><header><h1>Header</h1></header><section><h1>Section</h1></section><aside><h1>Aside</h1></aside><footer><h1>Footer</h1></footer></body></html>标签CSSHTML5对表单的支持新的控件类型<inputtype="url|email|date|tel|search|datetime|date|month|week|datetime-local|number|range|color">,<selectdata="http://domain/getoptions"></select>文件上传控件<inputtype="file"accept="image/png"/>重复的模型add,remove,move-up,move-down内建表单验证<inputtype="email"required/>,<inputtype="number"min=10max=100/>XMLSubmissionapplication/x-www-form+xml

<formaction='/register'enctype="application/x-www-form+xml"method="post"><p><labelfor='name'>ID(请使用Email注册)</label><inputname='name'requiredtype='email'/><p><labelfor='password'>密码</label><inputname='password'requiredtype='password'/><p><labelfor='birthday'>出生日期</label><inputtype='date'name='birthday'/><p><labelfor='gender'>国籍</label><selectname='country'data='countries.xml'></select><p><labelfor='photo'>个性头像</label><inputtype='file'name='photo'accept='image/*'/><table><thead><td><buttontype="add"template="questionId">+</button>保密问题</td><td>答案</td><td></td></thead><trid="questionId"repeat="template"repeat-start="1"repeat-min="1"repeat-max="3"><td><inputtype="text"name="questions[questionId].q"/></td><td><inputtype="text"name="questions[questionId].a"/></td><td><buttontype="remove">删除</button></td></tr></table><p><inputtype='submit'value='send'class='submit'/></p></form>/Demo/Speech/Demo/form-html5.html

HTML5DOM变化getElementsByClassNameSelectorAPIdocument.querySelector()document.querySelectorAll()TraversalAPI.nextElementSibling.previousElementSibling.firstElementChild.lastElementChild.childrenHTML5的JavascriptAPIsWebForms2.0MessagingOfflineApplicationsHistoryAPIVideo&AudioDrag&DropUndoCanvasEditableX-DomainStorageGeolocationLocalDatabaseVideo&Audio在无需安装第三方插件的情况下添加图形和视频<videoheight="280"width="498"poster="border.png"id="video">

<sourcesrc="coldplay.mp4">

</video><audiosrc="music.oga"controls>

<ahref="music.oga">Downloadsong</a>

</audio>Canvas<canvas>是一个新的HTML元素，这个元素可以被Script语言（通常是JavaScript）用来绘制图形。例如可以用它来画图、合成图像、或做简单的（和不那么简单的）动画varcanvas=document.getElementById("canvas"),context=canvas.getContext("2d");

context.fillStyle="rgb(0,0,200)";

context.fillRect(10,10,50,50);context.save();

context.restore();

context.scale(x,y);

context.rotate(angle);

context.translate(x,y);

Canvasvs.DOM+CSSCanvas提供像素级API，只要精通算法，理论上几乎可以做出任何效果大量游戏工程师进入Web前端实现在浏览器中的WebGL失去DOM和CSS支持（浏览器引擎的核心工作之一），开发成本增加HTML是DOM树，浏览器引擎解析DOM树提供浏览功能CSS将外观从内容中分离，提高开发效率和可维护性平衡的解决方案（结构+处理）甚至PhotoShopDrag&Drop拖拽事件:dragstart,dragend,dragenter,dragleave,dragover,drag,drop<divdraggable="true"ondragstart="dragstartHandler(event)"></div>

functiondragstartHandler(e){

alert('dragstart');}WebWorkers让JavaScript多线程，可以在后台做很多工作而不会阻断当前的浏览器（异步化）创建后台运行的线程varw=newWorker(“worker.js”);

w.onmessage=function(event){ alert(event.data);}

w.postMessage('run');WebWorkers//worker.jsimportScripts(“xhr.js”,“db.js”);onmessage=function(event){

if(event.data=='run'){

run();

}

}functionrun(){

vardata=doCrazyNumberCrunch();

postMessage(data);

}Geolocationnavigator

.geolocation

.getCurrentPosition(

success,

error);支持共享地理位置；通过使用移动智能设备定位功能纳入移动云服务和应用ApplicationCache离线存储<htmlmanifest="rubiks.manifest">rubiks.manifestCACHEMANIFEST

/demo/rubiks/style.css

/demo/rubiks/jquery.min.js

/demo/rubiks/rubiks.js

#version15http:///demo/rubiks

StorageWebSQLDatabases支持SQL规范的本地数据库本地存储（大小限制5MB,HTTPCookie大小4KB）databasestorage（客户端数据库SQLite）WebKit中已经实现vardatabase=openDatabase('db','1.0');database.executeSql('SELECT*FROMtest',function(result){

database.executeSql('DROPTABLEtest');

});Storagekey/val存储()sessionStorage(windowbased)localStorage(domainbased)WebKit/IE8/Firefox3.5已经实现.setItem(key,value).getItem(key)Cross-DocumentMessaging.postMessage(message,targetOrigin).onMessage(event)event.data==messagedocument.getElementById('iframe').contentWindow.postMessage('mymessage','');window.addEventListener('message',

function(e){

if(e.origion!==''){

return;

}

alert(e.origion+'said:'+e.data);

},false);跨域:不同url/

2022?4．4．3CSS3199619982001CSS1.0CSS2.0CSS3.0CascadingStyleSheetsCSS的发展历史CSS3DEMOCSS3技术概况CSS技术的升级版本模块化发展以前规范，一个模块，太庞大且比较复杂分解为一些小模块加入新模块模块盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局……CSS3技术概况选择器布局样式动画其它CSS3-选择器属性选择器a[href$='.pdf'],a[href^='mailto'],a[class*=‘item’]兄弟选择器Div~img伪类选择器:nth-child(n),:nth-last-child(n),:last-child,:checked,:empty,:only-child,:nth-of-type(odd),:nth-of-type(even)CSS3-样式圆角border-radius:3px-moz-border-radius-topleft-webkit-border-top-left-radius阴影box-shadow:5px5px5pxrgba(0,0,0,0.5)text-shadow:2px2px#444,3px3px#555自定义字体@font-face{

font-family:Adam,src:url(adam.ttf);

}

p{font-family:Adam,serif;}文本换行word-wrap:normal|break-wordCSS3-样式边框背景border-image:url(border.png)27272727roundround;渐变background:-moz-linear-gradient(20%,center,30%,center,from(blue),to(yellow))no-repeat;背景background-size:100px50px;background-origin:content-box|border-box|padding-box;background-clip:border-box|padding-boxCSS3-样式透明opacity:0.5;RGBAcolor:rgba(0,255,0,0.5);HSL/Acolor:hsl(240,50%,50%);hsla(240,50%,50%,0.5)调整元素尺寸resize:both|horizontal|verticalCSS3-布局盒模型box-sizing:content-box|border-box;网格模型column-count:3;column-width:13em;column-gap:1em;column-rule:1pxsolidblack;CSSTableDisplay#content{display:table;}

#main{display:table-cell;width:620px;padding-right:22px;}

#side{display:table-cell;width:300px;}Outlineoutline-offsetCSS3-动画变换transform:rotate(30deg);transform:scale(0.5,2.0);transform:skew(-30deg);transform:translate(30px,0);过渡transition:all1sease-out;动画animation:greenPulseinfiniteease-in-out3s;CSS3-其它媒体查询.entry{color:red;}

@mediaalland{min-width:100em}{

.entry{color:black