Posts Tagged qunee

使用Qunee组件制作在线地图

地图是一种普遍应用,按准确度分精确地图(GIS)和示意地图(MapChart),前者支持各种地图投影与坐标系,譬如ArcGIS,后者使用相对坐标系,或者支持简单的WGS84经纬网坐标系,比如ILOG Elixir地图组件,示意地图再按图片类型分,可分为:栅格地图与矢量地图,Qunee组件适合制作矢量示意地图。

maps

使用Qunee组件展示水文观测站点

中科院的某个客户遇到这样的需求:将区域内所有水文观测站信息按层次结构展现出来。原来用的是mxGraph组件,遇到几个问题:布局难以定制、节点样式难定制、交互有问题,后来改用Qunee组件,顺利解决问题。
这是一种典型应用,主要用到Qunee的布局类TreeLayouter,以及UI和交互的简单定制

树形布局效果

HTML5的当下与未来?

HTML5技术而今已不再陌生,不管是趋之若鹜,热情拥抱,还是远远张望,保持距离,HTML5都是技术论坛热门的话题,给人的感觉就是酷、新、看上去很美

任何技术都有他的适用范围,HTML5技术是一种被夸大了的万金油,在目前浏览器支持不一,开发工具,第三方类库缺乏的情况下,HTML5无法解决一切问题,但如果限定它的使用范围,HTML5确实可以优雅的解决很多问题

HTML5是什么?

侠义的HTML5

侠义的HTML5指HTML下一个主要的修订版本,是W3C制定的标准,目前还在发展中,在HTML 4.01和XHTML1.0标准基础上,HTML5标准增加和修改了一些标签元素,其中多媒体相关的有<video>, <audio>, <canvas>,同时集成了SVG内容,数据内容的元素有<section>, <article>, <header>, <nav>, <menu>等,还提供了新的API,如2D绘图(Canvas),离线存储(Local Storage),加强版的cookie(WebStorage),拖拽,通讯(WebSockets),浏览历史管理,文件API(上传下载本地存储),位置API(Geolocation)等。

HTML5

更多HTML5的介绍,可参阅:

http://en.wikipedia.org/wiki/HTML5

http://www.html5rocks.com

http://dev.w3.org/html5/spec

广义的HTML5

广义的HTML5包括HTML, CSS和JavaScript在内的一套技术组合,其目标是减少浏览器对于插件的依赖,提供丰富的RIA(富客户端)应用。所以CSS3, SVG, WebGL, Touch事件,动画支持等都属于HTML5技术范围

广义HTML5

相关技术

Web相关组织

W3C – 万维网联盟 - http://www.w3.org/

WHATWG – 网页超文本技术工作小组 - http://www.whatwg.org/

为什么选择HTML5技术?

互联网趋势

随着网络架构的完善,宽带提升,网速满足实时交互需求时,计算机结构也将发生变化,光驱消失,硬盘消失,内存增大,GPU愈加重要,现在B/S结构的应用越来越多,而HTML5旨在富互联网应用,能够改善B/S结构应用的用户体验,是互联网应用的趋势之一

HTML5 Vs Flash

以前富客户端应用主要通过插件技术实现,比如Adobe Flash, Microsoft Silverlight, Java Applet,存在一些问题:需要安装插件,不支持移动设备,私有技术,没有国际标准等等,当然插件技术也有优势的地方,有特定的用途,下面就Flash技术和HTML5进行比较

HTML5_Vs_Flash

HTML5的缺点

HTML5目前最大的问题有三个:功能简单且分散、浏览器支持不一

功能简单且分散

HTML5是一种技术集合,包括各种标签及其相关API,HTML,CSS,SVG,JavaScript等,没有统一的开发工具,一个完整的HTML5应用涉及到多种技术,导致开发难度大,对于企业应用,HTML5的功能有限,需要借助第三方类库

浏览器支持不一

一直以来HTML5都以跨平台著称,但实际上要实现这一目标工作量巨大,HTML5绝少一个浏览器的标杆(Webkit有希望成为),尤其目前在IE6/7/8占有率居高不下的情况下,希望用HTML5跨全平台基本是不可能的

导致的结果是用户体验不佳,那么什么时候可以选择HTML5呢?

HTML5适用范围

酷的应用

曾经有人这样形容HTML5,doing anything cool (on the web),HTML5可以做很酷的应用,无需安装插件,就可以在网页中全屏观看高清视频,玩儿轻巧的在线游戏,体验流畅的动画效果,浏览精美的网络图,收听网络电台的音乐……一些小而美的应用非常适合HTML5,企业应用中的某些模块也可以选择HTML5

非得跨平台吗?

每种编程语言和技术都有特定的适用范围,如果你的目标客户是iPhone,你只需要考虑Safari for Mobile就可以了,如果还要考虑Android平台,选择支持Webkit内核,如果目标人群是高端用户,用些新技术也是可行的,如果非得所有平台都支持,在基本功能之外,使用HTML5技术增加一些亮点,也会很有吸引力

总结

目前HTML5已经可以解决很多问题,多少可以用到一部分,而面向未来互联网,基于“云+终端”的构架,终端的HTML5的兼容解决方案必然会出现,那时候你就可以全面拥抱HTML5了。

famo.us是什么?

初次访问famo.us,被他的动画和交互效果所震撼,研究过其代码后,发现用到三种技术:matrix3d变换,requestAnimationFrame实现动画,以及物理运动引擎,单从技术上看三者都不难实现,但事物表面背后往往隐藏深意,famo.us的由来和目标却是野心勃勃。

famo.us2

创始人为web apps性能低下困扰已久,后受到Twitter Bootstrap的启发,试图提供一种用于开发本地级运行效率的web app框架,什么Sencha touch, jQuery Mobile等都是低效的代名词,这些为website而生的东西不适合复杂的web apps应用,应绕开浏览器固有的一些缺陷(document 渲染机制,CSS3导致的性能问题,浏览器之间的差异等等),实现一种针对web app的渲染引擎。

对于famo.us能否真正带来一波web app开发的热潮,尚不可知,从各种资料来看,已经有了一些app示例,但我未曾亲眼所见,目前公开的只有官网的元素周期表的例子,平板上运行也算流畅,但耗电厉害,实用性有待考证。

对技术感兴趣的朋友,可以看看这篇演示文稿:http://www.slideshare.net/befamous/html5-devconf-oct-2012-tech-talk ,作者详细介绍了famo.us 技术上的由来,作为演示文稿,循序渐进,简洁明了的思路也是值得借鉴的

famo.us

下面是2012年九月,famo.us的第一封简报,原文:http://us5.campaign-archive1.com/?u=4656ba2b0a364690c8530bc1e&id=675bbf010f

为什么我们如此特别

尝试使用HTML5构建一个web应用,实现可靠的本地程序级的运行效率,通过诸如Sencha Touch,jQuery Mobile和Appcelerator Titanium这样的框架是不可能实现的,实际上,很多公司,譬如Facebook,已经宣布放弃一些在HTML5上的努力,因为浏览器的一些固有问题需要很长时间来解决。Famo.us之所以特别,是因为我们实现了一种渲染引擎,绕开了浏览器的这些固有问题,从而实现可靠的本地级别高性能的复杂web应用,兼容多种设备,简单的说,经过多年的开发,我们解决了困扰复杂web应用的性能问题,应用的布局,动画和设计这些原本只存在于本地应用的东西,现在也可以用于web开发中,我们希望能带来一波从未有过的web app开发浪潮

一旦我们有了突破,下一步我们将寻求一种方式来分享这些成果,以社区驱动,检验,接受和合理分析

famo.us是什么?

如果你喜欢Twitter Bootstrap,那么你将爱上famo.us,很多方面我们都视Bootstrap为灵感来源
Bootstrap 引导web开发者构建跨设备访问的网站,给开发者提供视图图层,网站布局,框架,UI(用户界面)和UX(用户体验)组件,主题,字体和JavaScript插件
Famo.us 引导web开发者构建跨设备访问的应用程序,给开发者提供视图图层,应用布局,框架,UI和UX组件,主题,字体和JavaScript插件

路线图

我们将参照Bootstrap类似的展示方式,当我们正式启动,我们将公开我们GitHub上的工程,这样你可以分享和连接,我们还会创建Google组,你可以提问,Mark和我会直接回复,我们还会通过简报,博客(当它发布的时候),twitter @befamous 进行更新,我们将花费大量的时间保证文档完整和示例打包,就时机而言,我们希望第一个完整版本能在今年晚些时候发布(主要取决于文档)

使用 famo.us

famo.us的开发与Bootstrap类似,使用famo.us你可以先从应用布局开始,然后混合和匹配相应的famo.us 的UI和UX组件和部件

在我们的”hello world”应用中,你将使用famo.us 的卡片布局(Spotify, Twitter, Facebook和很多其他应用都使用这样的布局)构建一个Twitter iPad 应用的复制品,并采用了famo.us的UI和UX组件,并填充了一些演示数据,一旦你掌握了famo.us的窍门,你可以选择替代的应用布局,并按你所喜欢的修改,实际上你可以创建自己的应用布局,组件和主题,并将他们分享到famo.us市场,我们的目标是所有本地应用的主流布局,另外我们希望能和社区合作创造出更多东西,每个应用布局将能用于iOS和Android,同时作为Web app或者包装进一个本地app,实现手机,平板和PC上布局的灵活转换。