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,731
57

新版发布,敬请关注

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

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

Web 可以做什么?

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

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

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

下面讲讲原理:

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

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

TAT.melody 完美的自定义滚动条
In 用户体验设计 on 2012年05月14日 by view: 10,187
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,074
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,632
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,972
0