《HTML5移动Web开发实战》—— 1.9 定义一个内容策略

简介:

本节书摘来异步社区《HTML5移动Web开发实战》一书中的第1章,第1.9节,作者:石川,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.9 定义一个内容策略

HTML5移动Web开发实战
适用浏览器:所有

通过分析工具搜集到的数据,你可以定义一个内容策略,这对已经有了一个桌面网站的人是非常有用的。

1.9.1 准备

确认你已经把分析工具的Javascript代码嵌入到网站中。

1.9.2 实践

1.进入分析工具,在左边导航栏中点击受众群体 | 移动设备,如图1-11所示。

1c7b2e5b8c4c31ff8fbc7e9b9c4af9a2718404b7

2.现在点击设备,你可以看到人们使用什么设备浏览你的网站,如图1-12所示。

16927c1821d4028b877a767174a8979997bec0d6

1.9.3 回顾

Google Analytics可以分析浏览你的网站最常用的移动设备,也可以分析你的网站最受欢迎的部分。

1.9.4 延伸

人们使用移动设备上网的目的与使用桌面设备上网是不同的,例如:对于一个产品销售网站,大部分用户使用移动设备常常查看联系方式、地址和服务,而使用电脑的用户常常搜索产品目录、公司简介和产品描述。Google Analytics可以分析哪个部分或页面是访问量最大的,除了Google Analytics,你也可以使用我们早前发现的PercentMobile,如图1-13所示。

85e1ee262f94f3d47b2ea56c45cb6114841855c1

浏览器分级
使用分析工具是决定支持哪些浏览器的方法之一,另一种是依据浏览器分级。jQuery Mobile有一个很好的浏览器支持表:http://jquerymobile.com/gbs/,同时还有一个jQuery Mobile的ppt讨论了所有移动网站开发策略:http://www.slideshare.net/jeresig/testing-mobile-javascript

移动设备信息
我与Jonathan Neal和其他很多人合作总结了一个移动设备中前端相关的信息表:

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices

它包含了当前市面上大部分的智能手机,以及他们的屏幕尺寸、DPI(Dots Per Inch,点每英寸)和操作系统。

相关文章
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
1533 10
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
457 6
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
275 5
|
XML JSON 安全
定义Web服务
【10月更文挑战第18天】定义Web服务
400 12
|
安全 前端开发 JavaScript
如何检查和验证 HTML 中的 CSP 策略是否有效
本文介绍如何检查和验证 HTML 中的 Content Security Policy (CSP) 策略是否有效,包括使用浏览器开发者工具、在线验证工具和常见问题排查方法。
|
安全 应用服务中间件 Go
如何在 HTML 中添加 CSP 策略
内容安全策略(CSP)是一种安全机制,用于防止跨站脚本攻击等安全问题。本文将介绍如何在 HTML 中添加 CSP 策略,以提高网站的安全性。
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
1159 10
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。