晓峰

ulhoo.com

五月 22, 2011
by 晓峰
0 comments

twitter的follow体验

在产品设计时，经常会遇到一种模式，就像checkbox一样，有“选中”和“未选中”两种状态，我在这里简称为toggle模式，如下图：

checkbox

简单的checkbox往往还需要有一个确认按钮，来完成所做的修改，如下图：

checkbox_submit

像这样的用户修改状态需要至少点击两次来让修改生效。

 

参考twitter的follow设计

1.unfollow状态，点击按钮完成follow的操作,

follow

  • 按钮中有个“加号”的小图标，有个示意添加的意思

2.following状态

following

  • 从文字说明可以标识当前状态
  • 本身是个按钮样式，说明可以点击修改
  • 鼠标移至按钮时，会出现3的状态

3.following状态的unfollow操作，

unfollow

  • 鼠标移出会到2的状态
  • 点击时做unfollow操作
  • 点击响应后会回到1的状态

整个follow和unfollow都是通过按钮的特性，以及鼠标移动时按钮相应的变化提示来完成，修改状态只需要点击一次即可。

这样的设计醒目且更人性化，界面不需要其他辅助信息而占用更多的空间。

四月 20, 2011
by 晓峰
0 comments

mysql表名批量大写

天有不测风云，有些事情无法预料，就像日本海啸，给人类带来的灾难，老天这哥们不给力我们没办法，我们只能提升自身的处理问题的能力。

今天mysql这哥们也不给力，在linux下表名大小写是区分的，结果前人没注意，大小写乱着来，这不，给我这用ubuntu的人带来了灾难。

Google了半天，有说在[mysqld]下加入一行：lower_case_table_names = 1的，但是我数据库中原有的表名大小写并不一致，之前的表名没办法处理。现在有点懒，我可不想一个一个去改，所以想着批量更新表名。

又Google了半天，找到了一段存储过程（以前没接触过），也看不太懂，试着自己YY，折腾了一会，终于弄好了，有点沾沾自喜，哈哈，想着可能也会有其他同仁会遇到这个问题，所以贴出来，如下

delimiter //

DROP procedure IF EXISTS uppercase //

CREATE procedure uppercase(IN dbname VARCHAR(200))

begin

  declare done INT DEFAULT 0;

  declare oldname VARCHAR(200);

  declare cur CURSOR FOR SELECT table_name FROM information_schema.TABLES WHERE table_schema = dbname;

  declare continue handler FOR NOT found SET done = 1;

  open cur;

  repeat

    fetch cur INTO oldname;

    SET @newname = upper(oldname);

    #IF newname equals to oldname, do nothing;
    #select 'a' <> 'A'; -> 0
    #select 'a' <> BINARY 'A'; -> 1
    SET @isNotSame = @newname <> BINARY oldname;

    IF NOT done && @isNotSame then

        SET @sql = concat('rename table ',oldname,' to ',@newname);

        prepare tmpstmt FROM @sql;

        execute tmpstmt;

        deallocate prepare tmpstmt;

    end IF;

  until done end repeat;

  close cur;

end //

delimiter ;

二月 9, 2010
by 晓峰
0 comments

javascript和html中unicode编码和字符转义的详解

本人之前已经对javascript中unicode编码进行了解释，请参照http://ulhoo.com/blog/?p=72。但在不是十分理解unicode和html转义的情况下，可能会误用，所以下面会对它们再做比较容易理解的解释：

1.html中的转义：在html中如果遇到转义字符（如“&nbsp;”），不管你的页面字符编码是utf-8亦或者是GB2312，都会直接打印成相应的字符；而当遇到（如：“\u8981”【此处的8981是16进制值】）时，则不会打印成相应字符。

/*
 *html标记的转义
 *@example
 *<p>Hello World!</p>
 *       ||等价于
 *<p>Hello&nbsp;World!</p>
 *       ||等价于
 *<p>Hello&#160;World!</p>*/
"&nbsp;" == "&#160;"; //false
"&nbsp;".length == 6; //true

2.html中的unicode编码：（如：”&#160;”,【此处的160是10进制值】）

3.javascript内的unicode编码：当遇到unicode编码时（如：“\u8981”），则会打印成相应的字符；而在javasript标签中，不会对转义字符进行转义（如“&nbsp;&#160;”）

/*
 *javascript中unicode编码
 *@example
 *"\u8981" == "要"; //true
 */
"\u8981".length == 1; //true

4.javascript中的转义：（如：”\n”会转义成换行符）

5.javascript中unicode编码和字符的相互转化

/*
 *unicode编码和字符相互转化
 */
"要".charCodeAt() == 35201; //true，35201为10进制值
String.fromCharCode(35201) == "要"; //true，35201为10进制值
"\u89" + "81" == "要"; //false，值为"u8981"，是由于"\u"会转义成"u"

//从unicode编码到字符的方法
eval("(\"\u89" + "81\")") == "要"; //true，8981为16进制值

一月 31, 2010
by 晓峰
0 comments

电推剪和手剪的区别之与代码手写和所见即所得

平时理发的时候，你会喜欢让理发师用手剪还是电推剪，相信很多人都讨厌理发师用电推剪：

  1. 电推剪推出来的发型过于平整，死板
  2. 电动的嗡嗡声让人烦躁不安
  3. 手剪的更个性化，更能处理细节，更符合人的不同审美需求

电推剪的缺点在于没有细节，死板，难看，所以很不喜欢，而理发师优雅的技术似乎更让人钦佩，让人向往。

当然，电推剪也有它的特有的优点“平整”，在脖子后面的比较细小的汗毛比较适合用它来完成，很干净，很利落，相信理发师不会愿意用剪刀去给你去刮汗毛吧。

代码所见即所得，顾名思义，通过看到的得到想要的，举个例子，Dreamweaver，刚开始从事网页设计的朋友都会选择它，可能是因为一方面所见即所得，一方面不太熟悉一些属性，有代码提示功能，还可以插入代码片段，比如插入一个表格，比较熟悉的人可能一会儿功夫就能弄完一个页面，且不说它源码凌乱，很多无用的代码，浏览器兼容性差，无标准可言。。。整完所有这些，相信你会觉得还是手写更好更快一些（当然你也可以不整，很多人选择不整）

不过一些工具还是有很多辅助功能，能帮你达到事半功倍的效果，一些代码提示，一些代码片段，都非常实用，下面介绍一二：

  1. eclipse的代码提示功能非常好用，如果是前端开发的话，用Aptana就能满足你大部分需要，spket很轻便也不错；
  2. 代码格式化功能，使代码非常整洁，如eclipse系列的Aptana、spket；
  3. 代码加亮，几乎所有的编辑器都会有；
  4. 代码补全功能，很喜欢轻便的编辑器，在用ubuntu的时候结实了gedit，用作集成工具肯定不能胜任了，但是平时写写html，css都是非常好的，可以设置自己想要的片段，比如doctype（相信没人会想去记住它），为了符合标准，还不得不写，用gedit的话，“doctype+tab”即可完成，太酷了，“html+tab”把html的head，body都完成了，“div+tab”完成一个闭合的div标签，等等，省去了很多代码编写时间。

在开发web编辑器的过程中，总会发现用户不是特别会用，确实在线的编辑器没有word那么好用，原因是用户不懂html，相信熟悉html的人会选择切换至源码状态，看看html是否符合自己的期望，整洁的html不仅使页面美观，而且可以增加页面健壮性。

也许未来的网站编辑或者公司文员的应聘的条件是“是否熟悉掌握html”，哈哈。

编辑器的功能在于在用户想插入链接的地方按照某种规则正确的插入链接，在想加粗的地方正确的加粗，等等，在这一过程中，用户并不会知道用了什么标签，<a/>,<b/><strong/>或者使用font-weight:bold来控制显示，他们也不会去关心这些，但是程序和机器有一个共性，只能处理自己知道的事情，对于一些不寻常的操作和不符合规则的操作，很难完成任务，所以用户没有一定的html基础也很难完成任务。

收笔

一月 19, 2010
by 晓峰
1 Comment

host&domain

FROM：https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

The same origin policy prevents a document or script loaded from one origin from getting or setting properties of a document from another origin. This policy dates all the way back to Netscape Navigator 2.0.
不同域禁止相互访问document对象

Mozilla considers two pages to have the same origin if the protocol, port (if one is specified), and host are the same for both pages.
同域满足的条件是1.相同协议（如http和https为不同协议）2.端口（如:80和:8080为不同端口号）3.相同主机（如ulhoo.com和www.ulhoo.com为不同主机名）

There is one exception to the same origin rule. A script can set the value of document.domain to a suffix of the current domain. If it does so, the shorter domain is used for subsequent origin checks.
子域可以设置为更高一级的域，反过来做是禁止的，例如”http://www.ulhoo.com”的document.domain对象可以设置为”ulhoo.com”，而”http://ulhoo.com”的document.domain对象不可以设置为”www.ulhoo.com”

—————————————————————–
举个例子：

步骤1.在www.ulhoo.com域下，open一个ulhoo.com域的窗口

var win1 = window.open("http://ulhoo.com/blog");

步骤2.同时设置ulhoo.com窗口的domain为”ulhoo.com”

document.domain = "ulhoo.com";

ps：我们是不能在www.ulhoo.com下设置win1窗口的domain属性，必须依赖”http://ulhoo.com/blog”的自身脚本去设置，此时即使打开”http://www.ulhoo.com/blog”也必须必须设置document.domain为相同值。

十二月 20, 2009
by 晓峰
2 Comments

第四届D2行

怀着兴奋的心情来到了盼望已久的杭州D2交流会，会址在滨江区的阿里巴巴。

12月19日上午举行，所以我和宝鑫19号晚上就从上海出发，凌晨2点多到了杭州东站，买了张地图，问了问路，因为晚上没车去滨江区，早上5:30才有车，所以决定招惹一下在车站拉客的人，找个地方可以睡上3、4小时。找了一哥们，什么都没来得及说，就被拉上了车，去了一家旅馆，最后我们选择了在楼顶的一间房，这是一间比较廉价的房间，由于我们俩都希望节俭一些，所以就凑活在这住下了。可能是高处不胜寒，俩人在那直哆嗦。现在想来我们跟睡在大街上没多大差别，也算体验了一下天为被，地为铺的生活，辛酸了一把。

早上公交穿过时代大道，来到了阿里，8:45签了到，领了进门证，一只手袋，一瓶水，一些会议会址的介绍书，以及中午的餐券

会议由闭月主持，会场气氛很活跃

有5个演讲嘉宾，就略说一二吧，

1.百度的金大为，题为《大模板》，谈到数据模型的理念，很赞同这种观点，对数据的操作比较接近Extjs的Store，很灵活，数据的更改会带来相应界面的重新渲染

2.豆瓣的张克军，YUI的演变历史，谈及“库”到“框架”的转变，以及一直强调前端理念的重要性。

3.QQ演示了silverlightQQ，界面确炫的没法说

4.明城的安全性，由于之前还没涉及到安全性的考虑，新鲜

5.秦歌的性能优化，涉及到一些很细小的优化，精彩

内容还算丰富，但总感觉缺了点什么。是不是还有谁没来，或者其他什么的

晚上踏上归程。。。

十一月 22, 2009
by 晓峰
2 Comments

互联网与生活

最近喜欢随意浏览一些网站，漫无目的，但是细看各个网站都有它的不同之处，换句话说就是都会有它自己的亮点，每个模块也许内容排版或者界面设计并不是十分到位，但是这样那样的设计多少会有他的道理，所以绝大多数网站都足以让我停留片刻。

网站想生存下来，必须为用户提供服务，以此留住用户。从在线音乐、视频，社区、门户、论坛，到新闻、博客等等一系列工具，为用户提供了不同方面的服务，用户从不同的服务当中得到不同的满足。人有不同的需求，需求也分不同的层次，而一个用户同时可能有多个需求，那我们如何把握住用户的需求？我们是不是要做到满足用户的所有需求，很明显我们没必要这么做，它也是一件不现实的想法。其实我们只要满足用户的某一个需求，我们就成功了，就足以让用户逗留哪怕一会儿工夫。

互联网不断的发展，但各个互联网产品都似乎在围绕现实生活打转，也就是说，互联网产品源自现实生活，并不会脱离我们的生活，日常生活中有什么样的形态，我们都可以围绕它在互联网中开辟一席之地，生活中有社区，依靠互联网我们也可以模拟一个社区，每个社区成员都会有一个ID，来参与社区的活动，有时也会有游览观光者，他们不是社区的一份子，所以他们没有ID，但他们如果获得门卫的允许，可以在社区里自由观看风景。我们再来看观光者和社区成员的关系：社区成员若不出示证件，跟观光者也没什么区别，门卫也会对他进行打量；而观光者如果出示了有效证件那么他也就享有了跟其他社区成员一样的权限，观光者如何取得证件？方法很多，有正规渠道，也可以盗取他人的证件。我们可以看出网络社区的处理事情的方式完全和现实生活中的社区吻合。

那么我们是不是就可以说互联网产品和服务源自生活？我的答案是：yes。如有不同意见，拍砖即可。

冒昧的抛出狂言，细心品味生活，才能真正的做好互联网产品。本人网络技术出身，起初以为有了技术就可以做自己想实现的东西，现在想来实在是不成熟。用心去理解生活，体会生活，方能理解互联网。

十月 31, 2009
by 晓峰
7 Comments

乱扯一番

博客停了好长时间，工作忙…，不是借口，最大的原因还是心停不下来，此刻我不想狡辩什么
我只想说，“哥想回来”
一周的最后一天也是下一周的第一天
坐在窗前，耳边来去不绝的车辆
窗户上贴着窗纸，据说是之前的MM贴的，还有一丝阳光可以透过
啪啪啪的键盘声，心却静了下来
系统刚升级到9.10，爱不释手
室内的音乐，一遍又一遍的也不厌烦，用的是简洁但不逊色的Rhythmbox

…
看到落花的首页，也不想说什么了，很有型，太阳和船如果作为backgroud来显示的话，Crtl+A就更酷了
大冬的clearTime，很赞
sliuqin带着美女去了杭州，甚是想念

fireFTP拖动着，准备改点什么，不然out了
…
晚上去小胡那做饭，上次做饭已经很久了

五月 23, 2009
by 晓峰
0 comments

json_encode中的编码问题

前段时间想把数据格式转化成json格式，以便于前端处理，php中恰好有个函数可以将各种类型的数据转成json，json_encode,用法如下

<?php
  header('Content-Type: application/json; charset=utf-8');
  $obj;
  $obj -> id = 1234;
  $obj -> name = 'mtalk';
  echo json_encode($obj);
?>

会格式成:

{"id":1234,"name":"mtalk"}

当字符串包含utf8中文字符时，json_encode会把中文字符转成unicode字符串，例如：

json_encode('要');

会格式化成：

(1)."\u8981"

而不是：

(2)."要"

而经过javascript读取之后还是会在页面显示为(2)。
起初还一直以为是LAMP的那个部分的字符集出了问题，经查证，json_encode本意如此，再说经过javascript处理就不会有页面显示的问题，而且json字符串不会因为不同的字符集同时出现时出错，所以也是有一定的道理的。好了，废话不多说，点到为止。

五月 18, 2009
by 晓峰
1 Comment

LAMP中utf8乱码解决方案

php,mysql的utf-8乱码问题已经很久了,找了一大堆资料，却不能解决，其实并不是很难解决,只是方法就在眼前,而没能发现:
在分别在mysql,php,apache中配置相关参数后,执行如下操作:
1.mysql的配置文件,如”/etc/mysql/my.cnf”文件在［[mysql]］下添加:

default-character-set=utf8

2.php的配置文件,如”/etc/php5/apache2/php.ini”:
把;mssql.charset = “ISO-8859-1″该写成如下（去掉前面的“;”）,

mssql.charset = "utf8"

3.apache的配置文件,如”/etc/apache2/conf.d/charset”添加如下:

AddDefaultCharset UTF-8

【注】在不同的系统以及不同版本的相关软件的配置会略有不同,但是并不会大相径庭:
接着,重启mysql,apache;

SHOW VARIABLES LIKE 'character_set%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | latin1                     |
| character_set_filesystem | binary                     |
| character_set_results    | utf8                       |
| character_set_server     | latin1                     |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
SHOW VARIABLES LIKE 'collation%';
+----------------------+-------------------+
| Variable_name        | Value             |
+----------------------+-------------------+
| collation_connection | utf8_general_ci   |
| collation_database   | latin1_swedish_ci |
| collation_server     | latin1_swedish_ci |
+----------------------+-------------------+

如果还有乱码问题，则可以在查询代码之前加如下代码：

mysql_query('SET CHARACTER SET utf8');
mysql_query('SET NAMES utf8');
mysql_query('SET COLLATION_CONNECTION utf8');
mysql_query('SET COLLATION_DATABASE latin1');

例如:

#  mysql_query('SET CHARACTER SET utf8');
mysql_query('SET NAMES utf8');
#  mysql_query('SET COLLATION_CONNECTION utf8');
#  mysql_query('SET COLLATION_DATABASE latin1');
$result = mysql_query("SELECT * FROM mtalk.talkdata");

ok,搞定,很久的问题终于搞定了,爽！

链接
http://lists.mysql.com/../331