HTML5移动应用开发入门经典
2013-3
人民邮电出版社
凯瑞恩
林星
无
《HTML5移动应用开发入门经典》总共分为24章,以示例的方式对如何使用HTML5及相关技术进行移动应用开发做了全面而细致的介绍。《HTML5移动应用开发入门经典》首先讲解了HTML5的起源以及它为什么适用于移动设备,然后讲解了HTML5的基本元素以及所做的改进、canvas(画布)、视音频、微格式、微数据、拖曳等新增特性,还讲解了WebSocket、WebWorkers、Web存储、离线Web应用程序、地理定位等新增的API。同时,《HTML5移动应用开发入门经典》还针对不同平台(如iOS、BlackBerry、Android)的移动设备、不同的浏览器,就如何开发高可用性的移动应用程序进行了讲解。
Jennifer Kyrnin自1997年就开始在线讲授HTML、XML及Web设计。她先后建立并维护过各种规模的网站,其中包括小到只包含单个页面的简单网站,也包括大到包含数百万个页面,供世界各地的用户访问的数据库网站。她与丈夫、儿子以及许多宠物一起生活在华盛顿州的一个小农场里。
第1章 使用HTML5改进移动Web应用的开发 1 1.1 了解HTML5的由来 1 1.1.1 XML及XHTML 2 1.1.2 HTML5的诞生 2 1.2 了解HTML5的不同之处 3 1.3 定义Web应用 3 1.4 使用开放Web标准 4 1.5 在iOS和Android设备中使用HTML5 5 1.6 编写移动网站 6 1.6.1 移动设备的屏幕尺寸和分辨率 6 1.6.2 移动用户需要的内容 6 1.6.3 使用的HTML、CSS及JavaScript是否有效且简洁 7 1.6.4 网站是否需要为移动用户使用独立域名 8 1.6.5 网站需要通过怎样的测试 8 1.7 总结 9 1.8 问与答 9 1.9 测验 10 1.9.1 问题 10 1.9.2 练习 10 第2章 移动开发中新的HTML5标签和属性 11 2.1 HTML5中的新标签 11 2.1.1 新布局标签 11 2.1.2 其他语义元素 13 2.1.3 新的多媒体标签 14 2.1.4 新的表单功能 16 2.1.5 更好的国际化支持 17 2.2 HTML5的新属性 17 2.3 HTML4标签和属性的变化 19 2.4 HTML5中的HTML语法变化 20 2.5 HTML5标签及属性对移动设备的支持 20 2.6 HTML5给移动Web开发带来的好处 21 2.6.1 HTML5包含了性能优良的API 21 2.6.2 HTML5 21 2.6.3 用户更青睐Web应用程序 21 2.7 总结 22 2.8 问与答 22 2.9 测验 23 2.9.1 问题 23 2.9.2 练习 23 第3章 用CSS3设计移动页面样式 25 3.1 CSS简介 25 3.1.1 创建CSS样式表 25 3.1.2 使用CSS更改字体 27 3.1.3 使用CSS设计布局 28 3.2 CSS3的新增功能 31 3.2.1 圆角 32 3.2.2 盒阴影及文字阴影 34 3.2.3 透明色 34 3.3 在移动设备上使用CSS3 34 3.4 总结 35 3.5 问与答 35 3.6 测验 35 3.6.1 问题 36 3.6.2 练习 36 第4章 移动设备检测及对HTML5的支持 37 4.1 选择HTML5元素 37 4.2 Android及iOS对HTML5的支持 38 4.3 检测HTML5功能 39 4.3.1 利用全局元素检测属性 40 4.3.2 利用创建的元素检测属性 40 4.3.3 检测方法能否返回正确的值 41 4.3.4 检测元素是否保留值 42 4.3.5 处理IE8、IE7和IE6 43 4.4 优雅降级 44 4.5 使用CSS3媒体查询检测移动浏览器 45 4.5.1 检测宽度与高度 46 4.5.2 检测屏幕方向 47 4.5.3 检测屏幕纵横比 47 4.5.4 检测颜色 47 4.5.5 检测分辨率 47 4.5.6 检测电视及网格设备 47 4.6 测试应用程序 48 4.7 总结 48 4.8 问与答 48 4.9 测验 49 4.9.1 问题 49 4.9.2 练习 49 第5章 JavaScript和HTML5Web应用程序 51 5.1 JavaScript是什么 51 5.1.1 创建rollover 53 5.1.2 表单数据验证 54 5.1.3 打开新窗口 54 5.1.4 Cookies的设置及读取 55 5.2 什么是jQuery 55 5.2.1 使用jQuery制作rollover 57 5.2.2 使用jQuery进行表单数据验证 58 5.2.3 在Web应用程序中使用jQuery 60 5.3 使用jQueryMobile 61 5.4 总结 62 5.5 问与答 63 5.6 测验 63 5.6.1 问题 63 5.6.2 练习 64 第6章 创建移动Web应用 65 6.1 建设一个在所有设备上都能运行的网站 65 6.2 确定应用程序类型 66 6.3 用HTML创建应用程序 67 6.4 使用CSS改善HTML外观 69 6.4.1 更改字体 69 6.4.2 加入颜色及背景图像 71 6.4.3 设置布局样式 72 6.5 加入移动meta标签以更有效地创建HTML5页面 73 6.6 针对移动用户来优化网站 75 6.7 总结 77 6.8 问与答 77 6.9 测验 78 6.9.1 问题 78 6.9.2 练习 78 第7章 将站点升级至HTML5 79 7.1 确定何时从HTML4升级及升级的具体方式 79 7.1.1 现有标准的通行浏览器支持 80 7.1.2 逐渐升级至HTML5 81 7.1.3 来访浏览器类型评估 82 7.1.4 移动互联网浏览趋势 83 7.2 当前启用的HTML5特性 83 7.3 支持HTML5的浏览器 84 7.4 将HTML5特性作为额外内容添加至网站 85 7.5 将网站变为杀手级移动应用的HTML5特性 86 7.6 总结 86 7.7 问与答 87 7.8 测验 87 7.8.1 问题 88 7.8.2 练习 88 第8章 将Web应用迁移至移动设备 89 8.1 选择Web编辑器 89 8.2 应用程序测试 90 8.3 内容评估 92 8.4 为移动设备调整可视化的设计 93 8.4.1 使用设计元素创建优秀的移动应用程序 93 8.4.2 典型设计 96 8.5 HTML5及CSS3检测 97 8.5.1 多设备支持 98 8.5.2 在其他设备上进行成品应用程序评估 99 8.5.3 桌面模拟器 99 8.5.4 在线模拟器 100 8.6 旧式浏览器中运行应用程序 100 8.7 总结 102 8.8 问与答 103 8.9 测验 103 8.9.1 问题 103 8.9.2 练习 104 第9章 使用HTML5分节元素和语义元素添加语含义 105 9.1 什么是分节元素 105 9.2 使用新的分节元素 106 9.2.1 使用分节元素生成大纲 106 9.2.2 元素 107 9.2.3 元素 107 9.2.4 元素 109 9.2.5 元素 110 9.2.6 分节根元素 111 9.2.7 Heading、Header以及Footer元素 112 9.3 HTML语义标记 115 9.3.1 HTML4语义元素 115 9.3.2 更新HTML4元素的语义 116 9.3.3 HTML5的新语义元素 116 9.4 总结 118 9.5 问与答 118 9.6 测验 119 9.6.1 问题 119 9.6.2 练习 119 第10章 使用HTML5canvas元素绘图 121 10.1 使用canvas元素 121 10.2 在元素中绘制形状 122 10.2.1 绘制矩形 124 10.2.2 绘制多边形和线条 127 10.2.3 绘制圆形 130 10.3 在canvas上书写文字 132 10.4 显示图像 133 10.4.1 缩放和裁切图像 134 10.4.2 添加图案 135 10.5 canvas与SVG或Flash的区别 136 10.6 总结 137 10.7 问与答 137 10.8 测验 138 10.8.1 问题 138 10.8.2 练习 138 第11章 HTML5字体与排版 139 11.1 定义排版元素 139 11.1.1 字体 140 11.1.2 间距 142 11.1.3 断字符 144 11.1.4 未对齐 146 11.1.5 页首孤行和页尾孤行 146 11.2 使用适当的排版字符实体 147 11.2.1 引号 147 11.2.2 商业标记 147 11.2.3 高级符号 147 11.3 了解开放字体格式 148 11.3.1 通过@font—face使用WOFF 149 11.3.2 为WOFF提供备选方案 150 11.4 总结 151 11.5 问与答 151 11.6 测验 152 11.6.1 问题 152 11.6.2 练习 152 第12章 HTML5的音频和视频 153 12.1 HTML5视频、音频与Flash的比较 153 12.2 选择兼容性最好的视频格式 154 12.2.1 MP4或H.264 155 12.2.2 ogg/Theora 155 12.2.3 WebM 155 12.3 选择拥有最广泛支持的音频编解码器 156 12.3.1 MP3 156 12.3.2 Vorbis 156 12.3.3 WAV 156 12.4 HTML5的新媒体元素 156 12.5 用于扩展媒体的属性 159 12.5.1 音频及视频属性 159 12.5.2 视频 160 12.5.3 源属性 160 12.5.4 track属性 161 12.6 为IE创建回退选项 161 12.7 使用API方法创建自定义播放控制器 163 12.8 总结 164 12.9 问与答 164 12.10 测验 165 12.10.1 问题 165 12.10.2 练习 166 第13章 HTML5表单 167 13.1 可用性更强的HTML5表单 167 13.1.1 占位符文本 168 13.1.2 自动聚焦 169 13.1.3 自动完成及数据列表 170 13.2 HTML5输入类型 171 13.2.1 数字类型 172 13.2.2 日期和时间类型 173 13.2.3 Email、URL、颜色和搜索框类型 175 13.3 其他新表单元素 176 13.3.1 密钥生成表单字段 177 13.3.2 表单输出元素 177 13.3.3 命令菜单列表 177 13.4 表单验证 178 13.5 总结 181 13.6 问与答 182 13.7 测验 182 13.7.1 问题 182 13.7.2 练习 183 第14章 使用HTML5编辑内容和用户互动 185 14.1 新的contenteditable属性 185 14.2 execCommand方法 187 14.3 在Web页面中添加拼写检查 189 14.4 隐藏元素 190 14.5 HTML5附加的UI组件 190 14.6 UI以及编辑特性对浏览器的支持 192 14.7 总结 194 14.8 问与答 194 14.9 测验 194 14.9.1 问题 194 14.9.2 练习 195 第15章 微格式与微数据 197 15.1 使用微格式 197 15.1.1 微格式的好处 199 15.1.2 使用微格式的原则 199 15.1.3 正在使用的微格式 200 15.2 使用微数据 202 15.3 使用RDFa 204 15.4 选择格式 204 15.5 移动设备与微格式 205 15.5.1 使用微格式或是微数据的理由 205 15.5.2 两种非正式的微格式 205 15.6 总结 206 15.7 问与答 206 15.8 测验 207 15.8.1 问题 207 15.8.2 练习 207 第16章 使用HTML5的拖曳功能 209 16.1 拖曳应用 209 16.2 拖曳事件 210 16.3 拖曳属性 212 16.4 有用的CSS扩展 213 16.5 创建拖曳接口 213 16.5.1 定义可拖曳对象 214 16.5.2 为可拖曳对象设置拖曳事件 214 16.5.3 定义放置区 214 16.5.4 设置拖曳区事件 215 16.5.5 在对象间传递信息 215 16.5.6 定义操作特效 215 16.6 在iOS上使用拖曳 219 16.6.1 让iOS上的元素变得可拖曳 219 16.6.2 将iOS上的元素变为放置区 220 16.7 总结 221 16.8 问与答 221 16.9 测验 222 16.9.1 问题 222 16.9.2 练习 222 第17章 HTML5链接 223 17.1 HTML5的链接的改进 223 17.1.1 超链接及外联资源 223 17.1.2 的属性变化 224 17.1.3 链接区块级元素 225 17.1.4 占位符链接 226 17.1.5 HTML5的热点图 226 17.1.6 HTML5中新的全局属性 226 17.2 链接类型和关系 227 17.3 使用新的链接类型 229 17.3.1 alternate链接类型 229 17.3.2 author链接类型 229 17.3.3 bookmark和external链接类型 229 17.3.4 help、license、tag和search链接类型 230 17.3.5 icon链接类型 230 17.3.6 nofollow和noreferrer类型 230 17.3.7 pingback类型 231 17.3.8 prefetch类型 231 17.3.9 previous和next链接类型 231 17.3.10 sidebar链接类型 232 17.3.11 stylesheet类型 232 17.4 总结 232 17.5 问与答 233 17.6 测验 233 17.6.1 问题 234 17.6.2 练习 234 第18章 Web应用程序API和数据集 235 18.1 创建Web应用程序 235 18.1.1 Web应用程序API 235 18.1.2 脚本处理 236 18.1.3 iOS中的单击事件 238 18.1.4 计时器 238 18.1.5 用户提示 240 18.1.6 系统信息 241 18.2 数据集和data—*属性 242 18.3 总结 244 18.4 问与答 244 18.5 测验 244 18.5.1 问题 245 18.5.2 练习 245 第19章 WebSocket、WebWorkers和文件 247 19.1 WebSocket双向通信 247 19.1.1 WebSocket的安全隐患 247 19.1.2 WebSocket的优点 248 19.1.3 建立WebSocket 249 19.2 使用WebWorkers在后台运行脚本 249 19.3 使用文件API操作客户端文件 254 19.3.1 建立输入字段 255 19.3.2 获取文件信息 255 19.3.3 读取文件信息 256 19.4 总结 259 19.5 问与答 259 19.6 测验 260 19.6.1 问题 260 19.6.2 练习 260 第20章 离线Web应用程序 261 20.1 创建离线应用程序以及让普通应用程序离线工作 261 20.2 缓存清单 262 20.2.1 使用缓存清单文件 263 20.2.2 编写缓存清单 263 20.3 将DOM事件和属性用于离线应用程序 265 20.4 调试应用程序缓存 268 20.5 总结 269 20.6 问与答 269 20.7 测验 270 20.7.1 问题 270 20.7.2 练习 270 第21章 HTML5的Web存储 271 21.1 什么是Web存储 272 21.1.1 Web存储与Cookie的不同之处 272 21.1.2 会话存储和本地存储 273 21.1.3 使用Web存储 274 21.2 WebSQL与IndexedDB 276 21.2.1 WebSQL数据库 276 21.2.2 IndexedDatabaseAPI 277 21.3 总结 283 21.4 问与答 283 21.5 测验 284 21.5.1 问题 284 21.5.2 练习 284 第22章 利用HistoryAPI控制浏览器历史记录 285 22.1 控制浏览器历史的原因 285 22.2 HistoryAPI的方法 286 22.3 使用HistoryAPI 287 22.3.1 使用HistoryAPI保存当前位置 287 22.3.2 使用HistoryAPI改变URL 289 22.4 使用HistoryAPI的风险和麻烦 293 22.4.1 HistoryAPI只能在同一个域名下工作 293 22.4.2 利用HistoryAPI钓鱼 293 22.4.3 烦人的动画URL 294 22.5 总结 294 22.6 问与答 294 22.7 测验 295 22.7.1 问题 295 22.7.2 练习 295 第23章 使用Geolocation添加地理位置检测 297 23.1 Geolocation是什么 297 23.1.1 使用地理定位 298 23.1.2 使用GeolocationAPI 299 23.1.3 使用其他定位数据选项 300 23.1.4 旧式浏览器的回退选项 302 23.2 隐私与地理位置 303 23.3 创建一个移动地理定位的应用 304 23.4 总结 308 23.5 问与答 308 23.6 测验 309 23.6.1 问题 309 23.6.2 练习 309 第24章 将HTML5应用程序转换为原生应用程序 311 24.1 HTML5应用程序与原生应用程序的区别 311 24.1.1 原生应用程序的优点 312 24.1.2 HTML5应用程序的优点 313 24.2 转换到原生应用程序 314 24.2.1 如何着手开始转换 314 24.2.2 使用PhoneGap转换原生app 315 24.3 创建应用程序图标 318 24.4 测试应用程序 319 24.5 在app商店出售应用程序 321 24.6 原生应用程序并非唯一选择 321 24.7 总结 322 24.8 问与答 322 24.9 测验 323 24.9.1 问题 323 24.9.2 练习 323 附录A 测验答案 325 附录B HTML5元素和属性 335 附录C HTML5及移动应用资源 343
版权页: 插图: 问:内容太多怎么办? 问:本章提到了许多不同的脚本和框架,哪一款是最好的呢? 答:我在自己的一个网站中用到本章中提过的几乎所有脚本,我并不认为哪个脚本或框架更差。在框架方面,jQuery Mobile可能是最好的,但是SenchaTouch也很强大,而且它还提供许多设备专属特性。在脚本方面,Modemizr运行得最好,但是HTML5Shiv非常容易添加而且无须打理。应当尝试不同的脚本和框架,并自行决定最喜欢哪一款。 如果用户填写完表单时还留下了一个空白字段,将出现一条错误信息。此类验证在移动设备上也能正常工作,如图5.2所示。 5.2.3在Web应用程序中使用jQuery 因为jQuery的易用性,它也十分适合用于开发Web应用程序。然而,易用性并非Web应用程序开发中所需要考虑的唯一原因——还有许多Javascript库都很好用。 iQuery适合用于开发Web应用程序的原因如下。 jQuery精炼了JaVaScript——使用jQuery的代码行数仅为JavaScript的大约五分之一,而Web应用程序,特别是移动设备应用程序应当非常小巧。 iQuery有强大的浏览器支持一开发者们一直在持续升级jQuery库,以保证最大限度的浏览器支持,因此Web开发者不需要自己去研究解决所有的脚本跨浏览器问题。 iQuery使用开发者熟悉的语法——熟悉CSS选择器用法的开发者都能够理解jQuery。
全球销量逾百万册的系列图书新品;直观、循序渐进的学习教程,掌握关键知识的最佳起点,采用步骤式讲解,手把手教读者掌握移动应用开发的必备知识;每章内容针对初学者精心设计,1小时轻松阅读学习,24小时掌握关键知识;书中代码示例可供下载,帮助读者通过实践提高应用技能,巩固所学知识。
无
挺好的一本书,讲的挺详细。
从头到尾就只翻出两三张图,其它全是文字,真不知道按照这个做出来的网页到底是什么样子啊!