作者:sluke
发布时间:July 14, 2010
分类:劳动万岁
No Comments
PC客户端软件的皮肤配置方式有很多种,简单说来就是如何把图片在屏幕上贴起来,从需求上看,可能要应对多套皮肤、多种配色、异型皮肤等等。有的软件选择将所有小图片放在一张大图上,有的软件喜欢用各种小图放在一个目录下,还有的采用了混搭的方式,这里讲的是第一种。
先放出一张结构图来,方便理解(点击查看大图):

theme处于最顶层,同一个皮肤下可以有多个style,一个style下可以有多个layout和color_schemes(实际上限制每个style只有一个layout跟color_schemes更好理解)。
layout的子节点就很清楚了,通常软件会有很多个窗体,其中有一个是主窗体,其他是附加窗体;每一个窗体里会有不同的组件,比如一个播放器窗体里可能会有滚动条组件、列表组件、按钮组件;每个组件为了美观,可以被划分为若干个碎片,比如滚动条的控制柄或是滚动条的顶部花纹等等,当一个组件为按钮的时候,碎片就要表现按钮的多种状态,如鼠标按下、弹起、悬停、按钮不可用,
图片的定位采用了选择起始坐标+长宽的方式,也就是image_x,image_y设定某个按钮贴图的左上角坐标,通过计算长宽来确定整个贴图的区域。
简单写一个配置文件如下:
| 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 | | 10 | | 11 | | 12 | | 13 | | 14 | | 15 | | 16 | | 17 | | 18 | | 19 | | 20 | | 21 | | 22 | | 23 | | 24 | | 25 | | 26 | | 27 |
| | <?xml version="1.0" encoding="utf-8"?>
| | <theme name="default">
| | <style name="red" transcolor="#ff00ff">
| | <!-- layout-->
| | <layout>
| | <windows name="main_windows" image="backgroud.bmp" backgroudcolor="#fffff" width="200" height="200" image_x="200" image_y="200" tips="主窗体">
| | <module name="scrollbar" image="scrollbar.bmp" image_x="15" image_y="20" width="200" height="200" type="scrollbar" tips="滚动条">
| | <fragment name="scrollbar_top" tips="滚动条顶部">
| | <area state="1" name="normal" image_x="0" image_y="0" width="9" height="12" />
| | <area state="2" name="hot" image_x="9" image_y="0" width="9" height="12" />
| | <area state="3" name="pressed" image_x="18" image_y="0" width="9" height="12" />
| | <area state="4" name="disable" image_x="27" image_y="0" width="9" height="12" />
| | </fragment>
| | </module>
| | </windows>
| | </layout>
| | <color_schemes>
| | <class name="media_list_view">
| | <color name="focus_text_color" value="#FFFFFF" />
| | <color name="focus_text_backgroud_color" value="#FFFFFF" />
| | <color name="normal_text_color" value="#FFFFFF" />
| | <color name="hilight_text_color" value="#FFFFFF" />
| | </class>
| | <class name="lrc_view"></class>
| | </color_schemes>
| | </style>
| | </theme> |
|
作者:sluke
发布时间:July 4, 2010
分类:闲言碎语
No Comments
入伏的7月,北京迎来了持续的高温,一如产品经理们的热情。本次的pmcaff活动来到位于七圣路的ku6新址,虽然地处热闹的三环边城区,但是那栋三层建筑前有水池金鱼,后有花园绿草,布置得颇为别致。
第一位分享嘉宾是来自饭统网的练燕杰,主题是《移动互联网的企业级应用》,着重介绍饭统网在与线下餐厅的经验,列举了诸多在餐厅里实际产生的需求,也详细描述了现阶段餐厅用户使用互联网改造自身架构的整个流程,甚至展望了在饭统网所从事的细分领域未来行进之路。详见PPT
第二位分享嘉宾是来自创世互动的陆征,主题是《移动互联网路在何方》,作为在移动互联网领域耕耘多年的老兵,他对移动互联网的发展情况,及未来的发展走势有深刻独到的见解。陆征梳理了从02年sp的黄金时代到目前智能手机高歌猛进各阶段从事移动互联网的企业发展脉络,得出如下几点判断:
1、移动行业的需求是客观存在的,才刚刚开始
2、中高端的用户层面的进场有利于使用环境的形成
3、当精英进入这个行业,会带来良性的发展和影响力
接着又通过UCWEB的例子阐明产品快速迭代及精英化团队的意义,并指出一些草根团队存在的问题:
1、移动互联网想提供给用户一站式服务,最终和精细化的垂直服务竞争时,变成了四不像
2、无法去影响真正的精英用户,辐射的是小范围的草根队伍
3、团队缺少面向未来的野心,未形成核心价值和发展观,内部就已经乱掉了
(未提供PPT下载,详见龙运通科技的马信宝所做的会议纪要,如有名字差别,以pmcaff.com公布为准)
第三位分享的嘉宾是来自二六三网络通信的李雪岩,这位MM带来了她在企业邮箱产品方面的一些经验,整个分享结构合理,条理清晰,尤其是制作精良的PPT,让台下不少产品经理汗颜。详见
其间来自腾讯无线的研发总监钟学丹也分享了他在无线互联网领域的心得,他讲到无线互联网并不是将互联网上已有的服务生硬向手机或其他手持设备迁移,它有自己独特的技术及产品形态,也解答了对腾讯无线开发的一些问题,并诚挚邀请使用腾讯的新版播放器客户端。
最后进行了一个小小的座谈会,由第一视频的白志鹏主持,几位从事手机客户端开发的产品经理(开奇网VP潘志鹏、天空科技张松涛、高阳圣思园邢志文、陆征、钟学丹)畅谈了产品设计、产品定位、需求确定等等方面的心得,也引起了台下产品经理们的共鸣。
在这里要感谢ku6赞助了场地,感谢ku6的产品经理breeze、蚂蚁蚂蚁,尤其是美女产品经理王薇的大力支持,我们会在日后的活动中改进问题(如缺少自我介绍环节),为大家提供更好的交流平台,Pmcaff会与您一起重新认识产品经理。
活动相册,请移步豆瓣观看:
http://www.douban.com/photos/album/29750987/
作者:sluke
发布时间:July 2, 2010
分类:闲言碎语
No Comments
mozilla发布了firefox上各种元素的使用热点图。详见(用非IE浏览器打开):
https://heatmap.mozillalabs.com/mozmetrics/
为方便查看,特截图若干,版权属于mozilla,点击图片查看大图。

表明最热的是后退、地址栏、滚动条。

这是不同操作系统用户的比较,差别不大

这是不同技术水平用户的比较,可以看到高级用户比初级用户少用搜索框和go键,应该表明了鼠标使用程度的不同。
从http://twitter.com/jinghuaz看到的消息,如果想围观此侠女,请猛击https://testpilot.mozillalabs.com/查看视频。
作者:sluke
发布时间:June 21, 2010
分类:学习札记
3 Comments
Google Analytics使用js获取访问数据,实际上它还提供了部署在服务器端的方法,用于统计不支持js的用户访问,比如手机这样的移动设备。目前Google提供了PHP、JSP、ASP.NET及Perl的实现方式,其他语言的可以参考这些完成。
下面以PHP5为例:
1、下载Google提供的程序包
http://www.google.com/analytics/googleanalyticsformobile.zip
2、解压会发现有php的目录,ga.php是需要上传到服务器的文件,sample.php是官方提供的实例。
使用编辑器打开php1.snippet,有如下代码:
| 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 | | 10 | | 11 | | 12 | | 13 | | 14 | | 15 | | 16 | | 17 | | 18 | | 19 | | 20 | | 21 | | 22 | | 23 | | 24 | | 25 | | 26 | | 27 | | 28 | | 29 | | 30 |
| | <?php
| | // Copyright 2009 Google Inc. All Rights Reserved.
| | $GA_ACCOUNT = "ACCOUNT ID GOES HERE";
| | $GA_PIXEL = "ga.php";
| |
| | function googleAnalyticsGetImageUrl() {
| | global $GA_ACCOUNT, $GA_PIXEL;
| | $url = "";
| | $url .= $GA_PIXEL . "?";
| | $url .= "utmac=" . $GA_ACCOUNT;
| | $url .= "&utmn=" . rand(0, 0x7fffffff);
| |
| | $referer = $_SERVER["HTTP_REFERER"];
| | $query = $_SERVER["QUERY_STRING"];
| | $path = $_SERVER["REQUEST_URI"];
| |
| | if (empty($referer)) {
| | $referer = "-";
| | }
| | $url .= "&utmr=" . urlencode($referer);
| |
| | if (!empty($path)) {
| | $url .= "&utmp=" . urlencode($path);
| | }
| |
| | $url .= "&guid=ON";
| |
| | return $url;
| | }
| | ?> |
|
修改 $GA_ACCOUNT = "ACCOUNT ID GOES HERE"; 这一行,写入你的google analytics ID(在通常情况下是UA-XXXXXXX-X,这里要替换成MO-XXXXXXX-X,表示为移动互联网),本段代码复制需要统计的页面里(php2.snippet里的代码页需要复制到),后面会给出完整演示。
3、将ga.php上传至网站根目录。官方给出的实例如下,需要注意的是php1.snippet及php2.snippet的位置
| 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 | | 10 | | 11 | | 12 | | 13 | | 14 | | 15 | | 16 | | 17 | | 18 | | 19 | | 20 | | 21 | | 22 | | 23 | | 24 | | 25 | | 26 | | 27 | | 28 | | 29 | | 30 | | 31 | | 32 | | 33 | | 34 | | 35 | | 36 | | 37 | | 38 | | 39 | | 40 | | 41 | | 42 | | 43 | | 44 |
| | <?php
| | $GA_ACCOUNT = "MO-3845491-5";
| | $GA_PIXEL = "ga.php";
| |
| | function googleAnalyticsGetImageUrl() {
| | global $GA_ACCOUNT, $GA_PIXEL;
| | $url = "";
| | $url .= $GA_PIXEL . "?";
| | $url .= "utmac=" . $GA_ACCOUNT;
| | $url .= "&utmn=" . rand(0, 0x7fffffff);
| |
| | $referer = $_SERVER["HTTP_REFERER"];
| | $query = $_SERVER["QUERY_STRING"];
| | $path = $_SERVER["REQUEST_URI"];
| |
| | if (empty($referer)) {
| | $referer = "-";
| | }
| | $url .= "&utmr=" . urlencode($referer);
| |
| | if (!empty($path)) {
| | $url .= "&utmp=" . urlencode($path);
| | }
| |
| | $url .= "&guid=ON";
| |
| | return $url;
| | }
| | ?>
| | <html>
| | <head>
| | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
| | <title>Sample Mobile Analytics Page</title>
| | </head>
| | <body>
| |
| | Publishers content here.
| | <?php
| | $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
| | ?>
| | <img src="<?= $googleAnalyticsImageUrl ?>" />
| | Testing: <?= $googleAnalyticsImageUrl ?>
| | </body>
| | </html> |
|
需要注意的是
1、不要复制多段代码,不要同时使用js方式
2、Google analytics是通过IP判断用户地理位置,如果是手机用户,尤其是使用了服务器端渲染技术的浏览器,如opera、ucweb等,这一项统计意义不大
3、服务器资源消耗会增大
4、纯静态页面没法统计
PS:Google analytics专门为iPhone和Android提供了SDK,可以在下面的地址下载
http://code.google.com/intl/zh-CN/mobile/analytics/download.html
作者:sluke
发布时间:June 12, 2010
分类:资源资料
No Comments
为方便在scite中调试php,需要修改一下html.properties。
打开html.properties,最后两行是
| | command.go.$(file.patterns.php)=php -f "$(FileNameExt)"
| | command.compile.$(file.patterns.php)=php -l "$(FileNameExt)" |
|
command.go.$(file.patterns.php)=php -f "$(FileNameExt)"
改成
command.go.$(file.patterns.php)=E:\php-5.2.5-Win32\php.exe -f "$(FileNameExt)"
注意php.exe在机器上的路径。
command.compile.$(file.patterns.php)=php -l "$(FileNameExt)"
这一行是管php编译的,可以根据需要修改。
- «
- 1
- 2
- 3
- 4
- 5
- ...
- 96
- »