好好活=有意义 有意义=好好活

中国有句古话，“人多力量大”，放置在今日，可以改成“人多价格低”；

2010年初，“团购”网站就好像雨后春笋一样，遍地开花；这个团啊，那个团，一夜间，互联网已经被“团团”围住；
如果我没记错，国内最早独立成团的，应该王兴创建的美团网；

团购网的商业模式是非常之简单的，作为一个在商家和消费者之间的媒体，团购网站依靠收取一定的服务费佣金来盈利；这种简单的商业模式，却能使得团购网站在成立之初，就能够实现盈利；而团购网站的成立成本之低，几乎没有技术含量，也使得团购网站能够很快的被复制；
阅读全文 »

纵使iPhone4的信号门事件轰动了手机界，也依然无法撼动iPhone在智能机销售榜上霸主的位，分析其原因，就是在于iPhone抓住了用户的G点，也就是需求，用户对于上网娱乐的需求。

同样的，黑莓手机在商务机中的地位，也是Nokia和iPhone无法撼动的，因为黑莓同样的抓住了商务人士的G点，掌上/移动办公的需求。

矛盾、漏洞、缺陷、错误……等等等，重要的是只要产品能抓住用户的G点(需求)，那么一切的一切都不再是问题；

看了很多期的《非诚勿扰 》，很多女嘉宾会为灭掉男嘉宾灯找各种理由：太老实、太前卫、太胖、太瘦、太高……最后，女嘉宾往往被另一个有着同样这些缺点的人给带走。
这往往都是因为男嘉宾的某方面的优势触到了女嘉宾的G点，一般来说是两种，帅或者有钱；
阅读全文 »

某公司招聘新职员；
【甲】种岗位底薪是1,000元/月，每月加薪200元；
【乙】种岗位底薪是600/月，每【半月】加薪60元。
注意：两种岗位都是【半月】发一次薪水。
那么：如果是长期工作的话，哪个岗位更好？

如果你毫不犹豫的回答 【甲】种岗位好，那么恭喜你，你的智商杯具了？
请看下面这张表格：

阅读全文 »

1.避免混淆的字符的出现
通常，我们喜欢使用数字+字母的随即组合，来生成验证码，但是，有这么几组数字和字母，是很容易混淆的：
0(零)，小写字母o，大写字母O，这3个字符，是最容易很容易混淆的；
1，小写字母i，大写字母I，小写字母l，这四个字符，在某些字体下，几乎一摸一样；
7，大写字母T，这两个字符，在倾斜后，很难分辨；
9，小写字母q；
6，大写字母G；
m，n，u，w，v，这5个字符，虽然很好辨认，但是如果连在一起出现，就会让人晕了；
请多尝试测试所有字母和数字的显示，并尽量的避免混淆字符的出现；

2.让用户更容易的输入
绝大多数的用户习惯右手握住鼠标，而左手放在键盘上，所以，在左手控制范围的按键如下图红色部分：

所以，对于验证码的组合，我更偏向于使用红色部分的字母和数字，这样用户会在输入时，右手不必离开鼠标；
阅读全文 »

分类的产生
在日常生活中，我们的物品都有其各自的储存位置；
我们把信用卡放在皮夹里，皮夹在拎包里，拎包在衣柜里，衣柜在房间里，房间在大楼里， 大楼在小区里，小区在街道里……

最早使用分类来对信息进行归类的是图书馆，直到计算机的出现，于是也就有了文件夹这个概念；
我的电脑 -> C盘 -> 我的文档 -> 我的音乐 -> Mp3 -> Lady Gaga -> Poker Face.mp3

可以说，分类模型的出现，大大提升了人们在生活工作中的管理能力；但是问题也随之出现了：
我们开始花费越来越多的时间在整理文件(夹)上；
我们开始烦恼，把文档放在A文件夹？还是B文件夹？
我们发现有些文件因为同时具有多个属性而难以被放到一个特定的文件夹中；
我们发现，有些文件是难以归类的；
我们为了找到一个文件，不得不打开一层又一层文件夹；

标签的出现
一种新型的关系型分类概念出现了：标签/tags/label；
通过标签，我们在Flick.com上能更容易找到照片；我们在Wordpress上能更容易的找到文章；我们能把一个文件定义多个标签代替在每个分类下都做一份Copy……
阅读全文 »

最近在求职，同时也要找到适合的应聘者来接替我现任的职位，所以处在了这样一个同时面试和被面试的状态；也正是由于出在这种状态下，我对招聘Web工程师(包括类似职位)有了比以往更深刻的认识；

在面试中，过多的专注于技术细节上提问意义不是很大，能把手册上的函数命令都背下来的程序员不一定是一个好的开发人员；
把技术问题作为面试的主要内容，这本身就受限于面试官自己的技术能力，无法很好评估一个应聘者的优劣；

以下是我在面试时会提问的一些问题；
===================题目===================

1. 对于Web2.0的理解；
2. 常用的WEB开发和测试工具(JS，CSS，HTML，程序脚本……)；
3. 对于网站优化的理解(SEO，UEO)；
4. 通过哪些网站或者博客了解和交流互联网最新技术；
5. 最欣赏哪些网站；
6. 对开发框架的理解；

*以上问题没有正确答案，文章最后，我自己做了回答，但这绝对不是正确答案；
阅读全文 »

昨天下午面试时，和雇主讨论起了何为Web2.0，当时我说：Web2.0就是一个功能，让网民都能参与信息的创造和传播；
经历昨夜的T.G.F.W(Twitter+Google+Firefox+WordPress)过后，Web2.0对我而言不已可同日而语；
今天，如果有人再问起我，何为Web2.0，我会告诉他，Web2.0是一个开放的平台，用户在创造和传播信息的同时，归纳出属于用户的应用方式；

就好比乐高玩具，几块不同颜色的简单积木，能够让孩子搭建起自己的梦想；

第一代互联网是企业发布信息的平台，而第二代互联网是用户创造信息的平台；
足够的开放性，提供给用户无限的创造空间；
当年Mark只是想用Facebook来泡妞，却不想成为了全球最大的互联网社交平台；
开源程序Wordpress的发布，起初只是为了满足个人建立博客的需求，而今天，更被广泛作为CMS系统，Photo Blog，e-Commerce，Job Press，Vote System等更多应用在运行；
阅读全文 »

这几天做了一个页面，在FF，SF，OP下浏览，都没问题；
可是换在IE7/8下浏览却开了天窗(显示空白)；

于是，
在空白处点击鼠标右键，选择”View Source”，看到的源代码与FF下相同；
在空白处点击鼠标右键，选择”Encoding->Unicode(UTF-8)”后，页面能正常显示；

问题就出在这里，明明在网页的头部，定义了：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
可是在IE下为什么非要手动切换网页编码，才能正常显示呢？
阅读全文 »

(图1)

(图2)

同样是单选，两者有何不同呢？

第一种(图1)，我们称之为下拉(框)式单选；
优点在于节省了空间，特别是当选项数量超过一定数量时，或者在排版要求限制的情况下，我们经常可以看到；
步骤：2步完成(点开下拉框，选择选项)

第二种(图2)，我们称之为列/枚举式单选；
优点在于把所有的选项都直接地罗列出来，让客户可以一目了然；
步骤：1步完成(直接点击选项)

如何在WEB上选用适合的单选形式，是有很多学问的： 阅读全文 »

首先说一下，截止今天为止，生成图表的控件满街都是，Open Flash Chart, FusionCharts, Pchart…，他们各有千秋。

但是功能最强大 ，目前为止还属gChart(Google Chart Tools/Image Chart)，gChart是一款基于数据的图表类，生成的图片是png格式的，一般通过get方式提交数据生成图片，当然，如果数据量很大的话，也可以通过post方式提交。

废话不多，我们先从最简单的饼图开始。

http://chart.apis.google.com/chart?cht=p3&chs=400×180&chd=t:9,19,46,26&chco=FFFF00,DD0000&chdl=9%%20Not%20involved|19%%20Specifying|46%%20Recommending%20/%20Influencing|26%%20Decision-making%20/%20Authorizing

2009 Visitors’ role in decision-making

为了生成一个图表，我们需要提交一些必要的参数给http://chart.apis.google.com/chart：

1. cht=p3，设置饼图的样式，p3为3D型；
   其他类型还有cht=p(普通型)；cht=pc(Example)
2. chs=400×180，设置饼图的大小，以像素为单位，400宽，180高；
3. chd=t:9,19,46,26，设置数据比(注：此处数据必须小于100，如果大于100，则默认为100)；
4. chco=FFFF00,DD0000，设置饼图的颜色(16进制)，格式：起始色,结尾色，中间颜色的过渡，我就偷懒了，因为Google会自动生成；
   当然您也可以指定颜色，这么使用chco=FF0000|00FF00|0000FF|00FFFF
5. chdl=，设置右边的说明文字，用“|”符号隔开(注：中文文字一定要经过url编码)
6. 更多开发指南，请浏览Google Chart Tools / Image Charts (aka Chart API)

先看Example页面(我和我的死党们的坐标)
还有一个特别制作的经维度坐标查询页面
严重声明：谢绝跨省追捕和人肉搜索

下面我来分解：

1. 首先，注册一个API key，这非常重要，否则下面都是扯谈；
2. 加载JS文件：http://partner.googleadservices.com/gampad/google_service.js
   加载你注册的API key：
   http://maps.google.com/maps?file=api&v=2&sensor=false&key=yourAPIkey
3. 在指定的容器中加载Google地图：
   var map = new GMap2(document.getElementById(”ElementID“)); //这里我使用的是第二版的地图，所以用GMap2，第一个版本已被淘汰，第三个版还在Beta测试中
4. 设定地图中心坐标，地图缩放级别：
   map.setCenter(new GLatLng(dimensionality, longitude), size);
   //dimensionality：维度值
   //longitude：经度值
   //size：地图缩放级，随数值增大而放大
5. 设置地图的属性：
   map.enableScrollWheelZoom(); //设置滑轮滚动缩放
   map.addControl(new GLargeMapControl()); //给地图添加控制按钮
   更多属性设置，请参阅开发人员指南
6. 当然，还能为地图添加标记：
   GMarker(point, markerOptions);
7. 还能给地图添加事件监听器：
   GEvent.addListener(object, “action“, function() { … });
8. 补充一下，Google地图的坐标是用经度和维度组成的数组，如何查询经度和维度，点击此处(从我家开始吧)；
9. 如果出现文字问题，请把Javascript编码强制改为utf-8：
   <script …  type=”text/javascript” charset=”utf-8″>
10. 最让我头痛的是此版的Google地图API没有错误控制台，有时候经常遇到错误却找不到原因；
11. Google地图API是无比强大啊，还包括了：两点间测距，绘制图形和路线，地图标记个性化等众多很实用的功能；
    各位大侠，哥的砖头已经抛出去了，你们有玉的引点过来吧。

前段时间在使用YSlow对网页速度进行检测的时候，接触了Gzip；
在对CSS，JS，HTML代码做了优化后，通过Gzip压缩，还可以大大提高网页的浏览速度，降低服务器带宽使用。

以下是我做的两个测试页面：
经过Gzip压缩的页面：Gzipped (压缩率为9-最高)
未经Gzip压缩的页面：UnGzipped (无压缩)

用Firebug检测网络传输数据，截图如下：

阅读全文 »

作为展览会的主办方，对于展商观众数据的深度挖掘和分析，是一项非常重要的工作，
这不仅仅是对上一届的展会工作的总结，更是下届展会工作筹办的参考和依据。

很多展会项目，都会通过一种观众调研表的形式，来收集展商和观众数据；
传统的调研表，通常都会包含这几个大项：
个人信息(联系方式)；
工作信息(职位/部门)；
公司的基本信息(经营范围/市场)；
感兴趣的产品；
您对展会XX是否满意(很满意/满意/一般/有待提高/不满意)

这种形式的调研表已经成为了展览会数据收集的普遍形式，这样一种标准形式的形成，作为主办方我非常高兴；
但是当我把自己作为一个观众或是展商去填写这些表格的时候，我却感到非常的不愉快；
因为：我是来参加展会的，并不是来提交数据的；
阅读全文 »

泡妞有很多原则，活了快三十年了，虽然一直在坚持着这些原则，但还未曾泡到过妞；

然而，把这泡妞原则放在展会工作中去，却非常地有效，这里我总结了十大原则：领袖原则；耐心原则；风度和气质原则；上床至上原则，不上床原则；关系提升原则；负责原则和不负责原则；不拒绝原则(国际惯例，排名不分前后)，下面和大家分享一下：

领袖原则：
女人会被比她强的男人所吸引，比她的强的男人能给她安全感，给她幸福生活的能力；
做展览会就是要做一个行业的领袖，而行业领袖是靠高效业务能力和强大的影响力体现出来的，一个成功的行业展会，能给整个行业带来持续的活力，给展商和观众以信心，为整个行业的发展承担一定的责任，搭建一个开放和公平的竞争舞台；

耐心原则：
最终打动女人的，往往不是相貌，也不是金钱，而是耐心；
主办方无论是在对待展商还是观众，协会还是媒体，都需要耐心，当然我这里指的是一种发自肺腑的耐心；
无数次的电访，无数次的DM推广，无数次的电子邮件或者传真，即使没有一次应答，这些工作的也不是白做的，机会是给那些有准备而且有耐心主办方的。
阅读全文 »

首先让我们来看一个表单的提交按钮(图)

来源: Luke Wroblewski写的“Primary & Secondary Actions in Web Forms”这篇文章。
第三个表单提交按钮被设计者采纳。

我们把【提交】，【保存】，【下一步】……等这样的按钮点击认为是用户的潜在行为；
而【取消】，【返回】，【放弃】……这样的按钮，认为是用户的次要行为；

所以，通过对Web表单按钮的设计，让这样的用户潜在行为按钮，更加突出；同时，削弱用户次要行为按钮的现实效果，有效的给予客户操作上的引导。 阅读全文 »

延迟加载，最早是在淘宝购物时候发现的，宝贝页面的内容通常都超过3个屏幕的高度；
而卖家也往往把交易方式，汇款方式，注意事项等，都做成图片形式，放在页面中；
所以，打开一个宝贝页面，需要Loading的图片平均都会>200K；

为了减轻服务器压力，为了提高页面打开速度，提升用户体验，淘宝网就用了这么一种名叫“图片延迟加载“的技术；

实现这一个技术很简单，只需要加载一个JS文件即可；

大家可以直接采用淘宝的延迟加载技术：
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js

调用方法也是很简单的：
<script type=”text/javascript”>KISSY.ImageLazyload();</script>

至于高级配置，大家可以看这里;

如果您是Jquery，Prototype等这些JS框架的粉丝，他们都有定制的LazyLoad Plugin提供；

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader和Bing图片搜索就把LazyLoad技术运用的淋漓尽致；

缺陷：在对LazyLoad琢磨了一个小时候，也发觉了一些当前延迟加载技术的问题；
1，与Ajax技术的冲突；
2，图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题；
3，写代码不规范的童鞋要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用ImageLazyLoad；

这些地方在未来的使用中还需注意。

最近在做一个url缩写的服务，当然这个功能只是内部使用，并不对外开放；

研究用正则对页面的URL进行抓取后再对URL进行处理，但发觉无论多么NB的正则，都无法很好的把整个页面的URL给抓取下来；
主要存在以下几个问题：
1，处理特殊符号不当，如单引号，双引号，尖括号，”@”"&”符号；
2，处理https，ftp，带有端口号的url(http://www.site.com:8000)等特殊的url遇到错误；
3，会把诸如img标签，甚至background-image的文件也当成url给抓取下来；
4，越完美的抓取正则，执行效率就越让人崩溃，加上网络延迟，抓取门户网站首页链接，让我有种想砸键盘的冲动；

于是只得另觅它法；
在发文前，已找到了一个相对比较完美的方法，那就是用PHP自带的Dom Extension；
Dom Extension功能在PHP5.0以上是自带且默认开启的，所以不用做任何配置；

下面是实现代码(绿色)，很简单，而且执行效率很高，至于容错性嘛，至今我未发现有错误；
阅读全文 »

User Experience Optimization，即用户体验优化；下面我先用几个例子说明下UEO例子；例1：在线手机充值
传统在线手机充值页面(图1)

优化后的在线手机充值页面(图2)

通过手机号码，系统能识别出用户的所在地和运营商，何苦还要让用户多做两道选择题呢，况且“选择题做错，零分”(蜗居-宋思明)。 阅读全文 »

我相信，看完2012电影朋友肯定对那个俄罗斯大佬声控启动宾利的场景记忆犹新吧。
当我看到这一幕的时候，我不仅想到了最近很火的一个词语“框”。

当下互联网,“框”的应用无疑是最流行的，即使我这篇Blog，也是在文本输入“框”内打出来的；
但是，当我看完2012后，我突然觉得，“框”——这个互联网输入接口，将会逐渐的消失。

同事Penny最近发现了，手机谷歌已经启动了语音输入查询，毕竟，在手机上输入一长串的文字，是件很麻烦的事，于是，Google先行做了语音搜索，只需对着手机说：奥巴马，于是，与奥巴马相关的内容出来了(可惜的是，此功能貌似只有iPhone有，我的Windows Mobile下还没找到能用的软件，另外，语音识别技术也有待提高，目前识别的错误率是很高很高滴。)

Engine Start，宾利启动了；
不仅仅是Google和宾利，Windows Vista早已发布了指纹登陆系统，在IBM ThinkPad T61开机后，你会发觉，传统的用户名和密码输入“框”旁还带了个指纹登陆选项了。

相信不久的将来，“框”会越来越少，互联网科技不应被“条条框框”所束缚；

我甚至更期待不久的将来，将会出现本地方言查询系统，
打开Google首页，
我对着屏幕说：“乃伊组特.”，
Google回答：“乃萨宁组特?”，
我继续输说：“乃百度组特!”，
Google回答是什么呢？