昨天在QQ群里看到这么一个链接,点进去一看,惊讶!
链接先贴上:http://alloyteam.github.com/AlloyPhoto/alloyphoto.html

简单说明下,AlloyImage是腾讯前端推出一项基于HTML5的开源图片处理引擎;
牛瓣不牛瓣大家自己看了说,原来手机App中那些个处理图片的效果都素浮云啦~

然后自己下载了Alloy的JS代码,简单实现了几个代码中基础滤镜的效果!
Demo请猛点这里(Demo图片为和老婆的结婚照),用的都是AlloyImage自带的滤镜方法;

然后看了下AlloyImage.js的源代码,Alloy小组对代码全部公开,这也让小琪学到了很多东西;

阅读全文 …

2013 年 3 月 30 日 吴成果, 吴技术

这次做的是用HTML5,绘制一个Android机器人;
Demo在这里:http://www.54575.com/mobile/canvas/android.html
代码请直接右键->查看网页源代码

截图:

主要学习了填充颜色fill(),弧线bezierCurveTo(),画圆arc(),画线lineTo()等函数使用;

特别要指出的是,如此NB的html5,竟然没有一个支持画椭圆的函数,让我很郁闷,只能用弧线bezierCurveTo()模拟出椭圆,变得非常复杂;

下面说下自己使用过程中遇到的两个难点,圆角和椭圆的绘制,以及解决方法:
阅读全文 …

2012 年 7 月 19 日 吴成果, 吴技术

本文内容以对本次腾讯门户首页改版之研究为主,加入和国内门户的一些对比和个人观点,非喜误入;

首先,上4图(从左至右,第一张腾讯,第二张网易,第三张搜狐,第四张新浪,大家没必要点击打开大图,直接打开这些门户网站即可):

========================================================

1.最顶部的用户状态栏
四大门户网站大致略同,腾讯此次改版,把搜索放在了一个非常重要的位置,可见未来腾讯对于搜索业务的重视;

2.导航
四大门户网站原先的导航都是3行内容,其中搜狐的排序杂乱无章,很糟糕;
腾讯改版后变成了2行内容,内容上进行了精简,但通过背景色加重,加强了导航栏在整体页面中的位置重要性;

3.第一屏广告位
腾讯划分成了2块图片的区域,干净漂亮(目前都是腾讯内部产品活动的推广,相信费用绝对不低);

而另外3大门户网站,统一使用了图片加短文字组合的形式,无数的小广告充斥着整个网页最重要的位置,看了让人很恼火;

4.新闻标题
改版后的腾讯采用了博客型伪2栏的信息布局形式;
网易和新浪依旧使用3栏的布局;
而搜狐竟然使用了4栏的布局;

伪2栏,其实是3栏的另一种变化形式;


左侧的2栏新闻信息,去掉了中间的框架线,合成了1栏;
没有了多余的条条框框的线,让人觉得清爽了许多;
而3栏的形式,正适合中文信息的排版和布局,20~22个字的新闻标题宽度(14px文字大小),显得不紧凑,也不松散;

搜狐的4栏形式是一个最大的败笔,14px与12px字体的混排,无论在高度还是字数上,都很难给新闻标题做一个统一的标准,一片混乱;

5.文字
14px已经成了门户网站的首选,在中英文字体兼容性方面,
腾讯选择:”宋体”,”Arial Narrow”,HELVETICA
网易选择:”宋体”,sans-serif
新浪选择:”SimSun”,”宋体”,”Arial Narrow”
搜狐选择:”宋体”
这里个人比较倾向与网易的字体选择,而腾讯这次改版,加入了Helvetica字体,我想主要对是苹果系列产品的兼容吧(iPad,iPhone浏览);

6.行高line-height
腾讯选择:26px
网易选择:25px
新浪选择:24px
搜狐选择:20px
相信大家通过自己的肉眼,已经可以看出优劣了;
25px以上的行间距让阅读变得更轻松愉悦;
14px字体结合25px以上的高度,将会成为今日的主流行高;

7.框框和线条
网易的框框和线条,和搜狐新浪相比较,已经做的非常之清爽干净了

改版后的腾讯更是去掉的多余的框框和线条,让版面变得更干净整洁,文字和图片内容得到了最大程度的展现且不显得凌乱

由于自己工作性质,以上这些仅仅是对腾讯本次改版页面设计和布局方面的研究;
腾讯本次改版的最大意义,更在于信息的个性化展现;
目前,社交网站和搜索引擎依然是互联网两大最重要的入口,改版后的腾讯,更是加强了搜索和社交信息聚合在门户首页的位置;

无论是页面布局的改变,还是信息获取形式的改变,腾讯的这次改版都是值得我们学习的;
但更值得我们学习的是,是腾讯改版的勇气和决心。

 

2012 年 7 月 5 日 吴技术, 吴观点