【梦里飞花寻梦船】

[原]Tradetuber网站分析报告

alexpengster — Sun, 29 Mar 2009 23:15:00 +0800

中国01年加入WTO之后，对外贸易得以井喷式发展，外贸B2B电子商务市场规模也以几何级数暴涨，各类外贸B2B网站如雨后春笋般涌现。然而08下半年由美国次贷问题引发的国际金融危机横扫全球经济，深刻影响中国经济，特别是外向型企业：沿海出口型企业、制造业所受的冲击最为严重，在珠三角长三角出口贸易频繁地区，不断有各种企业破产的消息流传。一时之间，在这些地区，中小企业陷入风声鹤唳，四面楚歌的境地。作为与外贸中小企唇亡齿寒的外贸B2B网站，同样感受到了泌人心骨的寒冷：近几个月，相继传出沱沱网，慧聪宁波倒闭的消息，倒下的小B2B平台更是不计其数。在这股凛冽的寒流中，作为第二梯队的tradetuber该如何苦练内功，并在新一轮的洗牌中脱颖而出，是值得万商人认真、深入思考的问题。

竞争对手分析：

大型综合外贸B2B平台

互联网是一个赢者通吃的行业，中国的情况更为严重，传媒造就了阿里巴巴和马云神话。作为B2b的前三甲，阿里巴巴占到B2B市场营收份额总额的53.6%，而环球资源占10.4%的市场份额，中国制造网则占7.0%，前三家运营商的所占比重已达71%。这些垄断寡头企业呈现以下特点：

优点：　　

a、强劲的资本实力，使平台有角逐国际市场的砝码；

　　b、超大流量和强大的客户基础形成平台“马太效应”；

c 、品牌效应、人力资源储备加上资本实力，可以迅速转战国内市场。

缺点：

a. 年费高企，在经济危机当下，几万乃至十几万的高额年费对很多企业是笔不菲的开支；

b. 针对性差，平台大了，企业多了，对于每个企业的针对性服务肯定较差；

c. 人力资源成本高，在过冬的时候，较低的运营资金水准，很难维持如此庞大的团队。

d. 平台内同行业企业相互倾轧压价的情况非常严重，很多外商的询盘，只是为了探知底价；很多企业原来对大平台已经心存不满，危机是否增加了他们的离心力？

垂直专业B2B平台

　　优点：

　　a、专：集中全部力量打造专业性信息平台，包括以行业为特色或以国际服务为特色；

b、深：此类平台具备独特的专业性质，在不断探索中将会产生许多深入且独具特色的服务内容与盈利模式。

缺点：

a. 路子不宽，在经济危机当下，市场份额集体严重萎缩之后，更难以形成规模效益，能否维持正常运营成了许多垂直平台的首要问题；

b. 转型困难，垂直平台专注于某个领域的外贸市场，一旦这块蛋糕萎缩，转型对于他们来说，几乎成了不可能完成的任务；

众多中小B2B,B2C平台

优点：

a. 运营成本低廉，很多小平台甚至是几台电脑，几个人，一间小办公室就搞起来了。

b. 针对性强，很多平台深挖掘一个地区，一个行业。积累了深厚的人脉资源，能及时了解到客户的真实需求，并相应作出改进；

c. 服务费用低廉，在经济危机当前，很多企业会更多考虑到性价比，去做效果不错，但是服务费用相对大平台低廉得多的小平台；

缺点：

a. 没有明晰的盈利模式，很多企业只是跟风搞起一个外贸电子商务平台，行情好的时候市场或许能够保证他们的生存，甚至活的小有滋味，市道一变，他们的生存空间就几乎为零。

b. 没有好的运营及技术支撑，很多中小平台是一些外贸企业看到里面的商机大，花个几万块甚至买个B2B模板就这样搞起来的，他们根本谈不上有什么后续技术支撑。很多中型B2B企业也是思维陈旧，技术和推广根本上不去。

c. 缺乏穷则思变的能力和魄力，或者说危机意识。习惯了一种活法的他们要改变，真的很难；

d. 缺乏资金和实力，无法把蛋糕慢慢做大；

但是以上都不能一概而论，很多外贸B2B平台其实做得已经非常不错了，在这块竞争激烈的焦土战中，各类优秀的平台团队都有所动作，有些已经走在了前面，积蓄了趟过危机走向下一步成功的能量。

Tradetuber的优势和缺点：

营销和运营方面：

a. 作为一家中小综合外贸B2B平台，重要的是有灵活思维和超前意识的领袖；

b. 平台有自己的独特的营销模式：

1. 逆向（客户端而不是供应商端）平台，目前运营tradetuber的万商联盟是以欧洲商脉天下子公司身份做推广。这样，在中国外贸企业中的形象与全部的中国其它的B2B平台区别开来。中国的B2B更了解中国的供应商，但是欧美中东当地的优秀B2B网站肯定更了解当地的客户。或许是中国供应商对中国的B2B企业太熟悉，或者对中国B2B企业有太多不满意的地方。对于很多企业来说，或许同样来自欧美的B2B企业应该更了解欧美市场和欧美客户。

2. 分大区域营销策略，http://www.traderinchina.com/的主页就传达了一个鲜明的信号：三大块，美洲市场，欧洲市场，中东市场都是由当地优秀的B2B网站来运作，万商联盟是他们在中国区的优秀和紧密合作伙伴。在供应商眼里，市场细分了，网站更具针对性，也更具客商人脉和客商真实需求的了解。

3. 同样是三大块市场，一份生意可以做成三份了，也给供应商更多选择的余地。

4. 因为是以欧美B2B平台的身份出现，也避免了与国内中小B2B企业在服务价格上直接倾轧的情况。最大程度上避免价格战，争取更多的盈利空间。

5. B2b网站集群效应，交叉规模总是以乘法的方式增加影响力。

6. 华人圈和traderinchina完全是针对供应商的推广网站。这几个网站的良好运营，并且像华人圈论坛式的还提供外贸营销技巧等的交流，口碑效应和润物细无声的营销方式比简单的广告和直接营销在回报率上要有效的多，也更具粘性。

技术和网络推广方面：

毕竟不可能像阿里巴巴，环球资源那样大手笔在广告推广上挥霍。并且可以在全国的传统媒体大做文章，还有众多的传媒资源来利用。万商联盟在推广上更应该重实效性和性价比，更注重苦练网站内功。下面是我对网站本身的测试分析：

1. 网站的用户体验分析:

网站可用性（用户体验）分析，主要关注用户与网站交互过程中的可测量的特性。四个关键指标分别为“价值”、“导航性”、“表现”、“可信任程度”。

根据我对网站的一些简单的分析发现：

（1）网站运行速度还不错，首页第一屏全部显示不足1秒，全部服务和请求加载完毕9.76秒，因为是在后台运行，用户基本感觉不到这个时间；forbuyer页面设计加载稍有问题，第一屏右边栏加载较慢，差不多要1.5秒到2秒。后台全部加载需要时间很长，虽然用户不能明显地感觉到，但是肯定会影响用户跳转时的操作。产品列表的加载速度还在可接受的范围，但是多少还是显慢（更大问题是服务器在中国，对于欧美和中东用户来说，是不是更慢？服务器经费考量？）

（2）网站的版式设计属于B2B网站的最经典样式。中外用户感觉都非常熟悉和习惯。“don’t make me think”网站重要的是让访问者把全部的精力放在网站提供的服务，而不是花时间思考网站的使用上。

（3）作为访问者的我，在浏览网站的每一页的时候，都在问自己四个问题：我在什么位置？我该从哪里开始？他们把XX放在了什么地方?这个页面上最重要的是什么？为什么网站建设者给它取这个名字？在我的web设计检查清单中，tradetuber表现算是不错（请问这个网站是否也是用的模板？）

（4）网站首页右侧第一个模块中Today New的设计非常有特色，增加了网站的人气感和用户的参与性，让用户也更信任这是一个更大的或者发展迅速的网站。

（5）最重要的信息都在每一页的第一屏可以看到，最大程度上不让用户错失重要的操作。

（6） UE界的人都非常清楚的一个原理就是用户页面扫描方式。用户绝对没有兴趣去看网站上的每一个字，每一个细节。用户关注是如何在最快的时间找到他想要的。从这个角度来说，网站设计的也非常不错，页面传达的重要和次要信息表达很清楚，视觉噪音很少。

（7）网站各个元素的设计还是符合用户界面语言的设计的，不错！

瑕疵和可以优化的地方：

a. 首要问题是标签搜索框栏的设计。这个问题比较严重（网站以前的用户可能已经习惯了）。用户的一般经验，点击”home””for buyers””for sellers””product””my tuber”应该只是换标签，而不是换页，但是事实上就是换页了，这不符合用户的预计期望；

b. 这又带来了第二个问题，在“for buyers”和”for sellers”等各个标签页输入搜索条件搜索结果是一样吗？经试验是完全一样的，那从逻辑上来说就说不通了，因为从“for buyers”去搜索，应该理解为搜索结果为本站的供应商端提供的产品，而从“for sellers”去搜索应该是为买家想要的商品，一个是供方，一个需方，怎么搜索结果能是一样呢？

c. 搜索栏后面的”powerd by google”当然可以看出网站设计者重视知识产权，但是从另外一个角度讲，放在那个位置，powerd by这两个单词折行了，google又是一个图片logo.这样的可读性比较差，容易变成视觉噪音。

d. 搜索框后的button是“ok”合适呢，还是考虑改成“go”？（我的外语不是很好，但是，我想go应该更侧重与将来进行时，而ok容易理解为过去式）或者干脆把前面的”search”单词，做成button放在这里，这样是不是更符合用户的使用习惯。

e. 作为B2B的一个灵魂---主搜索功能，用户需要在输入关键词后，连续点选两次下拉框，会不会太麻烦？这个问题跟搜索框和标签页设置问题是一脉相承。解决了上面的问题，这个问题也迎刃而解了。

f. 首页把“Hot Product ”放在“Browse Categories”有待商榷，如果第一屏看到，放在最底下，还能是热门产品吗？

g. 把service supervision和my question做成两张图片放在“Service Center”，而且放在页面的最下方，是否也有待商榷？作为客户服务是一个B2B网站重中之重的工作，放在那么下面，而且因为是两张，如果不主动把鼠标放上去，压根不知道这可不可以点击，会不会让用户感觉这个网站不重用户的服务？

h. For buyer和for seller页面“Browse Leads by Category”栏目内容过多，直接一条条展示出来，是不是让很多产品分类就拉到很下面的位置了，可否做成标签式的分类名字，然后把子类名称简化精炼，让用户更清楚明了，不会像现在这样找起来感觉麻烦，还要拖上拖下？

i. 产品列表页的上面这块（如上附图）设计有些问题。Select加一个checkbox标签to”contact now”or”add to basket”从语法上来说，没有问题，但是表达方式容易误解，其实原意是说如果下面产品列表前面的checkbox标签被选择的，你可以选择现在去联系或者增加到购物栏，但是在这里很容易让别人误以为点选这一行的checkbox标签（事实上这里还是个真实的checkbox标签，更容易让用户误操作），其实完全可以不用画蛇添足地加上这个checkbox标签，表达的更清楚，用户因为完全熟悉这些操作。

j. 如上附图，右边的页码导航，可以设计得更人性化，举例：符合条件的产品有一千个页，然后也标上一千个页码不成？可以设计成有“first””last””previous””next”再加上5个或者10个页码，当然如果预计搜索结果非常多的话，还可以加上一个input输入框，让用户自己输入页码。

k. 另外，在产品列表页我觉得可以添加“Related Searches“模块和“Browse by Category”模板，这样用户体验将会更好。

l. 整站的路径导航应该可以设计得更好，现在虽然也有路径导航，但是我的感觉，基本没有起到真正导航的效果。

m. 首页的“Success Story”栏目，从推广角度，我觉得不错（当然要是把他做起来了的话），是否考虑把它有针对性地放在”buyers”和“sellers”的右边。

n. 每个页面footer位置的“Browse By Keywords”按字母顺序列了26个，我觉得放在最下面，且还是按字母近期，还要细查，这貌似不符合关键字搜索的习惯吧？难道基于SEO的考量？

关于可用性我暂且提出上面的一些问题，肯定还有一些用户体验的障碍等待发现。

2. 视觉设计分析:

关于视觉设计这块，本来是我的专业出身，体会会更多。但是从目前来说，第一，目前设计的还不错（冒昧问句，是不是模板？），版式大众且可靠，色彩搭配准确，舒服。第二，界面设计比较符合B2B网站的界面工程标准语言。虽然有细节问题和整体风格的考量，但是我觉得目前的在视觉上的精益求精从投资回报率和工作的紧迫性上说不是排在第一位的，所以，就不多说了。

3. 内容策划分析

这一块同样是要考虑到需配合网站整体运营构思，无法断章取义。暂且按下不表。

4. 网络推广分析：

前面说过了，我们没有办法像阿里巴巴那样大手笔推广。所以，只能采用性价比更高的推广方式了。

a. 目前万商采用我前面说过的以欧洲B2B子公司的方式包装营销推广，真的是非常巧妙的一招。

b. 以美洲，欧洲，中东这样的细分市场推广也是令人耳目一新，符合外贸企业的期待。

c. 欧洲黄页是采用传统黄页网络搜索化模式，是目前网络搜索中非常重要的一个分支，黄页在传统营销中积累了深厚的人脉和众多固定客户群。结合欧洲黄页同样是在增加万商联盟在买方市场的强大和多样化的实力。

d. 以华人圈论坛的方式曲线营销，积聚人脉，利用口碑效益增强在供应商端的影响力也是非常不错的选择。

我想以上几点是你们传统的电话营销中跟客户着重强调的吧，从这几个方面可以看出万商联盟的经营者确实创意独特，棋高一着了。下面我想重点从网络推广方面说说我对这个网站的看法：

供应商端：

a. 电子邮件营销：因为没有办法验证，所以，我不清楚你们具体操作的方式方法和效果；但是从我目前注册之后的邮件观察，你们这一块好像没有太着力。

b. 论坛，贴吧：这块我在主流的百度和谷歌上用“tradetuber“搜索，百度1100项结果，google47100项相关结果。除开招聘信息（不知招聘信息也是你们考虑的网络推广的一个方面？）主要有在百度知道，贴吧，天涯杂谈，雅虎知识堂等等，主要主题是比如”免费为供应商做SEO优化“，”问大家网站使用效果如何“等等，目前来看，效果应该不会太好，一，推广选题不精细，不专业。回复也少，甚至有负面回复，对于负面回复，你们暂时没有处理手段。我在http://hi.baidu.com/tradetuber/blog/item/5132d409cab754226a60fb6d.html看到说是请兼职推广员，看来这个效果不太好。

c. 博客推广：看来博客推广是用的比较多的策略，但是目前看来，同样是文章缺少，广告意图明显，软文质量偏差，选题不精细，没有组合拳。所以，效果想也不是太好。

d. Im即时通信推广：呵呵，暂时我没有办法验证，所以不清楚你们如何做。

e. Web2.0推广：没有看到，威客任务？这个好像不是目标客户吧？

f. 数据库营销：网站注册好像没有需要填写客户资料（普通注册用户），网站也没有看出其它的需要客户资料的输入，我想，你们主要还是通过电话营销的方式积累客户吧？

g. 资源合作推广：暂时没有发现

h. 病毒性营销：没有发现，没有办法验证

i. 网址站推广：粗粗简单查询了下，好像没有发现有网址站收录。

j. 反向连接：这个相对比较多，百度反向连接：50；谷歌：264。雅虎反向最多了：3644。

接下来说说网站本身（侧重客户端）的推广：

说白了，一句话，网站本身的推广就是seo。从目前来看，万商联盟还是希望在这一块上着力的。但是效果如何呢？

下面是网站的一些详细信息：

Alexa排名：182,633

在09年2月10左右和3月10号左右突然飙升到87000多，现在降到182633这么短时间内的急促升降，貌似有非正常因素的操作在其中，是SEO本身的考量，还是商务上的考量？

从用户来源来看：中国95.6% 印度1.0% 美国0.3% 荷兰0.4% 台湾省0.2%西班牙0.1% 香港0.1% 波兰0.1%；其它：15.9%；从一个B2B平台的角度来说，这个比例应该比较畸形。当然，alexa数据是相对于有安装他工具条的用户，所以仅供参考！从域名来说，这个网站创建于07年10月，是在新网注册(当然有可能是新网的代理商)的。服务器IP地址显示在深圳市。

目前网站的google pr值为5；google索引了41500，反向链接263。Yahoo没有索引，yahoo反向链接7969；MSN索引21900，反向链接7969；当然百度我们暂且可以不管。

从首页和主要的页面看，网站并没有有针对性做SEO，没有看出重点推出的关键词是什么。我换位思考了一下（结合网络上的部分软文），万商联盟可能打算没有做网站本身的SEO，是打算把战略重点放做二级页面的供应商的优化？我找主页上urgent buy的卖沥青的http://www.tradetuber.com/B123263/buy-188230/Bitumen_80/100.htm

关键词肯定是bitumen或bitumen80。Bitumen80的结果好像还不错。感觉这种思路还是不错，但是如果是热门商品呢？二级甚至是三级页面做的难度是不是太大了些？当然目前SEO方面显然还没有发力！

关于SEO，目前来说，看的出来，网站基本上没有发力（至于有些软文上说的一些关键词，那些也太不能算吧，点击量太小了），所以也就没有办法评头论足了。我也无需在这里卖弄我的SEO能力了。但是很欣慰的是万商意识到这一点，也准备去做，那是成功的开始！

总之，一句话，经济寒冬就是企业的“试金石”，真的假不了，假得也真不了。以前靠某种经济热潮飘飞起来的终究要跌落下去，环境一变一试有的企业被淘汰。而B2B电子商务其实受环境影响如果有也是暂时的，从长远看一定会越做越大，经过这场洗礼，B2B电子商务的前景会更加明朗。

附网文一段：为什么您的外贸企业更要在经济危机中做B2B推广？

如果你想在现在经济危机的时刻下，积极应对市场，积极采取措施击败竞争对手，那么B2B对你来说是很有用的！

理由一：现在大环境不好，不是你做好了就有单，而是你做的比别人好才有单
理由二：经济危机下买家还是需要采购，你不做推广，买家怎么看到你
理由三：买家现在采购更下谨慎，如果你没有足够的曝光度，你的优势独特卖点买家是不知道的，这样你和对手竞争没有优势
理由四：你的公司不会因为经济危机而倒闭，你必须经营，那么订单就一定要多
理由五：经济危机了你就没钱了吗？

作者：alexpengster 发表于2009-3-29 23:15:00 原文链接

阅读：675 评论：0 查看评论

[原]OKBIG网站分析报告

alexpengster — Sun, 29 Mar 2009 23:11:00 +0800

网站要好用，必须要考虑使用性：Usability
网站要好看，必须讲究视觉效果：Visibility

【 Logo设计】

在网站设计中logo的设计是不可缺少的一个重要环节。logo是网站特色和内涵的集中体现,它作用于传递网站的定位和经营理念、同时便于人们识别。Okbig网站采用域名的英文字母与如意购中文组合的表现形式。黑黄搭配，对比鲜明，色彩醒目。这种手法直接、明确、一目了然，易于迅速理解和记忆。

改进的地方：

1. 黑色跟黄色色块力量过于均衡，无法区分哪个是主色，哪个是强调色彩。

2. Logo形象表现不整体，ok、big和如意购区分成了三块，相对独立，三块之间缺乏连接元素，有脱节之感。

3. 传达内容过多，一个网站的名称和logo，应该是简单明确。Okbig,如意购，和国际时尚网络商城哪一个都可以是一个非常不错的网站名称，但是三个一起，给用户传达的信息过多，反而让用户感觉混乱。

4. Logo与版面色调既要统一又要显眼。快速扫一眼画面，能迅速找出,现在与画面的其它元素色彩过于一致，不太醒目。

Welcome欢迎文字栏

【版面布局】　

其它栏目

网站采用B2C网站的经典排版处理，符合用户的使用习惯，用户能够很方便地找到网站的核心内容和核心功能。网站采用980px的宽版设计，页面可以承载更多的内容。但是800*600显示器用户同时面对横向和纵向的滚动条，浏览会相对吃力。商品的详细内容信息页面用户体验很好，不仅可以看大图，而且可以从不同的角度看，还可以查看各个细节。Select,input,button的使用符合图形用户界面的设计标准。

可以优化的地方：

1. B2C网站最典型的做法，是把页面最上面的一行设计成用户帐户信息栏，而不仅仅是欢迎区域。我的建议也是把我的账号，购物袋和我的愿望等用户信息放在最上面。这样最符合用户的使用习惯和购物体验。而且用户的角色感更强，便于用户的个人账号信息管理。

2. Logo右边的特色服务导航数量尽量精简，并且做成更接近按钮的样式，设计的稍微小一点。因为在大多数用户的1024显示器，网站是满屏显示，把这部分设计更精炼，头部看起来不会设计过度，觉得内容过多感觉压抑。

3. 菜单栏与搜索框栏目前都是黑色背景，其实这是两块相对独立的功能区域，所以，是否在色彩上有所区别，让用户更方便快捷找到想要的东西。

4. 主要内容区域左侧用iframe来显示主要的品牌列表。一来对搜索引擎不友好，二来目前品牌列表都是用12px小宋体显示，在深灰色背景下，可读性较差，分类感觉不好。

5. 首页导购flash和二级页面的banner图片或flash是否太大？如果是图片翻转flash,是否考虑从xml导入图片的方式？大的导购图和banner图不仅增加了服务器的压力，让页面下载更慢，更重要的是让用户没有办法在第一屏看到他们想要的东西（这主要是指商品列表页面）。

【色彩运用】　

需要优化的地方：

1. 网页设计的终极目的是为让网站表达更清晰，用户更易用，而不是简单追求网站设计本身的效果。很多地方，色彩的运用与功能区域的划分脱节甚至矛盾。

2. 网站有大量的展示图片，而这些图片暂时跟页面整体色彩搭配的配合较少。比如首页，大的flash导购图翻转，打乱了整个页面的色彩配合。让整个画面色彩处处抢眼。

3. 在在超过1024以上的显示器中，网站暗红色纹样图案灰色背景，在搭配上不仅没有为页面加分，而且分散了用户的注意力，使画面显脏。而且在页面中也用了与背景明度相近的灰色，灰色背景并没有起到把内容区域压出来的作用。

4． Logo旁边的导航图片有些优化过度，像素质量太低，噪点过多，影响了真个画面的品质感。

5．各个频道使用了不同的色调，这让网站色彩丰富了，但是没有统一整个网站的设计元素较弱，网站设计的整体感会差一些。

Okbig网站目前的整体设计风格还是两年前的主流风格，作为时尚领域的B2C网站，紧跟潮流的网站设计风格应该是迎合浏览者和消费者的一个重要保证。让浏览者保持新鲜时尚，愉悦轻松的浏览体验，这也是以用户为中心的重要体现。

【文字图片】　

可以优化的地方：

1 网站上的链接文字，按钮文字，各级标题文字，文档文字，提示信息文字没有清晰统一的标准。很多文字分不清是强调文字还是标题文字，不知道是可以点击的还是不能点击的。单纯从视觉上无法看出，经常需要用户用鼠标试试才知道，这个是比较影响用户体验的。

2 搜索框前面的链接文字，如果不仔细想，很容易误解成热门搜索关键字，这是很多电子商务网站的做法。

3 搜索按钮后面的“高级搜索”应该是一个链接而不是按钮，按钮是要表单提交的，把“高级搜索”放在一个搜索框后面，用户会很自然地误以为是在搜索框里输入搜索关键字，然后按“高级搜索”会响应请求，提交表单。这样的设计违反图形用户界面的设计标准。

4 网站导航图片，导购flash图片优化过度，影响网站品质感。另外一些图片却还有很大的优化空间。图片优化的标准是在不影响图片品质基础上最大程度优化。

界面设计的一致性，主要体现在三个方面：隐喻产生的效果、系统的输入输出之间的关系，界面的外观和视觉效果。研究表明，增强界面一致性有利于提高用户操作的绩效和满意度，同时还可以减少操作错误。

作者：alexpengster 发表于2009-3-29 23:11:00 原文链接

阅读：200 评论：0 查看评论

[原]goodscool网站优化方案

alexpengster — Sun, 29 Mar 2009 23:08:00 +0800

网站现状：

Google PR:2; google index:508;

google link:10；

yahoo index:28600;

yahoo link:110;

msn index:413;

msn link:54;

age:2007.11.03;

首页现有主要关键词流量分析：

Google.com的表现：

wholesale China electronics

排名：5 2月关键词搜索量：1900 关注度到达约数：60% 到达点击约数：1140

mp4 player wholesale

排名：3 2月关键词搜索量：390 关注度到达约数：100% 到达点击约数：390

mp4 player camera

排名：5 2月关键词搜索量：590 关注度到达约数：60% 网站到达约354

wholesale mp4

排名：5 2月关键词搜索量：590 关注度到达约数：60% 到达点击约数：354

china wholesale electronics

排名：8; 2月关键词搜索量：880 关注度到达约数：20% 到达点击约数：260

Mp4 players wholesale

排名：6 2月关键词搜索量：260 关注度到达约数：50% 到达点击约数：130

wholesale electronics china

排名：9 2月关键词搜索量：320 关注度到达约数：20% 网站到达约数：100

China wholesale

排名：37 2月关键词搜索量：3600 关注度到达约数：3% 网站到达约数：100

electronics-China

排名：10 2月关键词搜索量：320 关注度到达约数：20% 网站到达约64

electronics China 15 约到达：10个

小计：从 google.com入口的首页到达每日流量约数：>110；

Yahoo.com表现（趋势指数）：

china wholesale electronics 词群（also try 列表词群）排名：1-8 单月趋势搜索总量约数：6840

关注度到达约数70% 网站到达约：4788；

小计：从yahoo.com入口的首页到达每日流量约数：>160；

主要搜索到达：

http://www.goodscool.com/china-wholesale/MP5-Players

google入口：

mp5 players

排名：2 2月关键词搜索量：1300 关注度到达约数：100% 到达点击约数：1300

mp5 player

排名：2 2月关键词搜索量：6600 关注度到达约数：100% 到达点击约数：6600

小计：从 google.com入口的到达mp5 player每日页面流量约数：>260；

从 yahoo.com入口的到达mp5 player每日页面流量约数：<10；

http://www.goodscool.com/china-wholesale/MP4-Players

google入口：

mp4 player with camera

排名：6 2月关键词搜索量：1000 关注度到达约数：50% 到达点击约数：500

小计：从google.com入口的到达mp4 palyers每日页面流量约为：

相信大部分PV是从首页和其它页面连接过来的。

其余页面流量排名大致由高往低：

http://www.goodscool.com/wholesale-electronics/MP4-Players/2GB-MP4-Player/

http://www.goodscool.com/wholesale-electronics/MP4-Players/Large-Capacity-MP4-Player/

http://www.goodscool.com/wholesale-electronics/MP4-Players/Car-MP4-Player/

http://www.goodscool.com/china-wholesale/Mobile-Phones/

http://www.goodscool.com/china-wholesale/Car-DVD-Players/

http://www.goodscool.com/china-wholesale/Car-Video/

http://www.goodscool.com/wholesale-electronics/Digital-Cameras/SONY-Cameras/

http://www.goodscool.com/china-wholesale/MP3-MP4-Watch-Players/

http://www.goodscool.com/wholesale-electronics/Electronic-Accessories/Earphones/

http://www.goodscool.com/wholesale-electronics/Electronic-Accessories/USB-Cables/

以下产品页的流量相对上面更低：

http://www.goodscool.com/china-wholesale-electronics-help/

http://www.goodscool.com/wholesale-electronics/MP5-Players/1GB-MP5-Player/

http://www.goodscool.com/wholesale-electronics/MP5-Players/2GB-MP5-Player/

http://www.goodscool.com/wholesale-electronics/MP5-Players/4GB-MP5-Player/

http://www.goodscool.com/wholesale-electronics/MP5-Players/Large-Capacity-MP5-Player/

http://www.goodscool.com/wholesale-electronics/MP4-Players/1GB-MP4-Player/

http://www.goodscool.com/wholesale-electronics/MP4-Players/4GB-MP4-Player/

http://www.goodscool.com/wholesale-electronics/MP4-Players/8GB-MP4-Player/

敌手分析：

http://www.lightinthebox.com/(wholesale electronics 排名：42)

google pr:6;

google index:1380000;

google link:418;

cached:2009.3.8;

msn index:73700;

msn link:50700;

alexa rank:4641;

age:2006.10.23;

----------------------------------------------------

http://www.chinavasion.com/

google pr:5;

google index:2610;

yahoo link:error;

msn index:5910;

alexa rank:9687;

age:2004.8.13;

-----------------------------------------

http://www.tradestead.com/

google pr:3;

google index:3680;

yahoo link:1524;

yahoo linkdumain:3020;

msn index:3380;

age:2004.10.10;

------------------------------------------

http://www.hohotrade.com/ google PR5

www.lightinthebox.com google PR6

www.chinavasion.com google PR5

www.tomtop.com google PR5

www.buysino.com google PR5

还有五，六家经营项目，内容相近的站点。

战术和目标：

对于对手:

主要战术是田忌赛马；竞争激烈的关键词放过最强劲的几个对手，以做到第一页为主要目标，竞争相对不那么激烈的对手，在不影响主关键词的前提下，强力做到前三位；

战术：

流量主抓长尾，稳步提升主关键词，累积尽量多的冷门关键词；

目标：

A级关键词 30%做到前三页（大部分暂时不计较流量）；

B级关键词重点长尾关键词（重点靠长尾做流量，长尾的精选做到流量翻番）

C级关键词冷门关键词拿住一些单个流量不是很大，竞争相对较低

首页目标：

1．稳步提升“wholesale electronics“的排名，目标从35做到前10；

2. 稳住wholesale China electronics 关键词群；

3.重要的是扩展“mp4 player wholesale”等长尾关键词。从长尾挖流量。

。。。

整体优化思路

网站质量层面优化重点：

1．网站内部链接结构的优化；

2．导出链接的质量和相关性优化；

3．网站收录数量的优化；（分析google蜘蛛比yahoo收录少的原因）;

4．页面内容的质量(竞争网站大部分都是用的模板，同质化状况非常严重)

5．一句话，内容为王，增加内容数量，增强内容质量，争取原创文章非常重要。

。。。

网站关键词层面优化重点：

1．对手网站大部分或多或少都了解一些SEO原理，并用在实践中执行最明显的是title标签的关键词堆砌。在这一点上扬长避短很重要，并且避免被搜索引擎惩罚，规矩优化；

2．但是在对页面标签的使用上，正是因为对手大部门用的模板，所以，没有用活比如h,strong等标签，且关键词与页面的相关性上没有细化；

3.加强对图片的关键词优化；

网站的外部链接层面的优化重点：

这一块是重中之重，也是要慎之又慎的地方，主要从如下地方入手：

1、外部链接的锚文字内容
2、网站的外部链接流行度、广泛度
3、网站的外部链接页面内容与关键词的相关性
4、网站在主题相关的网站群中的链接流行度
5、外部链接页面本身的链接流行度
6、外部链接页面的主题性
7、外部链接页面在相关主题的网站社区中的链接流行度
8、网站新外部链接产生的速率
9、链接的年龄
10、链接的周围文字
11、同域名下外部链接页面的链接流行度

因为这次是在我没有拿到详细的统计数据的基础上进行这次优化方案的制定，所以跟实际情况肯定会有比较大的出入。但是我的思路基本是如此。SEO本来就是一个慢工出细活的工作，并且离不开其它职能职位配合。我想一要有心，二要用心，三要动脑，四要冷静，就一定可以把网站做到各个阶段最大程度的优化。

作者：alexpengster 发表于2009-3-29 23:08:00 原文链接

阅读：119 评论：0 查看评论

[原]奇搜商圈交互和前端分析

alexpengster — Sun, 29 Mar 2009 23:04:00 +0800

产品定位：

奇搜商圈是最近新兴起的网络商圈平台之一，是虚拟商圈；是现实中地理商圈理念的延续和发展。现实中商圈是是指商店以其所在地点为中心,沿着一定的方向和距离扩展,吸引顾客的辐射范围。同样的奇搜商圈我暂且理解为以商店（以行业和地区或者是兴趣来分类的群组）为中心的商业性圈子。各个圈子的基本组成单位是空间，可以是个人空间也可以是企业空间。无论是是个人还是企业都可以建立或加入自己感兴趣的圈子（公共圈只能由奇搜网建立）进行讨论、分享、交流，成为朋友和商业伙伴，从而建立及巩固商业人脉，提升商业价值。另外一个重要功能是通过圈子还可以发现潜在需求，树立专业形象，助力自己或公司的事业。（新版的策划案中：展现商务形象，体现更真实价值；提升认可度，提高商业价值，扩大商脉，拓展商机。）

就现在线上版本的奇搜商圈我从交互设计，前台开发，视觉设计三方面具体谈谈我的看法：

浏览速度：

我的机器测试：奇搜商圈首页首次全部请求载入完毕，时间是6.4秒，首屏显示时间在1秒左右。第二次以后打开需用时1.4秒左右。进入各个内页的速度也是非常快，基本感觉不太到等待的时间。所以从浏览速度来说，用户体验还是非常不错。

导航性：

用户可以在头部的主搜索栏输入条件找到想要的空间，商圈和主题（设计上跟百度贴吧类似）。第二种方案是在左侧第二排的高级搜索栏搜索，第三种方案是在首页底部的全部分类栏找到相应的商圈；第四种方案是在地址栏直接输入商圈和空间地址（目前奇搜用长网址，所以采用这种方案的微乎其微可以忽略不计）。总体来说，导航设计都非常为用户考虑。但是也还是有些瑕疵。表现如下：

关键词查找搜索用户：

1．举例用户想找“波导”的企业空间，奇搜首页默认搜索分类是“供应”，输入关键词肯定找不到；默认选项输入关键词后点选商圈，只是进入商圈首页，并没有搜索“波导”这个关键词的空间或商圈，进入商圈之后还要从新输入“波导”关键词，才能找到搜索结果。百度这一点就做的更好，他在首页默认“网页”分类输入关键词之后，点图片等可以直接搜索结果，即使是点选贴吧，虽然也是进入贴吧首页，但是在百度贴吧首页搜索框内保留了用户输入的关键字，无需用户重新输入一遍，这对与用户来说，是一个非常重要的以用户为中心设计的体现。

2．如果用户想找商圈就更麻烦了，在奇搜的首页默认选项肯定找不到，进入商圈之后还必须点选下面的“商圈”选项后输入关键词才能找到相应的商圈，主题也是一样。也就是说用户要找到一个商圈，要四次点击。另外，在这里，我的感觉，我们这一块的设计不能跟百度贴吧一样。为什么呢？因为百度贴吧首页的搜索用户输入关键词目的是要找“贴吧”的起码有一半。所以“进入贴吧”，“帖子搜索”，“按作者搜索”搜索可能性有递降的层次关系。但是我们这里“空间”“商圈”和“主题”这三者完全是并列关系。用户搜索的可能性，三者也完全一样。商圈在我的感觉甚至比“空间”更大。所以是否思考换另外一种方式呢？即使保持目前的radio选择框的方式，是否在搜索结果页加入“您是否想搜索xx(关键词)‘商圈？’”“您是否想搜索XX（关键词）主题”等两个模块，或者radio选框直接checked “商圈”radio。再依次checked “主题”radio？

分类查找搜索用户：

坦白讲，我估计通过目前的高级搜索栏（首页左侧第二个空间搜索和商圈搜索）进入分类精准查找的用户应该不多（可以看数据统计结果分析），因为这样点选搜索确实太麻烦。所以虽然在奇搜的页面设置中是很重要的一个查找搜索补充，但是对于用户来说，是不方便用的，当然会有一部分习惯使用高级搜索的用户，我们可以在首页一个比较明显的地方提供一个链接，跳转到专门的一个高级搜索页面。
或者正是因为上面提供了主搜索和高级搜索栏，所以，圈子全部分类模块放在了最下面，而且是灰黑色的视觉效果，呵呵，某种程度上说是网站设计者觉得这块必要但是不重要。最方便的一定是直接点击链接。所以，我们可以看到淘宝，阿里巴巴网站都是把详细分类放在了第一屏可以看到的地方。另外从交互设计最重要的一条“不要让用户为网站的使用思考”的思路出发，也可以理解这一点。所以，我的建议是去掉高级搜索，把全部分类放在第一屏可以看到的地方。特别是对于新用户来说，这一点更为重要！因为他们还没有学会使用这个网站，如果采用的不是他们最易理解的方式去做，那么他们不太容易喜欢这个网站。

其它：

1．商圈首页的空间热点模块下面的分类，我不理解：“博客”，“相册”，“视频”。博客是空间的子类？博客跟相册，视频并列？仔细看看才明白，所谓博客其实就是空间文章。我不明白为什么不直接叫文章或博文也好理解一些啊。

2．热门资讯跟热门主题到底怎么个区别？而且都是放在第一屏，最重要的地方？用户能很快分辨这两者的区别吗？

3．热门主题的中的主题排行，我也无法理解。既然是叫热门主题，肯定是越热门越靠上了，但是我看到一个参与人数最多的却排名最后。那是以什么标准来设定热门主题呢？用户理解么？另外，热门主题版块，肯定是以主题为主了，在分类上我想应该商圈名称和参与人数放在主题的后面才对。

4．空间的导航分类让人迷惑，同样的商务博客其实只是指商务博文应该更合适，改成日志或博文不是，很多时候，博客=空间。而不是子类吧？知识分享和商务拓展正常来说应该是博文的子类。

5．明星圈子是什么意思，看内容才知道，原来是商圈人气排行榜。所以，这个标题不仅没有起到启示的作用，反而让人迷惑。

6．我不太清楚商圈首页左侧的内容跟右侧有什么区别？也就是你们是因为根据什么标准把有些模块放到左侧窄栏，而另外一些却放在右侧的宽栏？只是因为内容的多寡？

价值：

商圈特别是网络商圈应该讲不是一个特别好理解的词。不像资讯，生活，产品这样好理解。所以，如果让新用户更快更容易理解并吸引住他们留在这个网站就是一个非常重要的课题。

很简单，奇搜之所以要做商圈频道，很重要的一点这确实是一件非常有价值，对用户非常有用的一块。但是最为重要的是要让用户知道这一点，否则用户进来看半天，不能刺激到他内心的那根弦，是没有办法让他们留在这里的。目前来说，商圈首页很难让用户第一时间感受到这一点。

1. 商圈首页的非常宝贵的第一排右侧的位置对用户说：“只需3步创建空间”，用户心里想：“嗯，创建空间很简单！”但是问题是：我创建了空间，对我有什么用，有什么价值？却没有说明！我想网站的设计者是假设了一个前提，就是用户很清楚创建空间对他们有什么用，但是对于新用户，特别是对与不了解商圈的新用户来说，这个假设是完全不成立的。（很欣喜的看到新的策划案中改成了“拥有奇搜空间您可以”很清晰的用展现，提升，拓展三个方面去阐述奇搜空间的价值。这是非常重要的，我在设计这个模块的时候，也是用色块引导的方式，突出三个关键词，并且引导用户看后面的详细说明。）

2. 第一屏显示的一定是整个页面最重要的内容，这个最重要，我觉得应该是对用户来说，最想关注，最能启发，最方便导航！目前，主搜索框提供关键词搜索，高级搜索都是对于成熟用户来说是很重要的，很好用。但是新用户呢？所以，还是那句话，是否把商圈全部分类放到第一屏可以看到的地方，让他可以第一时间按图索骥找到他关注的圈子。关键字搜索和高级搜索都缺乏引导性。

3. 如果用户想找某个商圈内的所有或部分空间，该怎么做，能做到吗？既然是圈子，想认识下我所在圈子的所有的或部分的个人或企业空间是很难理解的一件事吧？而不能仅仅是提供一个排行榜，这样，变成了一个窄门圈子，意思是说你只能认识最活跃的那部门用户（当然如果是商业策略上的考量，另当别论）。目前的空间搜索提供按行业和地区分类查找。

4. 热门公共圈的模块，这里其实是有一个新名词--公共圈。在用户没有足够使用奇搜商圈之前，我相信他们完全不理解什么是公共圈。

5. 商圈帮助模块上面的那个banner广告放在左侧那个位置，有什么讲究？为什么放在那个位置？

6. 中间主要的banner图片区域，如果主要是为了视觉区隔各个不同的模块，那无可厚非。如果其实是蛮重要的告诉用户网站的价值和使用方法，最好采取其它的方式。我可以几乎断定地说，这类图形banner广告，绝大多数用户是视而不见的！

视觉设计:

目前的版式设计，主色调是蓝色，橙色是强调色，灰色。蓝色商务色调突出清新简洁风格。

中规中距的设计。

我的视觉设计改版思路：

1．目前视觉设计的色彩引导功能的概念不是特别清楚。比如重要的button设计成橙色，事实上页面仅有的两个button色彩不一样。当然我能理解设计者应该想突出创建空间button。但是我的感觉就是高级搜索模块的”查找”button设计成橙色应该不会太抢创建空间按钮的风头。蓝色的链接文字的概念也没有贯彻到底。“热门公共圈”的“标签”，“圈子数”，“成员数”都设计蓝色，可是都不是链接文字，而热门资讯栏后面的商圈名称是链接文字却采用灰色。不知道为什么？

2．既然是商圈，在视觉设计上一定要突然人情味，和人气旺盛的商业气息。目前这个网站设计风格，放在其它N多网站上也不见得不行。商业感觉不强，特别是采用直角，灰色框给人冰冷的感觉，缺乏人气味和商业气息。

3．很多地方，设计师没有搞清楚对网站视觉界面标准的概念不清楚。比如的商圈页上下两级分类都是标签式切换。标签页在标准的使用是不换页的。但是“圈首页”“ 讨论区”，“ 商业信息”，“ 商友问答”这一级是要链接到另外一页的。这跟整个网站其它地方的方式也不一样，所以不如干脆把这一级别的标签式设计直接换成链接反而更准确。很多地方，按钮和链接也没有区别。

前台开发：

1. 有些行为层的效果在Firefox上实效，相信有些用的是IE专属；

2. Html标签的语义化；

3. 命名的标准化；

4. 比如font，&nbsp这类W3C建议弃用的标签最好别用；

5. 用P来包裹input是一件匪夷所思的事情；

6. 有把CSS，js写在页面，呵呵，严格的标准是不太合适；

搜索引擎优化：

太晚了，不写了。

作者：alexpengster 发表于2009-3-29 23:04:00 原文链接

阅读：46 评论：0 查看评论

[原]我的部分视觉设计作品

alexpengster — Wed, 11 Mar 2009 17:06:00 +0800

雅虎奇摩单元：

tw.house.yahoo.com

tw.mobile.yahoo.com

tw.lifestyle.yahoo.com

tw.music.yahoo.com

tw.sports.yahoo.com

tw.money.yahoo.com

tw.news.yahoo.com/Election/08

achievo单元：

国信单元：

图标

内刊：

单页

手袋

海报

作者：alexpengster 发表于2009-3-11 17:06:00 原文链接

阅读：173 评论：0 查看评论

[原]从写的一个form的JS引发的思考

alexpengster — Thu, 24 May 2007 16:49:00 +0800

前些天写了个from的JS.
http://wd1.osp.corp.hki.yahoo.com/user/F2E/Money%202.0/web/intlindex_compare.html
这里用到的都是from中非常典型的JS了。
我先贴出我的第一版JS.
YTWFI.Module.StockCompare = function (dModule) {
    var dRootNode = YUD.getElementsByClassName("expt-main")[0];
    var dInputs = dRootNode.getElementsByTagName('input');
    var dExed = document.getElementById("ex-selected");
    var dSubmit = YUD.getElementsByClassName("btn-g1-m",'input',dModule)[0];
    var dReelect = document.getElementById("reelect");
    var dTally = document.getElementById("numtxt");
    var fnSubmit = function(e) {if (dExed.innerHTML == '') {alert('請選擇指數！');YUE.stopEvent(e);}} //未選指數狀況
        for(var i=0;i<dInputs.length;i++){
            dInputs[i].setAttribute('name','ipt'+i);
            dInputs[i].checked = false;
            var dTd1 = dInputs[i].parentNode.nextSibling;
            if(dTd1.nodeType == 3){dTd1 = dTd1.nextSibling;};
            var dTd2 = dTd1.nextSibling;
            if(dTd2.nodeType == 3){dTd2 = dTd2.nextSibling;};

            var fnReelect = function(e,params){
                dInputs[params[2]].checked = false;
                dExed.innerHTML = '';
                dTally.innerHTML = '(請選擇指數，尚有<em>8</em>項)';
                params[0].style.color = '#000';
                params[1].style.color = '#000';
            }
            YUE.on(dReelect,'click',fnReelect,[dTd1,dTd2,i,dInputs]);

            var fnReport = function (e,params) {
                if(this.checked == true){
                    var iCount=7 - dExed.childNodes.length;
                    if(iCount >= 0){dTally.innerHTML = '(尚有<em>'+ iCount +'</em>項)';}
                    if(dExed.childNodes.length>7){alert("您已選擇8項上限!");YUE.stopEvent(e);return;}//尚有項數已滿
                    params[0].style.color = '#ff0000';
                    params[1].style.color = '#ff0000';
                    var dDiv = dExed.appendChild(document.createElement('div'));
                    dDiv.setAttribute('id','div_'+params[2]);
                    dDiv.i = params[2];
                    dDiv.innerHTML = '<span>' + params[1].firstChild.nodeValue + '</span>'+'<img src="i7/ico_iscf_delete.gif" />';
                    var dImg = dDiv.lastChild;
                    var fnCheckedFalse = function (e,i){
                        params[0].style.color = '#000';
                        params[1].style.color = '#000';
                        dImg.parentNode.parentNode.removeChild(dImg.parentNode);
                        dInputs[i].checked = false;
                        var iCount=8 - dExed.childNodes.length;
                        if(iCount >= 0){dTally.innerHTML = '(尚有<em>'+ iCount +'</em>項)';}
                    }
                    YUE.on(dImg,'click',fnCheckedFalse,dDiv.i);
                }
                else{
                    params[0].style.color = '#000';
                    params[1].style.color = '#000';
                    dExed.removeChild(document.getElementById('div_'+params[2]));
                    var iCount=8 - dExed.childNodes.length;
                    if(iCount >= 0){dTally.innerHTML = '(尚有<em>'+ iCount +'</em>項)';}
                }
            }
            YUE.on(dInputs[i],'click',fnReport,[dTd1,dTd2,i,dInputs]);
        }
        YUE.on(dSubmit,'click',fnSubmit);

};
这是最终版：
YTWFI.Module.IntlStockCompare = function(dModule) {
    var dForm = dModule.getElementsByTagName('form')[0];
    var dParam = YUD.getElementsByClassName('ui-parameter','input',dModule)[0];
    var dInputs= dModule.getElementsByTagName('input');
    var dNum = document.getElementById('numtxt').getElementsByTagName('em')[0];
    var dPane = document.getElementById('ex-selected');
    // action
    var onSetInputStyle = function(oInput,bFlag) {
        var dTd1 = oInput.parentNode.nextSibling;
        if(dTd1.nodeType == 3){dTd1 = dTd1.nextSibling;};
        var dTd2 = dTd1.nextSibling;
        if(dTd2.nodeType == 3){dTd2 = dTd2.nextSibling;};
        dTd1.style.color = (bFlag)?'#ff0000':'#000000';
        dTd2.style.color = (bFlag)?'#ff0000':'#000000';
        oInput.checked = bFlag;
        return dTd2.innerHTML;
    };
    var onGetFormSetting = function() {
        var sParam = ','+dParam.value+',';
        var sHTML = '';
        var nNum = 0;
        for (var i=0,j=dInputs.length;i<j;i++) {
            if (dInputs[i].type != 'checkbox') {continue;}
            if (sParam.indexOf(','+dInputs[i].value+',')>-1) {
                dInputs[i].checked = true;
                sHTML = sHTML + '<div><span>' + onSetInputStyle(dInputs[i],true) + '</span> <img class="ico-delete" name="' + i + '" src="i7/ico_iscf_delete.gif" /></div>';
                nNum++;
            } else { if (dInputs[i].checked) {onSetInputStyle(dInputs[i],false);} }
        }
        dNum.innerHTML = 8 - nNum;
        dPane.innerHTML = sHTML;
    };
    var onSetFormSetting = function(oComponent) {
        var sParam = '';
        var sHTML = '';
        var nNum = 0;
        for (var i=0,j=dInputs.length;i<j;i++) {
            if (dInputs[i].type != 'checkbox') {continue;}
            if (dInputs[i].checked) {
                sParam = sParam + ',' + dInputs[i].value;
                sHTML = sHTML + '<div><span>' + onSetInputStyle(dInputs[i],true) + '</span> <img class="ico-delete" name="' + i + '" src="i7/ico_iscf_delete.gif" /></div>';
                nNum++;
            } else { if (dInputs[i]==oComponent) { onSetInputStyle(dInputs[i],false); } }
        }
        if (nNum > 8) {alert('您已選擇8項上限！');onSetInputStyle(oComponent,false);return false;}
        dNum.innerHTML = 8 - nNum;
        dPane.innerHTML = sHTML;
        dParam.value = sParam.substr(1);
    };
    // init
    onGetFormSetting();
    YUE.on(dForm,'submit',function(e){if (dParam.value == '') {alert('請選擇指數！');YUE.stopEvent(e);}});
    YUE.on(dForm,'click',function(e){
        var oComponent = YUE.getTarget(e);
        if (oComponent.type == 'checkbox') {onSetFormSetting(oComponent);}
        else if (oComponent.type == 'botton' && oComponent.className.indexOf('ui-cancel')>-1) {window.history.back();}
        else if (oComponent.className.indexOf('ico-delete')>-1) { onSetInputStyle(dInputs[oComponent.name],false); onSetFormSetting(); }
    });
    YUE.on('ui-reset','click',function(e){YUE.stopEvent(e);dParam.value='';onGetFormSetting();});
};

看完代码，估计你们都这两段代码的写法肯定有你的想法（呵呵，当然要对YUI熟悉，否则都写不知道是什么东西）。我个人的观点是:第一段代码是以功能实现为目标的CODE。所以可读性差，重码率高。而第二段code则结构清晰，表现的实现和行为的实现分开，以后的可扩展性和可修改性也好很多。而且尽量想尽
现在google和yahoo率先采用一种叫scrum 的project方式。

Scrum的基本假设是：

开发软件就像开发新产品，无法一开始就能定义软件产品最终的规程，过程中需要研发、创意、尝试错误，所以没有一种固定的流程可以保证专案成功。Scrum 将软件开发团队比拟成橄榄球队，有明确的最高目标，熟悉开发流程中所需具备的最佳典范与技术，具有高度自主权，紧密地沟通合作，以高度弹性解决各种挑战，确保每天、每个阶段都朝向目标有明确的推进。

Scrum 开发流程通常以 30 天(或者更短的一段时间)为一个阶段，由客户提供新产品的需求规格开始，开发团队与客户于每一个阶段开始时挑选该完成的规格部分，开发团队必须尽力于 30 天后交付成果，团队每天用 15 分钟开会检查每个成员的进度与计划，了解所遭遇的困难并设法排除。

反映到F2E。那就要求我们的HTML,CSS,JS的code能力将非常地强，而且code的扩展性能也有非常的要求，不能为实现需求的功能而coding。在写code的过程时刻强调代码的可扩展性和灵活性。因为沟通的频率更高，所以要求code的可读性，语义化也同样更高。这是以后开发的一种趋势，所以掌握这种工作方法的核心非常重要！

作者：alexpengster 发表于2007-5-24 16:49:00 原文链接

阅读：255 评论：0 查看评论

[原]定义语言编码

alexpengster — Sun, 29 Apr 2007 15:52:00 +0800

第三步是定义你的语言编码，类似这样：

作者：alexpengster 发表于2007-4-29 15:52:00 原文链接

阅读：239 评论：0 查看评论

[原]什么是名字空间

alexpengster — Sun, 29 Apr 2007 15:51:00 +0800

什么是名字空间

DOCTYPE声明好以后，接下来的代码是：

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？

这个"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。名字空间是什么作用呢？阿捷自己的理解是：

由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。例如：

小王和小李都定义了一个<book>标识，如果小王的名字空间是"http://www.xiaowang.com"，小李的名字空间是 "http://www.xiaoli.com"，那么当两个文档交换数据时，也不会混淆<book>标识，因为它属于不同的名字空间。

更通俗的解释是：名字空间就是给文档做一个标记，告诉别人，这个文档是属于谁的。只不过这个"谁"用了一个网址来代替。

XHTML 是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。如果你还不太理解也不要紧，目前阶段我们只要照抄代码就可以了。

后面的lang="gb2312",指定你的文档用简体中文

作者：alexpengster 发表于2007-4-29 15:51:00 原文链接

阅读：204 评论：0 查看评论

[原][技巧]CSS的超级技巧大放送

alexpengster — Sun, 29 Apr 2007 15:47:00 +0800

一.使用css缩写

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

二.明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如： width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

三.区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

可以写成

#content { /* declarations */ }
.details { /* declarations */ }

这样可以节省一些字节。

五.默认值

通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* {
margin:0;
padding:0;
}

六.不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

七.最近优先原则

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中，你已经定义了元素p，又定义了一个classupdate

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》了解更多。

八.多重class定义

一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

在页面代码中，我们可以这样调用

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

这段代码的CSS定义是：

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代码

样式定义是：

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

十.不需要给背景图片路径加引号

为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

background:url(images/***.gif) #333;

可以写为

background:url(images/***.gif) #333;

如果你加了引号，反而会引起一些浏览器的错误。

十一.组选择器(Group selectors)

当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如：定义所有标题的字体、颜色和margin，你可以这样写：

h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

h1 { font-size:2em; }
h2 { font-size:1.6em; }

十二.用正确的顺序指定链接的样式

当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。

如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover 后面。

十三.清除浮动

一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.横向居中(centering)

这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

你可以这样定义使它横向居中：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(main.css);

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import main.css;

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法
- (a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
  html>body p {
  /* 定义内容 */
  }
- (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
  * html p {
  /* declarations */
  }
- (c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：
  /* */
  * html p {
  declarations
  }
  /* */
2.条件注释(conditional comments)的方法

另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

十七.调试技巧：层有多大？

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：

selector1,
selector2 {
property:value;
}

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

空格和换行有助与阅读。

作者：alexpengster 发表于2007-4-29 15:47:00 原文链接

阅读：218 评论：0 查看评论

[原]在 CSS 中关于字体处理效果的思考

alexpengster — Sun, 29 Apr 2007 15:47:00 +0800

字体的处理在网页设计中无论怎么强调也不为过，毕竟网页使用来传递信息的，而最经典最直接的信息传递方式就是文字，所以，了解一点字体的基本知识对于设计来说还是非常重要的。

中文和英文的最大区别就是中文是方块字，英文是拼音文字，这对字体的处理的影响是巨大的。看看下面的图示就会发现，英文字体里的那些变化在中文字体里都弱化了。

作为中文的读者，习惯性的接受方块形状做为阅读的单元，其实对于眼睛来说，这是一种容易疲劳的方式，阅读的时候你的视线实际上是跟随整行文字的外形。看看这个例子。

NOW I'VE TRIED TO TALK TO YOU AND MAKE YOU UNDERSTAND

Now I've tried to talk to you and make you understand

哪一行更容易读呢？

第一行和中文的情形有些类似，不同的是，每个中文单字就好比一幅画，其变化要比26个英文字母丰富的多，对于我们来说，我们接受了这个特点，但是设计时还是有一些问题需要考虑，我不是设计师，如果说的不对，请在下面留言讨论。这些内容在我教授Typography的时候是作为一般原则来提出的。我也告诉学生一句话：“The purpose of rule is to break the rule.” 设计原则本身就是为了打破原则，这也是所谓的creativity的表现。问题是你需要先知道原则，并且顺从原则进行练习，只有在你熟悉原则之后才有可能打破原则显现你的创造性，打破原则不意味着原则的缺陷和错误，只是你对这些原则的别出心裁的使用，你打破了一些，同时也对你所破坏的部分做一定的补偿，似乎很有点哲学的味道。

我个人以为比较重要的几个原则是(适用于英文的情形):

字体的选用要考虑该文字的用途，是做标题呢，还是段落文字？
通常来说 san serif 字体适合作为标题使用，例如 Arial；serif 字体适合作为段落文字使用，例如Time New Roman。对于网页设计来说，有几个字体是我强烈推荐的，verdana, tahoma, georgia。事实上，像 Verdana 这个字体是由世界上顶级的字体设计师花了差不多两年时间设计出来的，Microsoft负责买单，然后免费提供给用户，这个字体是IE安装的一部分，如果你安装了IE 4以上的版本，你的电脑里就一定有这个字体，所以你不必担心用户是否有这个字体。它的设计考虑了字体在屏幕上显示的可能面对的问题，而且提供了近乎完美的答案。唯一的麻烦是它的近乎完美造成了我们使用的时候没有了个性，因为每个人都使用它。
字号的大小？
论坛里很多讨论，关于pixle 好还是point好？我就不重复了，在这里我想提出的是字号的大小在CSS里，有很多不同的单位，大致上有三类，
- 绝对大小：mm, cm, in, pt, pc
- 相对大小：em, ex
- 相对于设备：px
可能要多说几句的是 em 和 ex，em 在 css 里代表就是字体字号的大小，例如对于12 pt的字体来说, 1 em 就等于12 pt 范例：

p {
font-size: 10pt;
text-indent: 1em
}

也许你会说我可以用text-indent: 10pt来实现同样的效果啊，但那只是在理想的情形下，如果用户觉得他的浏览器设置字体大小为14pt更好的时候，你所设计的比例就失去了，所以相对尺寸对于网页的可伸缩性设计是非常有利的。

ex 和 em 类似，但不尽相同，回到上面的图示，x-height 对于每一种字体来说是不同的，ex 是根据字体的 x-height 来定义字体的大小。
对齐方式？
最好使用左对齐，尤其要避免使用左右对齐，除非你有一个特殊的设计目的，左对齐时右侧的不对齐正是为了阅读的方便，右侧的变化对你的视力是一个帮助，它借助变化告诉你的眼睛可以换行了。
行间距？
行间距取决于字体的大小，一般来说，小的字号需要大一点的行间距来便于阅读，中文字体在网页上如果没有行间距的设定，对于阅读大段文字来说是读者的灾难，所以适当设定line-height是非常必要的。一般地， line-height 在网页设计中应该是字体大小的1.5倍到2倍。Word 和其它的文本编辑软件里，一般设定字体的120%作为缺省的行间距。css里的 line- height 设定，是均分后加在每一行的上下，也就是说，如果 line-height 设定为 20px 的话，那么每一行文字的上下各有10px的间距。
字间距和字符间距？
很特殊的用途，对中文来说这两者应该是相同的。这个设定的本身就是为了解决某些字体设计上缺陷，来增加文字的可读性。

每次写专栏的文章都有这种感觉，越写越不知道怎么结尾，:) 这可能就是随笔方式的弊病吧。请留言讨论，我这个就算是抛砖了。

作者：alexpengster 发表于2007-4-29 15:47:00 原文链接

阅读：201 评论：0 查看评论