Archive | 八月, 2011

I liked this: 在服务端合并和压缩JavaScript和CSS文件

18 8月

Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites图像映射(Image Map)使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合并,这些合并中相当多的是有选择地手动完成,每次新的合并都需要重新在本地完成并上传到服务器,比较的随意和繁琐,同样文件的压缩也有类似的情况。而利用服务端的合并和压缩,我们就可以按照开发的逻辑尽可能让文件的颗粒度变小,利用网页中URL的规则来自动实现文件的合并和压缩,这会相当的灵活和高效。

YUI Combo Handler

2008年7月YUI Team宣布在YAHOO! CDN上对YUI JavaScript组件提供Combo Handler服务。Combo Handler是Yahoo!开发的一个Apache模块,它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件,从而大大减少文件请求数。比如在页面上使用YUI2的Rich Text Editor组件需要引入多个JavaScript文件,常用方式如下:

<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/
yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/
container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>

而使用Combo Handler服务之后,则上述的代码可以写为:

<script src="http://yui.yahooapis.com/combo?
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&
2.8.0r4/build/container/container_core-min.js&
2.8.0r4/build/menu/menu-min.js&
2.8.0r4/build/element/element-min.js&
2.8.0r4/build/button/button-min.js&
2.8.0r4/build/editor/editor-min.js"></script>

除了代码的可读性稍稍有一点点降低外,使用Combo Handler服务大大的降低了HTTP请求数,同时也减少了URL代码量,这对于Web性能优化来讲至关重要。所以,随后YUI从2.6.0开始,其核心组件YUI Loader内置了Combo Handling功能,即使用YUI Loader时,通过配置combine属性就可以把要加载的多个JavaScript或CSS文件按照使用Combo Handler服务的形式合并起来,这时只要静态文件的服务器支持Combo Handler就行了。在YUI中当combine配置为true时,CDN默认是使用Yahoo! CDN(http://yui.yahooapis.com),所以没有任何问题。这正是YUI最迷人的地方之一&#12290;

遗憾的是http://yui.yahooapis.com在中国的速度并不佳,本来中国雅虎提供了http://cn.yui.yahooapis.com/ ,但尚未提供Combo Handler服务,同时因种种原因,其更新在YUI 2.7.0之后就停滞了。更糟糕的是Yahoo!开发的支持Combo Handler的Apache模块虽然据传有计划开源,但至少现在依旧是私有技术,要使用就需要自己实现类似功能,所以国内类似技术的应用并不太多。

Minify

在Google Code上有一个PHP的开源项目叫Minify,它可以合并、精简、Gzip压缩和缓存JavaScript和CSS文件。其文件合并功能就非常类似Combo Handler,只不过URL的语法稍微有点不同。如果Yahoo! CDN安装了Minify,那么上面Rich Text Editor的代码用Minify的默认格式来写就是:

<script src="http://yui.yahooapis.com/min/f=
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js,
2.8.0r4/build/container/container_core-min.js,
2.8.0r4/build/menu/menu-min.js,
2.8.0r4/build/element/element-min.js,
2.8.0r4/build/button/button-min.js,
2.8.0r4/build/editor/editor-min.js"></script>

本地使用Minify很简单,只需要Apache + PHP环境就OK了:

  1. 安装好Apache + PHP (WindowsMac)。
  2. 下载Minify源码,解压,然后把min文件夹复制到指定的根目录下,比如localhost。这时URL的写法大概是http://localhost/min/f=...
  3. 启用Apache的Mod Rewrite模块,然后在min文件夹下新建.htaccess文件,并添加如下Rewrite规则

    <IfModule mod_rewrite.c>
    RewriteEngine on
    
    # You may need RewriteBase on some servers
    # 如果做了所有的开启Mod Rewrite的设置依旧无效,请城市尝试启用下面这句
    #RewriteBase /min
    
    # rewrite URLs like "/min/f=..." to "/min/?f=..."
    RewriteRule ^([bfg]=.*)  index.php?$1 [L,NE]
    </IfModule>

    如果不启用Mod Rewrite功能,则Minify的URL会类似http://localhost/min/index.php?f=…,&#36825;对客户端和中间服务器的缓存不利,而启用了Mod Rewrite之后的URL类似http://localhost/min/f=…,不仅解决前面问题且更短&#12290;

  4. 配置Minify,即编辑min/config.php文件
    $min_enableBuilder = true;
    //本地使用时可以通过http://dwn/min/builder/来进行配置,外部使用时请设置为false
    
    //$min_cachePath = 'c:\\WINDOWS\\Temp';
    //$min_cachePath = '/tmp';
    //$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());
    //选择其一,去掉注释设置临时缓存目录,这样可以减少程序运算提高性能
    
    $min_serveOptions['maxAge'] = 1800;
    //设置浏览器缓存的时间,为了提升性能建议这个时间设置尽可能的长,比如315360000
    //如果需要在不改变URL的情况下更新静态文件,可以采用类似时间戳的方式,
    //如http://localhost/min/f=example/example.css&20100601.css
    //建议静态文件采用版本号管理,每次修改都需要升级版本号,这样就无需时间戳了,
    //如http://localhost/min/f=example/example_1_0_1.css
    
    $min_serveOptions['minApp']['maxFiles'] = 10;
    //参数f获取参数的个数,即合并的文件个数,这个数量完全可以增大,比如50,
    //当然可能会遇到URL最大值问题,后会有解释
    
    $min_documentRoot = '';
    //$min_documentRoot = substr(__FILE__, 0, strlen(__FILE__) - 15);
    //$min_documentRoot = $_SERVER['SUBDOMAIN_DOCUMENT_ROOT'];
    //当$min_documentRoot为空时,其值就是$_SERVER['DOCUMENT_ROOT'],
    //但合并的文件不在$_SERVER['DOCUMENT_ROOT']下,会导致400错误,
    //这个时候可以启用第2行或第3行
    
    
  5. 使用Minify

    比如,有两个JavaScript文件,http://localhost/example/a.js,http://localhost/example/b.js,那么使用Minify合并的URL是http://localhost/min/f=/example/a.js,/example/b.js,直接把这个URL放到页面中就可以使用了。

实际上Minify不仅仅实现了合并功能,同时默认在合并的同时还会对文件进行精简压缩,如果你在本地本身就对文件进行压缩了,比如使用YUI Compressor,那么可以在config.php中进行如下设置取消Minify的压缩以提升性能:

$min_serveOptions['minifiers']['application/x-javascript'] = '';
$min_serveOptions['minifiers']['text/css'] = '';

如果服务端支持Java,那么也可以对Minify进行简单配置而实现利用YUI Compressor压缩JavaScript和CSS文件

直接在服务端进行合并和压缩,这非常的灵活,也极大的减轻了前端开发成果的部署过程,真使事半功倍。更多配置请看Minify CookBookWiki

小提示:Minify使用的New BSD License,这就意味着使用者可以几乎自由的使用该代码。BSD协议鼓励代码共享,但需要尊重代码作者的著作权。BSD由于允许使用者修改和重新发布代码,也允许使用或在BSD代码上开发商业软件发布和销售,因此是对商业集成很友好的协议。而很多的公司企业在选用开源产品的时候都首选BSD协议,因为可以完全控制这些第三方的代码,在必要的时候可以修改或者二次开发。更多中文信息请看《BSD协议》

在YUI3中使用Minify

在YUI2中,合并机制只支持库本身的文件,自定义的文件会单独一一加载。从YUI3开始,模块变得更小,这样就导致使用合并时URL会变长,但在IE下URL的最大值是2083,Apache默认的URL最大值是8192,所以当URL在对应浏览器下超出最大值时,YUI3会自动根据浏览器判断进行拆分成多个合并的URL,并且还提供了maxURLLength来设置最大值。而从YUI3.1.0开始,不仅仅支持自定义文件的合并,还支持可以使用多个提供合并服务的CDN,即可以对YUI组件使用http://yui.yahooapis.com这个CDN,其余文件使用其他支持合并的CDN,这样非常的实用、方便和灵活。示&#20363;在YUI3中使用Minify就说明了这点。

由于YUI默认URL的合并形式和Minify的不相同,所以在YUI实例化时需要利用正则替换来实现YUI3支持Minify的URL合并形式,但这种方式既不灵活,且有风险,不友好又效率低。比较简单的方式是直接修改YUI 3的源码,如示例在修改后的YUI3中使用Minify。同时,YUI 3.1.*的版本有一个bug,即同时合并JavaScript和CSS时,较短的那个URL结尾处多一个&符号,如示例在YUI3中使用Minify中:

http://yui.yahooapis.com/combo?3.1.1/build/widget/assets/skins/sam/widget.css&
3.1.1/build/console/assets/skins/sam/console.css&

http://dancewithnet.com/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css&

这两种都可以使用,虽然在早期的IE浏览器版本(如IE6)中会有无法解析的风险,且影响某些特定情况下的缓存,但当使用修改后的YUI时,合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子,就会出现bug了。对于YUI的Combo Handler来说这是一个小bug,所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时,还要解决这个问题,具体方案请看示例在修改后的YUI3中使用Minify

在CDN上使用Minify

CDN的全称是Content Delivery Network,即内容分发网络。其最常应用就是通过位于不同地理位置的服务器把静态资源部署到用户最近的边缘,这样能有效解决Web服务中大量静态资源的速度和性能问题。由于实施成本比较高,所以在实际的应用中,大型公司一般会组建自己的CDN,而小型公司只能租借第三方的CDN,但不管怎样这两种方式都不会影响在服务端实施合并和压缩程序。一般情况下,静态资源也并不是直接上传到CDN,而是先传到一台后台服务器,然后各地CDN的前端Cache服务器按需索取。YUI CDN的Combo Handler就是部署在其后台服务器上的,Minify也应如此。简单图示如下:

当一个资源请求到CDN时,CDN会先检查本地是否存在这个资源,如果有则会直接返回该资源,如果没有则会请求其后台服务器,后台服务器会依据资源URL的信息进行相应的处理,然后返回给CDN,CDN就会存储这个资源,再次出现这个资源请求时就无需请求后台服务器了。所以,虽然合并特别是压缩JavaScript和CSS文件是消耗时间的,但是由于只需要第一次,并且第一次基本上由我们自己访问掉(我们可以创建程序自动进行一次访问来保证,实际上图片优化也可以采用这种方式),所以基本上很安全。这正是目前在口碑网实施的JavaScript和CSS合并方案,在第4届D2的《前端性能优化和自动化》中也介绍了它。

http://feedads.g.doubleclick.net/~ah/f/ka5vlcfdf54v3h685pgp7mnqq4/300/250?ca=1&fh=280#http%3A%2F%2Fdancewithnet.com%2F2010%2F06%2F08%2Fminify-js-and-css-files-in-server%2F


posted on 随网之舞: http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/

Advertisements

I liked this: Tip中小三角的实现

7 8月

前段时间专门研究了一下腾讯微博的Tip,很有意思!tip中的小箭头是用“◆”(encode为:◆)字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是:比如tip有border时,也可以用两个绝对定位的“◆”字符模拟。如图: 注意:最好根据您的实际情况设置“◆”的字体,我这里用了宋体,有棱有角真好! demo页面:http://www.css88.com/demo/tipbox/ 声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发转载请注明转自《Tip中小三角的实现》
posted on WEB前端开发: http://www.css88.com/archives/3904

I liked this: javascript匿名函数

6 8月

http://feedads.g.doubleclick.net/~ah/f/mblfmm6fhtqrklq9d6687fcj2g/300/250?ca=1&fh=280#http%3A%2F%2Fwww.js8.in%2F722.html

今天在整理javascript入门培训的PPT时,提到了匿名函数,所以拿来分享下心得。

匿名函数的写法

顾名思义,就是没有名字的函数(⊙﹏⊙b汗)。匿名函数通常用于javascript作用域的控制,可以有效的避免对全局变量的污染。常见的匿名函数有下面四种写法,欢迎补充:

匿名函数写法一

(function(){
	//do something
})();

匿名函数写法二

!function(){
	//do something
}();

上面!还可以写成+,!!等多种方式。
上面两种方法是我常用的,下面两种方法是google上找的,我没用过(好吧,我out啦)。

匿名函数写法三

(function(){
	//do something
}());

匿名函数写法四

void function(){
	//do something
}();

刚才微博上@朴灵 提出来:写法三比较安全,正如网友@Rain的留言,匿名函数上面的写法都存在前后文;问题,所以需要注意的是匿名函数在压缩工具打包压缩后会出现上下文错误合并()的问题,例如第一种写法,如果下面的代码,未压缩之前是正常的,压缩后就不正常了,所以要严格上下文的;问题,而第三种就不会出现类似问题:

var a = function(){}
(function(){
	alert(1);
})();

上例中就出现了错误,这就是因为a函数会把他后面的匿名函数作为参数传入a中,这也就解释了为什么有人习惯在匿名函数之前添加;了,就是为了防止上文没有严格遵循javascript语法,漏掉;的问题。

匿名函数的传参

匿名函数可以通过下面的方式进行传参:

(function(win, doc){
	var $ = function(id){
		return doc.getElementById(id);
	}
	win.$ = $;
})(window, document);

匿名函数的递归

匿名函数中要引用本身,需要使用arguments.callee,下面是使用匿名函数实现的连乘。

(function(n){
	if(n <= 0){
		return 1;
	}else{
		return n * arguments.callee(n-1);
	}
})(4);
收藏本文到:新浪微博 | QQ书签 | 人人网 | 豆瓣 | 开心网 | 腾讯微博 | Google书签 | 百度搜藏
声明:文章未声明为原创文章,本文链接 http://www.js8.in/722.html. 转载请注明转自 JS8.IN ™

相关文章


© 断桥残雪 for 断桥残雪部落格, 2011. |
2 comments |在微博关注我:@清-三水清

收藏到:
人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博

Post tags: ,

posted on 断桥残雪部落格: http://www.js8.in/722.html

I liked this: 如何让自己网站支持 Instant Pages,让 Chrome 瞬间打开?

6 8月

昨天的Chrome 13使得全线的Chrome浏览器都支持了Instant Pages,就是Google搜索将会提前读取第一个搜索结果的网页,而且不仅是图片,还包括脚本和CSS文件,这样一旦你点击了第一个搜索结果(基本上你点击第一个的可能性很大),那个网页会立刻瞬间打开。

实际上这个功能也可以部署在自己的网站上,然后让使用Chrome浏览器的用户在访问你的网站之后就事先预读一个你认为读者最有可能点击的网页,这样在用户真的点击了那个页面的时候,该网站会瞬间打开。

方法很简单,只需要在</head>标签之前,加入这么一段语句即可:

<link rel="prerender" href="http://example.com/page2.html">

其中的红色地址就是你觉得用户最可能会点击,要让Chrome预读取的页面地址。比如你的一篇超长评测分了好几页,那么显然你让下一页预先读取是最靠谱的。如果是公司网站的首页,你可以设置为产品页面或关于我们页面。如果是博客首页,那么可以设置为下一页,或者置顶的那篇热门文章的全文地址。

Via Digital Inspiration


© musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011. |
9 条评论 |
永久链接 |
关于谷奥 |
投稿/爆料
Post tags: ,


posted on 谷奥——探寻谷歌的奥秘: http://www.guao.hk/posts/how-to-implement-google-instant-pages-on-your-website.html

I liked this: 当设计师遭遇HTML5

4 8月

HTML5,被传为Flash 的杀手,是一种用于web 应用程序开发、具有变革意义的网络技术。HTML 5提供了一些新的元素和属性,其中有些是技术上类似<div>和<span>标签,但有一定含义,例如<nav>和<footer>。这种标签将有利于搜索引擎的索引整理、小屏幕设备和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记。
除了原先的DOM接口,HTML5增加了更多样化的API:

  • 实时二维绘图

Canvas API:有关动态产出与渲染图形、图表、图像和动画的API。

  • 定时媒体播放

HTML5 音频与视频:HTML5里新增的元素,它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API,而无需安装任何插件。

  • 离线存储数据库(离线网络应用程序)
  • 编辑
  • 拖放
  • 跨文档通信
  • 通信/网络

Communication APIs:构建实时和跨源(cross-origin)通信的两大基础: 跨文档通信(Cross Document Messaging)与 XMLHttpRequest Level 2。

  • 浏览历史管理
  • MIME和协议处理程序时表头登记
  • 微数据

以上技术说明存在于WHATWG HTML说明文档中,但并没有全部包含在W3C HTML5的说明文档里;W3C另对一些技术做了单独说明,此文不再一一赘述。

听起来略有些太过技术了,那么HTML5对设计将会有哪些影响呢?这是网页设计师和开发人员不厌其烦讨论了编程代码后不得不考虑的问题。

HTML5及web app 的优势

以移动互联网领域为例,面对众多的终端设备和平台,设计师和开发人员不得不在产品的展现和体验的一致性方面做出妥协举措,并在疲于填铺平台的过程中浪费了我们如此多的精力。产品本来可以达到更高的水准,但移动终端碎片化(包括硬件和软件)的现实将美好的愿望阻拦在外。

当前主流的手机开发平台有:iOS、Symbian、Linux、Palm、BlackBerry、Windows Mobile、Android等。其中,iOS平台需要针对480*320、960*640及1024*768的分辨率分别设计;Android平台中QVGA分辨率为240*320,WQVGA分辨率为240*400,HVGA分辨率为320*480,WVGA分辨率为480*800,FWVGA分辨率为480*854等等;Symbian系统可谓历史悠久,现在开发主要针对S60 V3和V5两个版本,分辨率仍有176*208、208*208、240*320/320*240、352*416/416*352及800*352等众多种类。即使同一个平台,分辨率不同设计也就会有相应的差异。加之客户端产品需要不断的更新迭代,从1.0版本、2.0版本一直到N.0版本;每开发一次native app 就需要铺一次平台。并且现实状况是并非所有用户都会积极更新新版本,所以设计师和开发人员在研发新功能的时候还要顾忌之前的旧版本会不会支持等问题。不同的平台乘以不同的版本,人力物力被投入到了铺设平台的工作中,提高产品用户体验的精力比较有限。

于是人们受够了终端设备碎片化的折磨,开始期盼着一种有别于native app的事物出现。由HTML5技术开发的web app的出现给予了设计师和开发人员美好愿景。HTML5技术的渲染过程主要是由浏览器、内嵌HTML5解析器的应用程序、支持书签打开方式的应用程序抑或是移动手机产品进行的。如此,产品的上线和版本更新不再需要花费那么长时间来铺平台, Appcelerator的内部逻辑会将产品的UI转换为iOS或Android等平台的原生界面。同时,web app形式的产品不需要用户下载更新,通过网络即可以访问最新版本;也便于设计师和开发人员调试和修正错误,不再存在同时兼顾新旧版本的问题。

HTML5可以实现的效果

HTML5威力如此强大,确实拥有提高互联网产品质量、改善开发人员现实环境的潜力。因此设计师和开发人员需要对它进行必要的了解。但这并不意味着设计师就要放下自己手中的工作开始学习编程技术了,而是应当考虑HTML5对具体的设计将会有哪些明显的改变,HTML5技术可以实现什么样的设计效果?

在苹果、谷歌及微软等巨头公司的积极倡导下,HTML5技术进步神速,web app可以实现的效果愈来愈丰富。很多web app确实已经可以和native app相媲美了。对HTML5支持最好的浏览器是Safari和Chrome,Firefox和 Opera差强人意,IE浏览器支持度最低。如下图所示:

现在网络上常常会见到类似《使用HTML5开发的19个网站》、《25款超棒的 HTML5 Canvas 游戏》等相关介绍文章,设计师可以时常拿来把玩体验一番。本文囿于篇幅限制,在此只举几个应用HTML5技术比较典型的网站产品进行示例说明。

移动终端

1.Gmail


2.Youtube


3.Vesseltracker


4.GeoCongress


5.BusinessesForSale.com


6.TriOut Mobile


7.ING Direct


8.AOI


9.Naver


10.百度无线小说


PC端

1. Flickr Browser


2. X-Worlds


3. CSSWarp


4. CSS3.0 Maker


5.Tiny Fluid Grid


6. HootSuite


7. Aviary’s Image Editor


8. Twimbow


9. Scribd


10. Google Body Browser

设计师通过亲自体验这些HTML5手机应用或网站,对HTML5所能支持的效果细节会有一个大概的、感性的认知。籍此获得的设计感知能力远比看几行让人头晕的代码要深刻、易于运用。


HTML5近期为什么无法成为主流

看了以上网站的效果,是不是感觉HTML5很酷?既然它这么优秀,既可以就解决终端碎片化的困扰,又便于开发人员实现,那么为什么我们不赶紧将HTML5推广开来?我们到底在等待什么?然而残酷的现实告诉我们,HTML5的时代还没有真正到来,在近期内仍无法取代native app成为主流。笔者根据自己的理解,将原因归结为以下几点:

HTML5本身

W3C表示在2014年之前不会公布有关HTML5的标准。现在各大公司积极开发意图走在web app 产品研发中的前列,但仍处于探索阶段。HTML5还没有清晰明确的统一标准,也就难以大范围的推广。等待该技术成为主流,仍需尚待时日。

浏览器

没错,web app确实只需要网络访问就可以。但是产品的效果需要支持HTML5技术的浏览器进行渲染,产品的组件需要浏览器的控件库来搭建完成。现有的浏览器在控件库方面都存在漏洞,致使web app的效果无法全部施展,加载速度较慢。HTML5大行其道,一个强大的浏览器的作用非比寻常。而这个强大的浏览器什么时候才可以出现,还没人知道。

网络信号

Native app 在离线状态下依然可以使用一些功能,稳定性比较好。相比之下Web app对网络的依赖性更大。这一点和“云”有些相似,没有接通网络就无法使用其服务(虽然HTML5支持离线存储)。现今国内的wifi普及率还非常低,3G网络覆盖率也有待完善而且费用偏高、稳定性不强。无论从稳定性还是流量资费角度考虑,用户都没有能力舍弃native app.

移动终端

移动终端(主要是手机)的市场分布情况也是HTML5的影响因素之一。智能手机的市场份额还比较小,功能手机仍占有绝对的优势地位。而在web app的支持性方面智能手机无疑是最好的,其次是社交手机,功能手机支持性最差。移动终端的市场份额分布情况成为HTML5近期推广的瓶颈。如图所示:

设计师应如何应对HTML5?

在了解了HTML5技术的优势、效果以及实现进度之后,设计师应该考虑自己接下来需要做些什么了。HTML5是互联网研发的必然趋势之一, 具有提高产品品质的巨大潜力。设计师唯有顺应这一潮流的发展,积极投身到HTML5的试验研发中,才能在时代的大潮中握有先机。那,我们应当怎么做抑或做些什么呢?笔者有几个浅薄的建议分享给大家:

形成企业的一致风格,增强识别性

现在的native app 都需要经过严厉的审核才能上架“应用商店”,即使如此,应用程序已经开始数量激增,找到一个满意的应用谈何容易。如果web app的时代到来,用户只需要通过浏览器就可以轻松使用某个应用程序,没有了“应用商店”的限制,应用程序产品的数量将难以估计。这个时候我们需要担心我们的产品会不会被淹没在其中。为了避免这样的悲剧,一个有效的办法是使同一个公司的产品具有一致风格,并且鲜明有特点,这样可以更有效的抓去用户的注意力,增强产品的识别性。

开始注重特定浏览器的适配

为特定用户而设计,也就需要为用户所使用的特定浏览器而设计。只有当我们控制了使用环境,我们才能控制确保用户角度的产品效果更好。也许HTML5的时代不需要再频繁的铺平台,但为特定的浏览器设计特定的效果是进一步提高用户体验的重要举措。

Google Wave是一个不错的例子。Google Wave试图把博客、邮箱、即时通讯以及wikis结合起来,成为一款强大的网络交流服务。它是由HTML5编写的,并不支持在所有浏览器上使用。虽然因为关注度不高被Google停止服务,但Google Wave作为一次尝试,已经在HTML5的发展道路上走了很远很远。

打破思维定势,注重运用技巧

这一建议来源于实际的工作,针对的也是实际工作中会遇到的情况。Web app 的设计工作中,所需要应用的HTML5技术效果往往没有那么多;即使有,团队中的RD也未必全都做得出来。其实用户不关心这个效果是使用什么编程语言完成的,用户关心的是交互是否顺畅、视觉感官上是否有品味。因此设计师需要在细节上注重提升web app的品质感,比如边框的设计,比如翻页的设计,比如子产品列表的设计等等。甚至可以尝试做一些“伪app效果”。这方面m.naver.com做得非常棒,布局设计、功能按钮的设计都酷似native app, 子产品的列表全部做成高品质的icon样式;其实 不过是一个图标加一个链接那么简单。

重视移动互联网

HTML5在移动互联网中的需求最旺盛,潜力也最大。适配碎片化严重的移动终端从长远看不是理想的办法,但现阶段还摆脱不了这一现实。现在我们所拥有的最好的移动实验平台是iphone,它的适配比例已经足够高了。如果做Html5新产品的API支持测试,建议还是使用iPhone.


总结

HTML5技术正引领互联网朝web app方向发展,这是互联网发展的必然趋势之一。Web app将越来越多的走到用户面前。设计师在面对HTML5技术的时候,既需要了解当前该技术可以实现的效果,又需要在实际的工作中不断摸索和总结设计技巧和策略。紧跟web app的发展,不断尝试,对设计师来说既是一次冒险,也是一次难得的机遇!


posted on 网易用户体验设计中心博客: http://uedc.163.com/6860.html

I liked this: Adobe 发布HTML5 动画制作工具Adobe Edge

2 8月

 

Flash VS HTML5之争似乎即将见分晓。Adobe刚刚发布了一个新的工具AdobeEdge,允许设计师通过HTML5、CSS和JavaScript制作网页动画。无需Flash。AdboeEdge 的目的是帮助专业设计师制作网页动画乃至简单游戏。目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频 /视频标签等。

下载:Adobe® Edge

支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。产品界 面如下:


 

Flash在网页动画领域仍占统治地位,Adobe此举显然是为了在巩固Flash地位的同时,紧跟潮流,不把鸡蛋放在同一个篮子里。

从去年4月份起Adobe针对HTML5发布了一系列功能和产品,其中比较引人注目的一款就是把Flash变成HTML5的转换工具Wallaby。

Adobe认为HTML5对公司来说是一个机会,并且Flash并非没有机会,两者是互补关系。比如在3D游戏方面Flash仍是不可或缺的工具。另外,某些HTML5在各个浏览器上的体验并不一致。

目前Adobe Edge提供的是公测预览版产品,你可以在这里下载(需注册AdobeID才能下载),1.0版产品将在明年发布。

 

 

 

 

文章来源:cnbeta

相关阅读:

本文网址:http://www.html5.cn/2011/08/2/adobe-edge.html

posted on HTML5中国 – 我们致力于HTML5在中国的发展与应用: http://www.html5.cn/2011/08/2/adobe-edge.html