韩国地图示例

发表于 & 归档在 HTML5, 地图.

地图是Qunee图形组件的主要方向之一,发展过程中地图的实现方式比较多,比如基于SVG数据或者自定的json格式数据解析,支持geoJSON和TopoJSON格式,还能叠加leaflet地图

下面的示例是韩国地图,以首尔为中心墨卡托投影,数据格式为topoJSON,数据取自:https://github.com/southkorea/southkorea-maps

屏幕快照 2015-09-14 下午5.42.30

Qunee for HTML5 V2.0新版本发布

发表于 & 归档在 HTML5.

经过四个月的开发,Qunee for HTML5 V2.0新版本终于正式发布了,此次版本有大幅改进,修复了一些bug,增加了示例,欢迎访问和升级

增加Qunee for HTML5英文版本

Qunee official website: http://qunee.com/index-en.html
Qunee online documents (english): http://doc.qunee.com/display/h5en

网站改版

官网和在线演示都做了改版,风格更加扁平 demo.qunee.com,增加搜索,全屏等功能

qunee demo v2.0

Safari Web Content Guide – 数据的客户端存储

发表于 & 归档在 HTML, Web.

网页或网站程序有几种方式在客户端存储数据,你可以使用 JavaScript database 类,详见 Safari Client-Side Storage and Offline Applications Programming Guide, 在客户端存储程序数据或使用 HTML5 缓存资源文件,可以使网页在离线状态下依然可以显示,同样使用客户端缓存也可以提高网页的加载速度,降低网络连接数。本章节将描述如何利用HTML5程序缓存和数据的本地存储

要在客户端缓存资源,首先需要配置一个资源列表文件,并在主网页中申明这个列表文件,然后你可以使用JavaScript操作缓存以及相关操作。当没有可用网络时,之前被加载过的资源依旧可以正常显示。此外程序还可以缓存浏览器状态,这样之前在这太电脑或者设备上使用过的网页程序在离线时依旧可用 – 如在飞行模式

Safari Web Content Guide – 配置网页应用程序

发表于 & 归档在 HTML, Web.

网页应用程序要设计成与本地程序有相似的界面和操作方式,举个例子,它可以缩放填充整个iPhone OS屏幕,这样你可以无缝的将你的网页程序放到主屏上,如同其他本地程序那样,这些为iPhone OS做的设置在其他平台下是不被理睬的。

举个例子,你可以设置一个特殊的图标,当它被添加到主屏时可以显示这个图标,这在 “Specifying a Webpage Icon for Web Clip.”中有详细描述。 当你的网页程序通过主屏启动时,你可以隐藏Safari界面,参阅 “Changing the Status Bar Appearance” 和 “Hiding Safari User Interface Components,” ,所有这些设置在其他平台下都是无效的。

参阅 “Viewport Settings for Web Applications” 了解网页程序中视口的使用

Safari Web Content Guide – 表单设计

发表于 & 归档在 HTML, Web.

表单设计

iPhone OS上有很多调整表单的方法,这使表单更好用。在iPhone OS 有限的屏幕下,表单应该整洁,尤其当你为iPhone OS专门设计网页时,网页程序可以有很好的用户体验,甚至如同本地程序一样的效果,因此,用户期待他们如同本地程序同样的行为。

本章说明如何让你的表单在iPhone OS中很好的工作:

  • 考虑键盘显示隐藏时所占用的屏幕空间
  • 使用CSS扩展创建定制控件
  • 自动纠错与大写字母的使用

参阅 iPhone Human Interface Guidelines for Web Applications 了解更多iPhone OS下表单布局和网页程序设计的技巧,阅读 “Hiding Safari User Interface Components” 学习如何使用全屏,如同本地程序。

Safari Web Content Guide – 自定义样式表

发表于 & 归档在 HTML, Web.

定制样式表

配置视口是优化iPhone OS下网页最重要的途径,但样式表能提供更多的优化手段。举个例子,使用iOS CSS扩展可以控制文字大小和元素的高亮,如果你使用条件CSS,可以不影响网页在其他浏览器下的显示效果。

查阅 “Optimizing Web Content” 了解如何使用条件CSS, “CSS Basics” 学习如何向HTML中添加CSS,参阅Safari CSS Reference 获取完整的Safari所支持的 CSS 属性列表