Little Fox is Learning http://corababy.net/tech People are designed for lots of things, but loneliness isn't one of them. Thu, 20 Aug 2009 23:16:44 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 尽信书? 无书? 边读书边思考? http://corababy.net/tech/2009/08/21/%e5%b0%bd%e4%bf%a1%e4%b9%a6-%e6%97%a0%e4%b9%a6-%e8%be%b9%e8%af%bb%e4%b9%a6%e8%be%b9%e6%80%9d%e8%80%83/ http://corababy.net/tech/2009/08/21/%e5%b0%bd%e4%bf%a1%e4%b9%a6-%e6%97%a0%e4%b9%a6-%e8%be%b9%e8%af%bb%e4%b9%a6%e8%be%b9%e6%80%9d%e8%80%83/#comments Thu, 20 Aug 2009 23:16:44 +0000 little fox http://corababy.net/tech/?p=54 我是在昨天才异常清晰的明白, 自己所处的位置是那样最底层的最底层.

当相同的事情用不同的视角和分析方法去思考的时候就会发现其中的截然不同之处.

我才理解到, 那些建立在好玩基础之上而促使自己去光顾的网站, 是可以用理论化的科学依据去作解释的.

比如, 它可以让我和朋友交流并保持联系.
比如, 它可以满足我消磨时光的无聊感.
比如, 它可以令自己找到炫耀和展示的地方.

而每一样事物在被创造直到抵达终极的使用者的位置是经过一份漫长和隐忍的过程, 也许免不了的长篇论断, 也不能无视在开发过程中的曲折和艰险, 更无法预知那个和角色模型对应的实实在在的使用者会不会真正的喜欢.
这是赌注, 也是需要极大勇气的冒险.

重要的并非是实现的过程, 毕竟在实现的时候, 内心已经有了一枚明确和清晰的目标.

真正困难的是探索, 没有照明的工具, 没有任何光亮的来源, 在黑暗中, 最容易迷失的就是方向感.

书上说应该如何, 应该按照怎样的流程.

书上说的对, 但是不全面, 书上总是不会考虑的突发状况和新生事物. 书上会用已经存在的那些, 书上的探索精神却是在真正去做的过程中一步一步发掘而来的.

尽信书不如无书, 不过, 书还是要看, 只是相信什么, 思考什么似乎要重新规划了.

++好孩子珊瑚++

Share/Bookmark]]> http://corababy.net/tech/2009/08/21/%e5%b0%bd%e4%bf%a1%e4%b9%a6-%e6%97%a0%e4%b9%a6-%e8%be%b9%e8%af%bb%e4%b9%a6%e8%be%b9%e6%80%9d%e8%80%83/feed/ 0 [读书笔记]UCD火花集 – 人物角色设计 http://corababy.net/tech/2009/08/13/%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0ucd%e7%81%ab%e8%8a%b1%e9%9b%86-%e4%ba%ba%e7%89%a9%e8%a7%92%e8%89%b2%e8%ae%be%e8%ae%a1/ http://corababy.net/tech/2009/08/13/%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0ucd%e7%81%ab%e8%8a%b1%e9%9b%86-%e4%ba%ba%e7%89%a9%e8%a7%92%e8%89%b2%e8%ae%be%e8%ae%a1/#comments Thu, 13 Aug 2009 05:16:06 +0000 little fox http://corababy.net/tech/?p=42 人物角色设计

"人物角色"是一个工具, 用来帮助产品设计人员和团队成员了解并记住用户需求.
 
角色的每一个属性, 都是从大量的真实数据中提炼出来的. 
 
因而, 任何脱离数据基础的角色, 并不具有说服力, 更不可能对产品决策产生任何正面影响.

来自Angela老师的”角色是用户的可视化界面”

人物角色(Personas)本质上可以说是"针对网站目标群体的部分真实特征的描述".
 
如何使人物真实可信:
 
1) 每个角色能代表所关注的真正用户
 
2) 角色的属性和描述是精确而完整的.
 
3) 这一组角色能涵盖所有的用户


那么是不是可以认为人物角色起到了具象化的作用, 把很多抽象的, 散乱的, 无章的数据进行分析再整合, 相同类型的人格类型, 或者说性格聚合在一起, 再进行符合设计需求的加工和修饰.
就像是写小说, 来源于生活, 所以读起来真实可信, 高于生活, 所以更加引人入胜. 不一定会在生活中找到完全的一摸一样的人, 但是会发现这一类型人们的影子, 在潜意识中形成这样一种感觉: 人物角色是真真实实存在的.

来自白鸦老师的”让人物角色站到你的面前”

角色设计是"通过创建典型用户来代表具有不同目标的用户从而满足具有类似目标和需求的用户群".
 
产品设计者可以站在用户的角度考虑问题, 从而把设计者的注意力集中在用户需求和目标上.
 
角色设计可以更加真实亲近的在线典型用户, 具象化服务对象, 让产品设计更有针对性.
 
角色设计的前提是, 你能够很好很准确的了解和把握产品即将面对的用户群的特征, 以及其特征性的行为模式.

角 色设计的阻力原来是来自于设计师自己么? 或者说很大程度上是来自于设计师本身的. 想来, 这个现象原来是那样普遍和深入. 而常常作为旁观者的其他人似乎习惯于这样一种模式, 我想, 还是责任感在作怪吧. 当我们缺乏责任感的时候会仅仅看到属于自己的那一部分, 而之前和之后的事情无论结果是怎样, 我们都只是充当倾听者和接受者的角色.

如果说角色设计占有的是一席重要位置的话, 我在此处就跌倒了. 回想仅仅是自己对博客的设计, 就已经充满了150%的主观性, 而我从来不知道谁会来读, 读哪个分类下面的文字, 是不是喜欢, 看来在这件事情上我在乎的, 是我自己的感受, 仅仅是我自己的.

那些以自我为中心的潜意识理念是需要在这个学习过程中剔除的, 舍弃与得到, 代价一致, 但结局会完全不同.

自省是靠近目标的第一步.

++好孩子珊瑚++

Share/Bookmark]]> http://corababy.net/tech/2009/08/13/%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0ucd%e7%81%ab%e8%8a%b1%e9%9b%86-%e4%ba%ba%e7%89%a9%e8%a7%92%e8%89%b2%e8%ae%be%e8%ae%a1/feed/ 0 How to access remote mysql database in local phpmyadmin http://corababy.net/tech/2009/08/08/how-to-access-remote-mysql-database-in-local-phpmyadmin/ http://corababy.net/tech/2009/08/08/how-to-access-remote-mysql-database-in-local-phpmyadmin/#comments Fri, 07 Aug 2009 17:04:35 +0000 little fox http://corababy.net/tech/?p=37 I used wamp, so the path is base on the installing path of wamp application.

Go to
[your wamp root path, something like D:\wamp]\apps\phpmyadmin[version id, something like 2.11.6]\config.inc.php
example:

D:\wamp\apps\phpmyadmin2.11.6\config.inc.php

After each $i++, admin can add a new remote database server for local access.

I guess normally we keep the first one for localhost database.

++Cora++

Share/Bookmark]]> http://corababy.net/tech/2009/08/08/how-to-access-remote-mysql-database-in-local-phpmyadmin/feed/ 0 Using jquery to set default value of input box http://corababy.net/tech/2009/08/07/using-jquery-to-set-default-value-of-input-box/ http://corababy.net/tech/2009/08/07/using-jquery-to-set-default-value-of-input-box/#comments Fri, 07 Aug 2009 15:56:00 +0000 little fox http://corababy.net/tech/?p=29 Well, there are couples of tutorials online to teach us, and also lots of jquery plugin for it. But I feel like I don’t need that huge functionality for this tiny thing.

So I wrote this one which is just for the little functionality.

Feature:

# default value in input box after page loaded

# on focus,

if -> input nothing -> clear to blank,

else -> keep the previous input value.

# on blur,

if -> input nothing -> back to default value,

else -> keep the previous input value.

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
45
46
47
48
49
50
51
52
53

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>default value for text field</title>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  </head>
  <body>
 
  <input type="text" id="inputTxt" defaultval="你在想什么..." />
  <input type="button" id="submitBtn" value="提交" />
 
  </body>
  <script>
  $(document).ready(function(){
      var defaulval = $("#inputTxt").attr("defaultval");
      var checkInputVal;
      $("#inputTxt").focus(function(){
        checkInputAval = checkInput("#inputTxt", defaulval);
        if (checkInputAval) {
          setToEmpty("#inputTxt");
          $(this).css("color","#000");
        }
      });
 
      $("#inputTxt").blur(function(){
        checkInputAval = checkInput("#inputTxt", defaulval);
        if (checkInputAval) {
          setToDefault("#inputTxt", defaulval);
        }
      });
 
      setToDefault("#inputTxt", defaulval);
  });
  function setToDefault(element, defaulval) {
    $(element).val(defaulval);
    $(element).css("color","#ccc");
  }
  function setToEmpty(element) {
    $(element).val("");
  }
  function checkInput(element, defaulval) {
    if ($.trim($(element).val()).length == 0) {
        return true;
    }
    if ($.trim($(element).val()) == defaulval) {
        return true;
    }
    return false;
  }
  </script>
 
</html>

Feel free to let me know if you find some bugs or would like to give some suggestion. :]

It’s Cora’s pleasure to get information from all you guys.

++Cora++

Share/Bookmark]]> http://corababy.net/tech/2009/08/07/using-jquery-to-set-default-value-of-input-box/feed/ 1 在wamp下利用httpd-vhosts.conf设置multiple domain http://corababy.net/tech/2009/08/07/%e5%9c%a8wamp%e4%b8%8b%e5%88%a9%e7%94%a8httpd-vhosts-conf%e8%ae%be%e7%bd%aemultiple-domain/ http://corababy.net/tech/2009/08/07/%e5%9c%a8wamp%e4%b8%8b%e5%88%a9%e7%94%a8httpd-vhosts-conf%e8%ae%be%e7%bd%aemultiple-domain/#comments Thu, 06 Aug 2009 23:59:21 +0000 little fox http://corababy.net/tech/?p=21 在网路上找到很多文字来教大家设置multiple domain, 很多都是在httpd.conf里面实现的. 但最近的开发一直是利用httpd-vhosts.conf, 却一直郁闷在无法设置multiple domain的问题上.
问过X老师之后, 几分钟搞定=.=b, 这家伙一眼就指出了我滴错误…万恶的粗心大意啊.

所以利用httpd-vhosts.conf其实没有想象中那么纠结.

1)httpd-vhosts.conf文件的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<Directory D:/Wamp2/www>
Order Deny,Allow
Allow from all
Options All
AllowOverride All
</Directory>
 
<VirtualHost *:80>
    ServerAdmin cora@cora.subsite1.com
    DocumentRoot "D:/Wamp2/www/sub1"
    ServerName cora.subsite1.com
</VirtualHost>
 
<VirtualHost *:80>
    ServerAdmin cora@cora.subsite1.com
    DocumentRoot "D:/Wamp2/www/sub2"
    ServerName cora.subsite2.com
</VirtualHost>

2)在apache的httpd.conf设置

在httpd.conf里面, 一定要uncomment

1
2

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

其他都不需要修改, 尤其是documentroot, 如果是在用wamp, 就默认为[FilePath]/www

3)hosts老师

另外, 在 hosts 里面要记得加入子域名的指向IP

1
2

127.0.0.1       cora.subsite1.com
127.0.0.1       cora.subsite2.com

4)什么是conf文件呢?

熊熊说, conf文件就是xml. 其实也不完全是, xml是conf文件的一种流行的格式.

conf常常用ASCII编码, 也有少部分用UTF-8的. 怪不得conf文件默认打开的程序总是notepad涅.

WIKI上时绛紫解释的: http://en.wikipedia.org/wiki/Configuration_file

++好孩子珊瑚++

Share/Bookmark]]> http://corababy.net/tech/2009/08/07/%e5%9c%a8wamp%e4%b8%8b%e5%88%a9%e7%94%a8httpd-vhosts-conf%e8%ae%be%e7%bd%aemultiple-domain/feed/ 0 Blog Theme Design Review (1) – Orange Glow http://corababy.net/tech/2009/07/29/blog-theme-design-review-1-orange-glow/ http://corababy.net/tech/2009/07/29/blog-theme-design-review-1-orange-glow/#comments Tue, 28 Jul 2009 17:08:07 +0000 little fox http://corababy.net/tech/?p=12 是第一次对自己的wp theme做回顾, 不太清楚如何能够更加清楚的分析出优点和不足, 先从最早的一个有bakup的设计开始.

orange glow

Little Fox’s Candy Castle_1246200818076

{COLOR SCHEMA}

#FD9945|#60555D|#F5E2B8|#E6AA75|#98B88E

colorschema

{GRID}

# 1 column

# main section:

#1 header: top main navigation and search

#2 blog logo

#3 main content: post

#4 widgets: google friends connect and feed icon

#5 footer

{FEATURES}

#top main navigation, 还算是比较清楚的一份导航, 内容链接(“About”, “Works”…)和功能性链接(“Log in”)分在导航条的两端.

#search, 不记得从什么时候开始, 喜欢把search form放在相对明显的位置, 也许是对自己博客的导航没有信心, 也许是担心这个没有category list/tag cloud的小站给到访的客人带来了很多不方便, 所以才那样做的吧.

#others, 亦如平常.

{WANT TO SAY}

#颜色

记得Stephen说, 颜色是设计的重要因素之一, 明快的颜色会使阅读的人们内心闪亮起来, 或者说, 不同的颜色会带给阅读的人截然不同的感受, 好的和不好的心情及体验.

从根本上来讲是同意的, 但颜色的作用应该还有很多.

颜色是设计者性情的一种体现, 沉静, 火爆, 奔放, 桀骜, 还是寂寥. 所以即使阅读者会甄别设计的内容是否值得继续花费时间在上面, 但是, 对颜色第一印象的好感还是能够为接下来的甄别加不少的分.

颜色可以创造一致性. 所有的链接是蓝色, 所有的文字是深灰色, 所有的日期是浅灰色, 所有的错误信息室红色… 这个是不是所谓的用户使用惯性呢?

#细节

自己理解的细节是那些不会被察觉, 但是当它们和用户相遇的时候, 用户为之会心一笑的闪光点.

比如, mouse hover的颜色改变, 亮度变化, 以及细致的渲染.

比如, title的小装饰.

比如, image的淡色边框.

比如, 圆角.

我想, 在设计这个theme的时候还是个懒惰的人吧, 没有等到考虑加入细节就匆忙的launch, 其实会在后来的几份设计中发觉, 细节成为那样不可或缺和重要的一员.

有些超出了review的范围, 讲了些不着边际的话, 那么, 继续加油.

++好孩子珊瑚++

Share/Bookmark]]> http://corababy.net/tech/2009/07/29/blog-theme-design-review-1-orange-glow/feed/ 1 关于split(), 那些被我们遗忘的 http://corababy.net/tech/2009/07/27/%e5%85%b3%e4%ba%8esplit-%e9%82%a3%e4%ba%9b%e8%a2%ab%e6%88%91%e4%bb%ac%e9%81%97%e5%bf%98%e7%9a%84/ http://corababy.net/tech/2009/07/27/%e5%85%b3%e4%ba%8esplit-%e9%82%a3%e4%ba%9b%e8%a2%ab%e6%88%91%e4%bb%ac%e9%81%97%e5%bf%98%e7%9a%84/#comments Mon, 27 Jul 2009 14:38:40 +0000 little fox http://corababy.net/tech/?p=6 widget title on the right

为”Little fox is learning”写皮肤的时候, 在widget title文字竖排的问题上还真的是耗费了很多精神在里面.

其实, 网路上有很多老师讲解关于如何对文字进行竖排版的方法, 但是, 大部分是针对于中文, 为了解决古代诗词排版的难题, 可是, 对英文来讲, 似乎找不到太过对症的办法, 所以还是自己摸索着写了.

本质上需要解决的问题仅仅是, 如何将字符串转化为数组, 前提是没有任何可以供分割的字符, 比如”;”, 或者”,”.

开始的时候是这样写的:

var i,strCount, tempStr;
tempStr = '';
strCount = inputStr.length;
for (i = 0; i &lt; strCount; i ++) {
  tempStr += inputStr[i] + '&amp;nbsp;';
}
document.write(tempStr);

这样写会错么? 会, 也不会.

当然, firefox, chrome, safari, opera, IE8 都是会通过的, 但是, IE6, 7 却不能够保证.

因为当用compatible view查看的时候发现, 所有的”inputStr[i]“都是”undefined”.

IE6, 7是无法识别一个字符串作为数组使用么?

也许是.

所以才惊奇的发现了split()的被遗忘掉的功用性.

strCount = inputStr.length;
tempStr ='';
strArray = str.split('');
for (i=0; i&lt; strCount ; i++) {
  tempStr += strArray[i] +  '&amp;nbsp;';
}

这样的方式在IE6,7下也是被通过的, 看来, IE6,7对于js object的要求应该算是苛刻的么?

如果你知道其中原因就告诉我吧.

++好孩子珊瑚++

Share/Bookmark]]> http://corababy.net/tech/2009/07/27/%e5%85%b3%e4%ba%8esplit-%e9%82%a3%e4%ba%9b%e8%a2%ab%e6%88%91%e4%bb%ac%e9%81%97%e5%bf%98%e7%9a%84/feed/ 0