Webtop——html5桌面app开发引擎。基于webtop,你可以使用html5和css3等新技术构建桌面app,即开发直接运行于windows上的软件,使用透明渲染模式能将网页直接渲染在桌面上,轻松实现透明阴影等特效。而且,提供了大量的本地api,使你的app能达到跟本地app一样的体验。基于它,你可以开发诸如浏览器,QQ,PS,桌面widget等桌面app。这种开发软件的方式,相比传统桌面软件开发方式的开发效率,个人认为至少是其的10倍。

TAT.melody Webtop 桌面 HTML5 WebApp 引擎
In Web开发 on 2012年07月20日 by view: 32,580
57

新版发布,敬请关注

这是个什么东西?这是个用web开发桌面app的引擎,或者你可以简单的认为它是一个透明浏览器。可是它能做的不仅仅如此,它提供了大量的本地api,使web的能力得到从所未有的提升,也使开发桌面app变得如此轻松简单。你有试想过自己开发一个浏览器吗?或者一个qq。以前,或许你会说这太难了。可是,从今天开始,这一切都变得如此简单。这不是预想,这是已经实现的事情。

TAT.melody 让Web无所不能
In Alloy 实验室 on 2012年05月22日 by view: 4,783
5

Web可以做什么?

时至今日,这个问题已经不能简单回答了。html5,css3技术的出现已经使web的能力得到了很大的提高,但,web仍有局限!由于安全性的考虑,浏览器对web进行了种种限制,例如:

  • Web不能读写文件
  • Web不能实现很多牵涉到系统底层的功能
  • Web的UI被局限成页面的形式
TAT.melody 如何用单张小图实现九宫格布局
In Web开发 on 2012年05月19日 by view: 2,871
0

九宫格布局一直是前端比较纠结的一个问题,一是切图麻烦,二是修改css麻烦。本文将要介绍一种用一张小图实现九宫格布局的方法。使用此方法每次只要传图片路径跟四个边角的剪裁尺寸即可实现九宫格布局。请先看例子:melodyui.sinaapp.com

下面讲讲原理:

其实原理很简单,就是使用了css的clip属性。对中间需要平铺的区域进行了拉伸,然后再进行剪裁定位。主要的工作量都在坐标的计算上面,所以我这里不多说,可自行查看源代码。

最后希望这个方法能对大家有所帮助,谢谢大家。

TAT.melody 完美的自定义滚动条
In 用户体验设计 on 2012年05月14日 by view: 10,038
8

今天写了一个滚动条UI组件。欢迎大家体验:http://alloyteam.github.com/ui/

为何称之为完美呢?只因其具有以下优点:

  1. 兼容所有浏览器。
  2. 支持所有鼠标事件,包括长按。
  3. 样式可以完全自定义。
  4. 使用该组件无需改动原来的任何代码,也不要求原来的元素使用什么定位方式。
  5. 只需引进一两个js文件,再添加一句代码即可。

下面讲核心部分。

TAT.melody 从Audio标签看webkit内存上涨的问题
In HTML5 on 2012年02月28日 by view: 2,042
0

这段时间做一个关于widget的项目,忙了一两个月了。在临发布的时候突然出现一个问题,一个音乐widget的内存不断上涨,且不会回落,最终导致这个widget只能下架。
因为我在ie9没发现内存上涨的问题,所以我觉得这是webkit内存管理的问题。所以一直没去看他,等待客户端的同事去解决。直到有一天,客户端同事说了一个方法,说防止src频繁切换,建议延迟1s去设置audio标签的src。开始我想这不是web的原因,所以给予断然拒绝,另外也是怕维护麻烦。但是,我还是进行了尝试。没想到效果出奇的明显,内存基本不会上涨了。
从这件事,我意识到了,凡事不能说绝对。因为它包括了太多情况,涵盖了很长的一段时间,而且使你不能有回旋的余地。
下面说说解决的方法。因为我们想要的是src不频繁切换,所以单单做延迟是不会有任何结果的。关键是要使一首歌保持1s以上才会去设置它的src。这句话我说来简简单单,但是要真正理解是需要很深入的思考的。代码我会在最后面给出来,大家可以自己试着写写,然后对照一下。
通过客户端同事的进一步研究发现,发现对Dom对象的某个属性就行频繁操作就会导致上涨。这里还有个比较明显的属性就是buffered,大家可以通过设置一个频率为20ms的定时器去读取这个属性,就可以进行测试了。
以此类推,是否对于img标签也有类似的情况呢。这个有待各位同仁进行验证。
相关代码:

TAT.melody css捕捉器的实现
In Web开发,作品 on 2011年12月09日 by view: 3,587
2

这个工具的实现,是我长久以来的一个愿望,缘于之前看到的蓝色理想上的一个代码捕捉器。当时我下下来用了一下,没仔细研究,只觉得很难用,于是心底就有了一颗种子,希望有一天自己能开发出这样的工具。感谢伟大的谷歌,给了我一种优雅的实现方式——谷歌插件。

下面说说技术部分:

一开始用的是浏览器原生的css rules,可是后来发现谷歌的css rules是经过解析的,而ie的不是。由于对谷歌的偏爱,所以不得不另辟蹊径。凑巧之前又看到了谷歌的另一个插件——Web Developer,可以把页面引用到的css文件内容都显示出来。于是,在控制台把代码复制了下来,考到了我的js里面。它的实现原理是用ajax请求把所有css文件内容给抓下来,这涉及到一个跨域问题。不过不用怕,我们是插件嘛,当然有特殊的权利——跨域ajax请求。

TAT.melody ie6 position fixed
In CSS3,Web开发 on 2011年11月21日 by view: 1,962
0