渐进增强的Web设计 PDF 高清版

《渐进增强的Web设计》由全球著名Web设计公司Filament集团两位创始人和两位开发主力联手打造，其中Scott Jehl还是jQuery团队成员。四位作者具有多年的网站设计和开发经验，曾为网站、无线设备、Web应用设计过众多高度实用的用户界面，受到了高度赞扬。本书展示了如何利用渐进增强方法开发网站，从而获得最佳用户体验。本书既是理解渐进增强原则和益处的实用指南，也用详细的案例分析，目的是向设计师以及开发人员传授何时、何地以及如何采用体现渐进增强的具体编程和脚本技巧。

目录

• 第一部分　测试驱动的渐进增强方法
• 第1章　我们的方法　　2
• 1.1 　测试浏览器能力　　3
• 1.2 　规划渐进增强：X光透视　　4
• 1.3 　从X光到实践：渐进增强开发的构成　　5
• 1.4 　理论结合实践　　6
• 第2章　渐进增强实践：X光透视　　7
• 2.1 　X光透视概述　　7
• 2.1.1 　定义内容层级并将组件映射到HTML　　8
• 2.1.2 　编写基础标记和尽可能少的安全样式　　10
• 2.1.3 　应用标记、样式和脚本增强　　11
• 2.2 　案例1：规划新闻网站的结构和组织方式　　12
• 2.2.1 　评估内容组织和命名方式　　12
• 2.2.2 　借助原生HTML层级功能实现内容组织　　13
• 2.2.3 　构建导航　　14
• 2.2.4 　处理分层和动画内容　　15
• 2.2.5 　支持动态过滤和排序　　16
• 2.3 　案例2：结账表单中的工作流、验证和数据提交　　17
• 2.3.1 　解构结账表单设计　　17
• 2.3.2 　标记表单以确保可访问性　　23
• 2.3.3 　添加限制与验证　　24
• 2.3.4 　组合基本和增强体验　　25
• 2.4 　案例3：预算计算器里的交互数据可视化　　25
• 2.4.1 　选择预算线组件的基本标记　　26
• 2.4.2 　从基础标记开始创建可访问的滑块　　28
• 2.4.3 　制作饼图　　28
• 2.5 　案例4：支持功能完备浏览器应用程序的各种功能——照片管理器　　30
• 2.5.1 　制作全局导航元素的标记　　31
• 2.5.2 　支持专辑和多张照片的复杂交互　　32
• 2.5.3 　创建自定义表单和叠加　　37
• 2.5.4 　创建返回按钮支持　　38
• 2.6 　在实践中运用X光的核对清单　　39
• 第3章　编写有意义的标记　　40
• 3.1 　标记文本和图像　　41
• 3.1.1 　用于标记有意义文本的元素　　41
• 3.1.2 　列表　　45
• 3.1.3 　表格式数据　　46
• 3.1.4 　图像　　48
• 3.1.5 　嵌入式富媒体　　49
• 3.1.6 　嵌入外部网页内容　　50
• 3.2 　标记交互内容　　51
• 3.2.1 　锚链接　　51
• 3.2.2 　表单结构　　51
• 3.2.3 　表单控件　　53
• 3.3 　创建页面环境　　57
• 3.3.1 　了解何时该用块级元素或内联元素　　58
• 3.3.2 　用ID和类标识元素　　59
• 3.3.3 　用WAI-ARIA路标角色标识页面主要版块　　60
• 3.3.4 　保持源代码顺序清晰易读　　60
• 3.3.5 　使用title属性　　62
• 3.4 　建立一张HTML文档　　63
• 3.4.1 　DOCTYPE　　64
• 3.4.2 　文档头　　65
• 3.5 　加入可访问性　　68
• 3.5.1 　可访问性指导原则和法律标准　　69
• 3.5.2 　Web内容可访问性指南　　70
• 第4章　有效应用样式　　71
• 4.1 　将样式应用到网页　　71
• 4.1.1 　将样式保存在外部样式表里　　71
• 4.1.2 　链接到外部样式表　　72
• 4.1.3 　使用有意义的命名惯例　　74
• 4.2 　为基本和增强体验添加样式　　74
• 4.2.1 　基本体验里的安全样式　　75
• 4.2.2 　为增强体验添加样式　　76
• 4.3 　可访问性的考虑要点　　77
• 4.4 　应对bug和浏览器差异　　78
• 4.4.1 　条件注释　　78
• 4.4.2 　常见问题和变通方法　　79
• 第5章　编写增强和交互脚本　　83
• 5.1 　如何正确引用JavaScript　　83
• 5.1.1 　避免内联JavaScript　　83
• 5.1.2 　引用外部JavaScript　　84
• 5.2 　理解JavaScript在基本体验里的位置　　84
• 5.3 　脚本增强的最佳实践　　85
• 5.3.1 　在内容就绪时运行脚本　　85
• 5.3.2 　给标记应用行为　　85
• 5.3.3 　用JavaScript构建增强标记　　87
• 5.3.4 　管理内容可见性　　89
• 5.3.5 　应用样式增强　　90
• 5.4 　保持和增强可用性与可访问性　　90
• 5.4.1 　实现键盘访问　　91
• 5.4.2 　指派WAI-ARIA属性　　92
• 5.4.3 　测试可访问性　　93
• 5.4.4 　维持状态和“后退”按钮　　93
• 第6章　测试浏览器能力　　95
• 6.1 　EnhanceJS：一套能力测试框架　　95
• 6.2 　通过EnhanceJS应用增强　　98
• 6.3 　配置EnhanceJS　　100
• 6.3.1 　载入额外的样式表　　101
• 6.3.2 　载入额外的脚本　　102
• 6.3.3 　自定义体验切换链接　　103
• 6.3.4 　强制通过或不通过EnhanceJS测试　　104
• 6.4 　扩展EnhanceJS测试套件　　105
• 6.4.1 　用EnhanceJS选项修改测试套件　　105
• 6.4.2 　创建EnhanceJS的新实例或多个实例　　105
• 6.4.3 　为调试开启能力测试警告　　106
• 6.5 　在服务器上优化EnhanceJS　　107
• 第二部分　渐进增强实战
• 第7章　用渐进增强方法构建组件　　110
• 7.1 　组件是如何编写的　　110
• 7.2 　在组件各章里导航　　111
• 7.3 　可下载的范例代码　　112
• 第8章　可折叠内容　　113
• 8.1 　X光透视　　113
• 8.2 　创建可访问的可折叠内容　　115
• 8.2.1 　基础标记和样式　　115
• 8.2.2 　增强标记和样式　　116
• 8.2.3 　实现可折叠的增强脚本　　119
• 8.3 　使用可折叠脚本　　121
• 第9章　标签页　　122
• 9.1 　X光透视　　122
• 9.2 　创建标签页　　124
• 9.2.1 　基础标记和样式　　124
• 9.2.2 　增强标记和样式　　126
• 9.2.3 　标签页脚本　　130
• 9.3 　让标签页更进一步　　132
• 9.3.1 　书签和历史（后退按钮）追踪　　132
• 9.3.2 　自动轮换的标签页　　135
• 9.3.3 　引用外部标签内容　　136
• 9.3.4 　将标签页显示为手风琴组件　　136
• 9.4 　使用标签页脚本　　136
• 第10章　工具提示　　138
• 10.1 　X光透视　　138
• 10.2 　用title内容创建工具提示　　142
• 10.2.1 　基础标记和样式　　142
• 10.2.2 　增强标记和样式　　143
• 10.2.3 　工具提示增强脚本　　145
• 10.3 　用锚链接创建工具提示　　146
• 10.4 　用外部来源创建工具提示　　148
• 10.5 　使用工具提示脚本　　150
• 第11章　树形控件　　151
• 11.1 　X光透视　　151
• 11.2 　创建树形控件　　154
• 11.2.1 　基础标记和样式　　154
• 11.2.2 　增强标记和样式　　156
• 11.2.3 　树形控件增强脚本　　159
• 11.3 　使用树形控件脚本　　165
• 第12章　HTML5 canvas图表　　167
• 12.1 　X光透视　　168
• 12.2 　基础标记　　169
• 12.3 　创建可访问的图表　　172
• 12.3.1 　解析表格数据　　172
• 12.3.2 　用canvas实现数据可视化　　176
• 12.3.3 　添加表格增强样式　　183
• 12.3.4 　保持数据的可访问性　　184
• 12.4 　让canvas图表更进一步：visualize.js插件　　186
• 第13章　对话框和叠加层　　189
• 13.1 　X光透视　　190
• 13.2 　创建对话框　　191
• 13.2.1 　基础标记和样式　　191
• 13.2.2 　增强标记和样式　　193
• 13.2.3 　对话框增强脚本　　198
• 13.3 　让对话框更进一步　　202
• 13.4 　使用对话框脚本　　202
• 第14章　按钮　　206
• 14.1 　X光透视　　206
• 14.2 　给基于input的按钮添加样式　　208
• 14.2.1 　基础标记和样式　　208
• 14.2.2 　增强标记和样式　　210
• 14.2.3 　悬停状态增强脚本　　213
• 14.3 　创建带有复杂视觉格式的按钮　　214
• 14.3.1 　基础标记和样式　　215
• 14.3.2 　增强标记和样式　　215
• 14.3.3 　input转button增强脚本　　216
• 14.4 　使用input转button脚本　　219
• 14.5 　让按钮更进一步　　219
• 第15章　复选框、单选按钮和星级评分　　221
• 15.1 　X光透视　　222
• 15.2 　创建自定义复选框　　224
• 15.2.1 　基础标记　　224
• 15.2.2 　增强标记和样式　　225
• 15.2.3 　复选框脚本　　228
• 15.3 　创建自定义单选按钮　　230
• 15.3.1 　基础标记　　230
• 15.3.2 　增强标记和样式　　231
• 15.3.3 　单选按钮脚本　　233
• 15.4 　让自定义input更进一步：星级评分组件　　235
• 15.4.1 　基础标记　　236
• 15.4.2 　增强标记和样式　　237
• 15.4.3 　编写星级评分组件脚本　　238
• 15.5 　使用自定义input和星级评分脚本　　241
• 第16章　滑块　　242
• 16.1 　X光透视　　242
• 16.2 　创建滑块　　246
• 16.2.1 　基础标记和样式　　246
• 16.2.2 　增强标记和样式　　247
• 16.2.3 　滑块脚本　　252
• 16.3 　使用滑块脚本　　257
• 第17章　下拉菜单　　260
• 17.1 　X光透视　　260
• 17.2 　创建可访问的自定义下拉菜单　　262
• 17.2.1 　基础标记和样式　　262
• 17.2.2 　增强标记和样式　　263
• 17.2.3 　自定义下拉菜单增强脚本　　270
• 17.3 　让自定义下拉菜单更进一步：给选项添加高级样式　　277
• 17.4 　使用自定义下拉菜单脚本　　279
• 第18章　列表生成器　　281
• 18.1 　X光透视　　281
• 18.2 　创建列表生成器　　283
• 18.2.1 　基础标记和样式　　283
• 18.2.2 　增强标记和样式　　284
• 18.2.3 　列表生成器脚本　　287
• 18.3 　让列表生成器更进一步：多项选择、排序、自动完成和上下文菜单　　292
• 18.3.1 　多项选择　　292
• 18.3.2 　拖放排序　　292
• 18.3.3 　自动完成　　293
• 18.3.4 　上下文菜单　　293
• 18.4 　使用列表生成器脚本　　293
• 第19章　文件输入控件　　295
• 19.1 　X光透视　　296
• 19.2 　创建自定义的文件输入控件　　298
• 19.2.1 　基础标记和样式　　298
• 19.2.2 　增强标记和样式　　299
• 19.2.3 　自定义文件输入控件的脚本　　302
• 19.3 　使用自定义文件输入控件脚本　　304
• 放眼未来　　306