《渐进增强的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