编辑推荐
HTML5和移动开发,都是目前最热门的话题。这两种话题的结合,有实际的应用开发需求。60多种技巧,帮助你构建针对iphone5、android、等手机系统的快速、响应式HTML移动网站。书中的特点在于简明收的风格,精心挑选的任务和问题,高效解决问题的清晰指导,举一反三,将解决方案用于其它情况。
内容简介
HTML5和移动开发,都是目前最热门的话题。这两种话题的结合,有实际的应用开发需求。60多种技巧,帮助你构建针对iphone5、android、等手机系统的快速、响应式HTML移动网站。书中的特点在于简明收的风格,精心挑选的任务和问题,高效解决问题的清晰指导,举一反三,将解决方案用于其它情况。
作者简介
当今,移动应用开发掀起软件行业的新一轮浪潮。然而,手机设备发展迅猛,屏幕尺寸各不相同、存储和性能仍有局限性,如何在多平台上创建高性能、响应式的移动网站,是程序员所要面对的首要挑站。
《HTML5移动Web开发实战》提供了应对这一挑战的解决方案。通过阅读本书,你将了解如何有效地利用的HTML5的那些针对移动网站的功能,横跨多个移动平台。全书共分10章,从移动Web、设备端配置和优化,变互、响应式设计、设备访问,调试、性能测试、富媒体等角度出发,包含了60多个实用的示倒,详细阐释如何构建快速、响应式的HTML5移动网站,适用于iOS、Android、Windows Phone和Black Berry等众多主流移动应用平台。
《HTML5移动Web开发实战》作者是HTML5 Boilerplate项目的成员,Mobile Boilerplate的主要开发人员。《HTML5移动Web开发实战》为那些致力于实现高性能、响应式、跨平台的HTML5移动网站的程序员量身打造,也适合对移动Web开发感兴趣的读者学习参考。
内页插图
精彩书评
石川,有超过5年的Web开发经验,他是HTML5 Boilerplate项目的成员,Mobile Boilerplate的主要开发人员,JavaScript Patterns项目的所有人。他现在是居住在美国和的独立开发者。他爱好阅读、旅游、美食以及电子技术、Indie音乐。译者简介刘旸:经历过各种技术和职位,最终发现前端开发才是其归宿,现为ThoughtWorks前端程序员,专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员,关注用户体验以及响应式设计、视差滚动等新兴设计元素。热衷于分享、社区活动、结交朋友。
目录
第1章 HTML5与移动网站
1.1 简介
1.2 确定网站的适用移动设备
1.2.1 用户最常用的平台和浏览器是什么
1.2.2 有多少用户使用支持现代脚本的移动设备
1.2.3 Google Analytics的替代品
1.2.4 Google Analytics的精准度
1.2.5 对服务端读取速度的担忧
1.3 配置移动开发工具
1.3.1 准备
1.3.2 实践
1.3.3 回顾
1.3.4 延伸
1.4 BlackBerry仿真器
1.4.1 准备
1.4.2 实践
1.5 配置移动开发环境
1.5.1 准备
1.5.2 实践
1.5.3 回顾
1.5.4 延伸
1.6 在移动网站中使用HTML
1.6.1 准备
1.6.2 实践
1.6.3 回顾
1.6.4 延伸
1.7 跨浏览器HTML
1.7.1 准备
1.7.2 实践
1.7.3 回顾
1.7.4 延伸
1.8 移动设计
1.8.1 准备
1.8.2 实践
1.8.3 回顾
1.8.4 延伸
1.9 定义一个内容策略
1.9.1 准备
1.9.2 实践
1.9.3 回顾
1.9.4 延伸
第2章 移动端的配置和优化
2.1 简介
2.2 通过界面图标启动Web应用
2.2.1 准备
2.2.2 实践
2.2.3 回顾
2.2.4 延伸
2.2.5 参考
2.3 避免文本字体大小重置
2.3.1 准备
2.3.2 实践
2.3.3 回顾
2.3.4 延伸
2.4 优化浏览器视口宽度设置
2.4.1 准备
2.4.2 实践
2.4.3 回顾
2.4.4 延伸
2.5 修复移动版Safari的re-flow scale问题
2.5.1 准备
2.5.2 实践
2.5.3 回顾
2.5.4 延伸
2.6 在浏览器中启动手机原生应用
2.6.1 准备
2.6.2 实践
2.6.3 回顾
2.6.4 延伸
2.7 iPhone下全屏模式启动
2.7.1 准备
2.7.2 实践
2.7.3 回顾
2.7.4 延伸
2.8 防止iOS在聚焦时自动缩放
2.8.1 准备
2.8.2 实践
2.8.3 回顾
2.8.4 延伸
2.9 禁用或限制部分WebKit特性
2.9.1 准备
2.9.2 实践
2.9.3 回顾
2.9.4 延伸
第3章 移动设备的交互方式
3.1 简介
3.2 利用触控来移动页面元素
3.2.1 准备
3.2.2 实践
3.2.3 回顾
3.2.4 延伸
3.2.5 参考
3.3 检测和处理横竖屏切换事件
3.3.1 准备
3.3.2 实践
3.3.3 回顾
3.3.4 延伸
3.3.5 参考
3.4 利用手势旋转页面元素
3.4.1 准备
3.4.2 实践
3.4.3 回顾
3.4.4 延伸
3.4.5 参考
3.5 利用滑动创建图库
3.5.1 准备
3.5.2 实践
3.5.3 回顾
3.5.4 延伸
3.5.5 参考
3.6 利用手势操作图片缩放
3.6.1 准备
3.6.2 实践
3.6.3 回顾
3.6.4 延伸
3.6.5 参考
第4章 构建快速响应式移动互联网站点
4.1 简介
4.2 使用HTML5语法构建页面
4.2.1 准备
4.2.2 实践
4.2.3 回顾
4.2.4 延伸
4.2.5 参考
4.3 使用CSS3特性做渐进增强
4.3.1 准备
4.3.2 实践
4.3.3 回顾
4.3.4 延伸
4.3.5 参考
4.4 使用响应式设计
4.4.1 准备
4.4.2 实践
4.4.3 回顾
4.4.4 延伸
4.5 优化polyfills脚本的加载速度
4.5.1 准备
4.5.2 实践
4.5.3 回顾
4.5.4 延伸
4.5.5 参考
4.6 检测用户客户端
4.6.1 准备
4.6.2 实践
4.6.3 回顾
4.6.4 延伸
4.7 使用书签气泡为应用添加桌面快捷方式
4.7.1 准备
4.7.2 实践
4.7.3 回顾
4.7.4 参考
4.8 构建可自动伸缩的文本输入框
4.8.1 准备
4.8.2 实践
4.8.3 回顾
4.8.4 延伸
4.8.5 参考
4.9 加速按钮反馈
4.9.1 准备
4.9.2 实践
4.9.3 回顾
4.9.4 延伸
4.9.5 参考
4.10 隐藏浏览器的地址栏
4.10.1 准备
4.10.2 实践
4.10.3 回顾
4.10.4 参考
4.11 构建移动互联网站点的站点地图
4.11.1 准备
4.11.2 实践
4.11.3 回顾
4.11.4 延伸
第5章 移动设备访问
5.1 简介
5.2 获取位置信息
5.2.1 准备
5.2.2 实践
5.2.3 回顾
5.2.4 延伸
5.3 跨浏览器定位
5.3.1 准备
5.3.2 实践
5.3.3 回顾
5.3.4 延伸
5.4 基于地理信息显示地图
5.4.1 准备
5.4.2 实践
5.4.3 回顾
5.4.4 延伸
5.5 实时显示地理位置
5.5.1 准备
5.5.2 实践
5.5.3 回顾
5.6 使用DeviceOrientation事件
5.6.1 准备
5.6.2 实践
5.6.3 回顾
5.6.4 延伸
5.7 使用foursquare的定位
5.7.1 准备
5.7.2 实践
5.7.3 回顾
5.7.4 延伸
第6章 移动富媒体
6.1 简介
6.2 移动设备上播放音频
6.2.1 准备
6.2.2 实践
6.2.3 回顾
6.2.4 延伸
6.3 移动设备上播放视频
6.3.1 准备
6.3.2 实践
6.3.3 回顾
6.3.4 延伸
6.4 使用离线缓存
6.4.1 准备
6.4.2 实践
6.4.3 回顾
6.4.4 延伸
6.5 使用网络存储(Web Storage)
6.5.1 准备
6.5.2 实践
6.5.3 回顾
6.5.4 延伸
6.6 使用Web Workers
6.6.1 准备
6.6.2 实践
6.6.3 回顾
6.7 使用session和history API构建类Flash导航效果
6.7.1 准备
6.7.2 实践
6.7.3 回顾
6.7.4 延伸
第7章 移动设备调试
7.1 简介
7.2 使用Opera Dragonfly远程调试
7.2.1 准备
7.2.2 实践
7.2.3 回顾
7.2.4 延伸
7.3 使用weinre远程调试
7.3.1 准备
7.3.2 实践
7.3.3 回顾
7.4 在移动设备上使用Firebug
7.4.1 准备
7.4.2 实践
7.4.3 回顾
7.4.4 延伸
7.5 使用JS Console远程调试
7.5.1 准备
7.5.2 实践
7.5.3 回顾
7.5.4 延伸
7.6 设置移动Safari调试器
7.6.1 准备
7.6.2 实践
7.6.3 回顾
第8章 服务器端性能调优
8.1 简介
8.2 防止移动设备转码(Mobile Transcoding)
8.2.1 准备
8.2.2 实践
8.2.3 回顾
8.2.4 延伸
8.3 添加移动设备支持的MIME类型
8.3.1 准备
8.3.2 实践
8.3.3 回顾
8.3.4 延伸
8.4 正确显示cache manifest文件
8.4.1 准备
8.4.2 实践
8.4.3 回顾
8.5 在头文件设置未来过期时间
8.5.1 准备
8.5.2 实践
8.5.3 回顾
8.5.4 延伸
8.6 使用Gzip压缩
8.6.1 准备
8.6.2 实践
8.6.3 回顾
8.6.4 延伸
8.7 移除ETags
8.7.1 准备
8.7.2 实践
8.7.3 回顾
8.7.4 延伸
第9章 移动性能测试
9.1 简介
9.2 使用Blaze的移动设备速度测试
9.2.1 准备
9.2.2 实践
9.2.3 回顾
9.2.4 延伸
9.3 在线分析移动页面速度
9.3.1 准备
9.3.2 实践
9.3.3 回顾
9.3.4 延伸
9.4 PCAP网站性能分析
9.4.1 准备
9.4.2 实践
9.4.3 回顾
9.4.4 延伸
9.5 移动版HTTP Archive
9.5.1 准备
9.5.2 实践
9.5.3 回顾
9.5.4 延伸
9.6 使用Jdrop存储性能数据
9.6.1 准备
9.6.2 实践
9.6.3 回顾
9.6.4 延伸
第10章 拥抱移动互联网特性
10.1 简介
10.2 window.onerror
10.2.1 准备
10.2.2 实践
10.2.3 回顾
10.2.4 延伸
10.3 使用ECMAScript 5中的新方法
10.3.1 准备
10.3.2 实践
10.3.3 回顾
10.3.4 延伸
10.4 HTML5中新的输入类型
10.4.1 准备
10.4.2 实践
10.4.3 回顾
10.4.4 延伸
10.5 在HTML中内嵌SVG
10.5.1 准备
10.5.2 实践
10.5.3 回顾
10.5.4 延伸
10.6 position:fixed
10.6.1 准备
10.6.2 实践
10.6.3 回顾
10.7 overflow:scroll
10.7.1 准备
10.7.2 实践
10.7.3 回顾
10.7.4 延伸
……
前言/序言
《精通响应式Web设计:驾驭现代Web前端技术》 内容简介 在这个数字浪潮席卷全球的时代,Web的边界正在以前所未有的速度拓展。从桌面到平板,再到形态各异的智能手机,用户访问Web内容的设备日益多样化,这为Web开发者带来了巨大的挑战,同时也催生了新的机遇。单一的、固定宽度的Web站点已无法满足日益增长的用户需求。我们迫切需要一种能够灵活适应各种屏幕尺寸,提供一致而优质用户体验的开发方式。《精通响应式Web设计:驾驭现代Web前端技术》正是为了应对这一时代需求而生,它将带领您深入探索现代Web前端开发的精髓,掌握构建适应性强、性能卓越、交互丰富的Web应用的核心技术。 本书不拘泥于单一的技术框架或语言,而是放眼于Web技术生态的整体发展,重点聚焦于那些构成现代响应式Web设计基石的关键技术。我们将从最基础但却最核心的HTML结构入手,探讨如何语义化地构建Web页面,确保内容的结构清晰、易于理解,这不仅对搜索引擎优化(SEO)至关重要,也是未来Web技术发展的必然趋势。在CSS方面,我们将深入剖析CSS3的强大能力,从响应式布局的核心——Flexbox和CSS Grid,到精美的视觉呈现——过渡、动画、渐变以及更先进的选择器和伪类。本书将引导您理解如何运用这些强大的CSS特性,实现跨设备的无缝视觉体验,让您的设计在任何屏幕上都能绽放光彩。 JavaScript作为Web交互的灵魂,在本中也将占据重要地位。我们将探索现代JavaScript(ES6+)的强大特性,如箭头函数、模块化、Promise、async/await等,这些新特性将极大地提升代码的可读性、可维护性和开发效率。更重要的是,我们将讨论如何运用JavaScript与DOM API进行交互,实现动态的内容加载、用户行为的响应以及复杂的用户界面组件的构建。本书将强调如何通过JavaScript为用户提供更加丰富、流畅和智能的交互体验,让Web应用不再是静态的信息展示,而是充满活力的互动平台。 除了核心的HTML、CSS和JavaScript,我们还将触及构建现代Web应用不可或缺的其他关键技术和理念。例如,性能优化是现代Web开发绕不开的话题。本书将详细讲解如何通过图片优化、代码压缩、缓存策略、懒加载等技术手段,显著提升Web应用的加载速度和运行效率,确保用户在各种网络环境下都能获得流畅的体验。我们将探讨如何利用浏览器开发者工具来诊断性能瓶颈,并给出切实可行的解决方案。 在项目构建和模块化方面,本书将介绍现代前端开发中常用的工具和流程。我们将讲解诸如Webpack、Vite等模块打包工具的配置和使用,理解它们如何帮助我们管理项目依赖、打包代码、进行热重载,从而极大地提升开发效率。模块化开发理念将贯穿始终,引导开发者构建可复用、可维护的代码结构,应对日益复杂的Web项目。 本书还特别关注Web的可访问性(Accessibility)和语义化。我们深知,一个真正优秀的Web应用应该服务于所有用户,包括那些有特殊需求的用户。因此,我们将深入探讨如何编写符合WCAG(Web Content Accessibility Guidelines)标准的HTML和CSS,如何利用ARIA(Accessible Rich Internet Applications)属性提升用户体验,确保所有用户都能平等地访问和使用Web内容。语义化HTML的实践也将贯穿始终,强调如何使用恰当的HTML标签来表达内容的意义,这不仅有利于SEO,也是构建健壮、可持续Web应用的基础。 在用户体验(UX)和用户界面(UI)设计方面,本书将结合技术实现,探讨如何将优秀的设计理念转化为实际的Web界面。我们将讨论如何设计信息架构、如何进行导航设计,以及如何运用视觉元素来引导用户,提升用户满意度。本书将强调“移动优先”的设计原则,以及如何通过响应式设计来实现不同设备的最佳体验。 此外,随着Web技术的不断发展,新兴的技术和框架层出不穷。本书将在原理层面,为读者打下坚实的基础,使其能够快速理解和适应未来可能出现的新技术。例如,我们将讨论Web Components的概念,以及它们如何为构建可复用的UI组件提供一种标准化的解决方案。对于诸如SPA(Single Page Application)等现代Web应用架构模式,也将通过JavaScript和相关技术进行阐述,帮助读者理解其背后的原理和优势。 本书的编写风格力求严谨、清晰且具有实践指导意义。每一章节都将从基础概念讲起,逐步深入到高级技术和最佳实践,并辅以丰富的代码示例和实际案例分析。我们并非提供一个现成的“菜谱”,而是致力于传授一种解决问题的思维方式和一套扎实的技术功底。读者在阅读本书后,将能够独立分析和解决各种响应式Web设计和前端开发中的挑战,并且有能力去学习和掌握新的技术。 无论您是初入Web开发领域的新手,渴望建立扎实的基础,还是经验丰富的开发者,希望系统地梳理和深化对现代Web前端技术的理解,《精通响应式Web设计:驾驭现代Web前端技术》都将是您不可或缺的参考。它将帮助您从容应对日新月异的Web技术浪潮,自信地构建出兼具美学、性能和用户体验的下一代Web应用。让我们一起踏上这段探索现代Web前端技术的精彩旅程!