内容简介

Todd Parker

Filament集团公司创始人，具有12年以上创建高度实用、可访问和直观界面的经验。Todd曾在Zefer公司和CSC顾问公司担任首席体验设计师。Communication Arts杂志对Todd卓越的设计工作给予了充分肯定。

Patty Toland

Filament集团联合创始人，具有20多年的企业和机构客户咨询经验。Patty的专长是制定稳健的信息和传播策略，包括品牌推广、成分分析、信息架构和系统设计，以及文字创作。Patty曾供职于Zefer公司、Kohn Cruikshank公司和哈佛商学院。

Scott Jehl

设计和开发技艺俱佳。加入Filament集团公司之前，Scott曾为《新英格兰医学期刊》、Footjoy Golf和阿斯彭/斯诺马斯度假村等客户提供过服务。他还运营着在线网站地图工具WriteMaps.com。此外，他还是jQuery设计团队成员。

Maggie Costello Wachs

Filament集团的编程和产品负责人。Maggie在前端编程领域有着高超的专业水准，特别致力于编写兼容标准的标记、CSS和脚本，以实现与渐进增强的最佳搭配。加盟Filament集团之前，Maggie曾供职于Monitor集团和Zefer公司。

作品目录

第一部分　测试驱动的渐进增强方法

第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 　定义内容层级并将组件映射到HTML8

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 　DOCTYPE64

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 　如何正确引用JavaScript83

5.1.1 　避免内联JavaScript83

5.1.2 　引用外部JavaScript84

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 　配置EnhanceJS100

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 　在服务器上优化EnhanceJS107

第二部分　渐进增强实战

第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