SNS浪潮:拥抱社会化网络的新变革

Filed under: 交互设计 | No Comments »
Posted on

一位朋友的新书《SNS浪潮》出版上市了,关注SNS的朋友,非常值得一读。

豆瓣点评:http://book.douban.com/subject/4265473/

内容提要:
本书通过互联网行业与社 会生活中的案例内容,向读者介绍了一些互联网技术和新型网站的发展,揭示了社交网站兴起的因素。在探讨社交网站发展和网络开放平台的同时,也介绍、描述了 其对社会信息传播、行业组织、广告营销等方面的影响。最后通过新技术和产品应用,展望了未来社会化网络的趋势走向。
本书适合从事信息技术、社 会传播、市场营销相关工作,以及广大互联网用户,或对IT行业有兴趣的人士阅读。


书籍推荐:
梁冬 独立跨文化研究者,前百度公司市场副总裁、凤凰卫视主持人
——铅笔和钻石都由碳原子构成,导致其差别的原因只是其原子间的排列关系不同,亦即 SNS不同。所以当人们开始研究SNS之于人的意义时,我们相信人群的定义将会改写。


胡泳 北京大学新闻与传播学院副教授,《数字化生存》、《未来是湿的》译者
——SNS给我们提供了太多种可能性。但对中国而言,一定要牢记这样一个 事实:我们的网民的平均年龄很年轻。对于他们而言,彼此联系起来不是一个问题;关键在于,联系上以后应该干什么。所以,中国SNS的战略重点不应该是社 交,而应该是提供驱使用户互动的内容。


洪波(Keso) 知名IT博客,五季咨讯合伙人
——SNS浪潮表明,互联网已从信息的网 络,变成了人的网络,从工具、媒体,变成了社会。有互联网,没不可能。


韩雪 Google中国新业务拓展总经理
——这几年 SNS持续爆炸式的增长,成为互联网的主流发展趋势之一。现在全世界所有网民超过六分之一的在线时间,花在SNS上。推荐本书,看看SNS如何从一个新兴 互联网趋势,成为一种影响世界的生活方式。


郑志昊 腾讯QQ空间总经理
——人际网,互联网,网中有你有我。这是一个承载浪潮和机 遇的时代,读懂《SNS浪潮》,捕捉SNS带给未来的机遇。


赫畅 M&C SAACTCHI-I中国区 董事总经理
—— SNS已经不只是一场互联网革命,而是一次伟大的改变人类生活的工程。它在完全镜像一个现实的世界,犹如一双上帝之手再创造一个虚拟新世界。每一个社会成 员都将不可避免也无可避免接受和进入虚拟化生存的世界。在这一刻,回顾SNS的发展历程并展望新的未来,显得尤为重要和难能可贵。


高翔 IDG技术创业投资基金(IDGVC Partners)合伙人
——门户网站把内容联在了一起,即时通讯把我们联在了一起,而SNS把我们和 内容联在了一起,这就是互联网,整一个“联”字了得!让我们细细体会《SNS浪潮》带给我们的SNS这一互联网最新杰作的魅力吧!


沈佳 Facebook应用开发商RockYou创始人 CTO
——如书中所述,SNS之上的开放平台,代表了新的产业模式和商业形态——所带来的 无穷机遇和挑战,会孕育出更多的明星企业的和创业传奇。


卢汉森(Dominic Penaloza) 商务社交网站“优士网”(ushi.cn) CEO
——SNS在全球已经形成一波新的互联网浪潮,这本书向读者全面、生动的展示它将如何深刻 地影响和改变我们工作及生活的方式,非常值得一读。


郜韶飞 SNS应用开发商五分钟(开心农场作者) 创始人 CEO
——如果说 SNS让互联网融入了大众用户的生活,那么Social Game就是让游戏融入了大众玩家的生活,而这两者又相伴而生。所以经过SNS浪潮,互联网的发展将走入一个全新的阶段。本书可谓SNS发展的“史记”, 值得一读!

TIBCO PageBus

Filed under: 交互设计 | 3 Comments »
Posted on

What is PageBus?

TIBCO PageBus is an event and message bus implemented in JavaScript that enables disparate Ajax elements in a Web page to broadcast and listen for events and messages published on topic names.

简单来说:发布一个消息,订阅了这个消息的程序,就会去执行相应的功能

B, C … Z 订阅了名为 “TibcoMessage”的一个消息。

当发布一个名称为”TibcoMessage”的消息时,B, C … Z 程序,都会去执行各自的事件,比如B 执行 刷新一个DOM, C 执行 删除一个DOM,…

这样就可以页面之间的事件关系,能做什么,看各自的需求吧。

可以简单的看几个例子,也许能更清楚的知道PageBus能干什么。

Publish/Subscribe Example 消息发布和订阅

Performance Example PageBus的性能测试

更多详情,还是访问官方网站吧:http://developer.tibco.com/pagebus/

延伸阅读

超越轮询?考虑PubSub、Push和MOM

为了给45000名使用者检查更新,FriendFeed向Flickr轮询了290万次。而且在这45000名使用者中,在任意时刻只有6700名处于已登录状态。这当然是一种蹩脚的内容更新检查方式。

解决这个问题的关键在于将标准REST Web服务抛在脑后,找出一种使用消息传递的方式,它是一种通知使用者内容变更的直接通信方式。

GITAK Server (collect the gitak result log)

Filed under: 交互设计, 程序 | No Comments »
Posted on
  • What is GITAK Server?

TIBCO General Interface(TM) Test Automation Kit Server
collect the result log.
automatically start/stop/control any supported browser.

The GITAK Server allows you to run your GITAK HTML test suite against a remote webserver deployed General Interface (GI) application and collect the result log.

  • GITAK Server Operating environment

GI 3.7: http://developer.tibco.com/gi/product_resources37.jsp
GITAK 0.9: http://developer.tibco.com/gi/product_resources_gitak1.jsp
JDK 6: http://download.java.net/jdk6/
Tomcat 6.x: http://tomcat.apache.org/download-60.cgi

  • How to configure it?

  1. Create a folder,c:/gitak_server.
  2. Access to gitak path “gitak/server/”, copy classes12.zip, selenium-server.jar into c:/gitak_server/.
    (But you would better get them from here, because the GITAK Server 0.9 not support firefox3 now.)
  3. classes12.zip: http://svn.generalinterface.org/trunk/gitak/server/classes12.zip
    selenium-server.jar: http://svn.generalinterface.org/trunk/gitak/server/selenium-server.jar
  4. Copy gi folder into “Tomcat 6.0/webapps/ROOT/”, and then svn checkout your project being tested.
    For exapmle:  you checkout UXCore, QAToUXCore.
    The directory structure:
    webapps/ROOT/gi
    webapps/ROOT/UXCore
    webapps/ROOT/QAToUXCore
  5. Access to tomcat folder “webapps/ROOT/QAToUXCore” , create file “index.html”.
    To ensure that you have access to the following url (the folder name is case-sensitive)
    http://localhost:8080/gi/JSX/js/JSX30.js
    http://localhost:8080/QAToUXCore/
  6. Copy your test script files into “c:/gitak_server/gitak-tests/”, then edit TestSetup.html.
  7. Create file run_gitak_win_sp3.bat, run_gitak_fx3.bat, run_gitak_ie7.bat into “c:/gitak_server”.
  • How to run it?

  1. Run Tomcat server.
  2. Double click run_gitak_win_sp3.bat,then wait for result log being created.

Download attach file: gitak_server.zip (above mentioned files)

CSS3伪类选择器

Filed under: 交互设计 | No Comments »
Posted on

先看看这篇文章,浏览器所支持的 CSS Selecter http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/ ,看来google Chrom 和 Safari 是对 CSS Selecter 支持最好的。

转自:http://www.webjx.com/css/divcss-10232.html

CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽 然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”

语法:

:nth-child(an+b)

为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+。

描述:

伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明。

第一种:简单数字序号写法

:nth-child(number)

直接匹配第number个元素。参数number必须为大于0的整数。

例子:

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二种:倍数写法

:nth-child(an)

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。

例子:

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种:倍数分组匹配

:nth-child(an+b) 与 :nth-child(an-b)

先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)

例子:

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

li:nth-child(3n±0){background:orange;}/*相当于(3n)*/

li:nth-child(±0n+3){background:orange;}/*相当于(3)*/

第四种:反向倍数分组匹配

:nth-child(-an+b)

此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。

例子:

li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/

li:nth-child(-1n+8){background:orange;}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/

第五种:奇偶匹配

:nth-child(odd) 与 :nth-child(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

附:例子效果图

GITAK TestRunner 的一点儿使用心得

Filed under: 交互设计 | No Comments »
Posted on

GITAK 可以自动化测试由 TIBCO General Interface 所开发的项目。基于selenium开发。
GITAK和文档 下载地址:http://developer.tibco.com/gi/product_resources_gitak1.jsp

gitak

图1,这里可以输入GI Test Suite的路径,选择被测试的用例。
如果是绝对路径类似这样:file:///e:/gi/gitak-tests/TestSuite.html

图2,测试用例代码,错误的时候,会用红色标注错误
点击某一行后,会以灰色选中当前行,测试单个suite时,会暂停到此处。

图3,测试播放按钮、测试结果、辅助工具,“View DOM” 按钮相当有用。
4个按钮分别是:测试全部、测试单个、暂停/继续、单步步进
Fast–Slow,滑动块,测试执行的速度快慢
Hightlight elements 复选框,勾选后,会以黄色标注被测试的组件

图4,被测试的项目,测试效果会显示在这里。

图5,测试时,所出现的一个Dialog

图6,点击“View DOM” 时,出现这个 General Interface DOM 界面

打开gitak的目录之后,有一些实例,可以参考。
目录:gi/tests/gi34 这里是测试用例
目录:gi/samples/gi34 这里是被测试的项目

设置firefox, about:config
security.fileuri.strict_origin_policy == false

如何写一个最简单的测试用例?
1、进入GITAK目录,gi/test/gi34/,复制 testSetup.html, testSuite.html 到一个新目录,
e:/gi_project/test/

2、编辑 testSetup.html
定义GI的路径:|store|file:///E:/tibco|GIPATH|
定义被测项目的路径:|store|${GIPATH}/All_Project/JSXAPPS|SAMPLESPATH|
store: 定义个变量
storeEval: 定义一个变量,可以执行一些JavaScript代码
echo: 打印输出某个变量或值,变量标示为:${VARNAME}

3、testSuite.html 定义一些测试用例的连接
如:<a href=”uxcoreDialog.html”>uxcoreDialog</a>

4、新建一个文件 uxcoreDialog.html,类似如下代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”content-type”>
<title>Uxcore Test Dialog Alerts</title>
</head>
<body>
<table cellpadding=”1″ cellspacing=”1″ border=”1″>
<tbody>
<tr><td rowspan=”1″ colspan=”3″>Test sample-dialog</td></tr>
<tr><td>include</td><td>testSetup.html</td><td>&nbsp;</td></tr>
<tr><td>open</td><td>${GIPATH}/shell.html?jsxapppath=${SAMPLESPATH}/QAToUXCore</td><td>&nbsp;</td></tr>
<tr><td>waitForJsxButtonPresent</td><td>JsxButtonText=Dialogs</td><td>5000</td></tr>
<tr><td>verifyJsxButtonPresent</td><td>JsxButtonText=Dialogs</td><td>&nbsp;</td></tr>
<tr><td>click</td><td>JsxButtonText=Dialogs</td><td>&nbsp;</td></tr>
</tbody>
</table>
</body>
</html>

以上代码,具体测试流程是:
载入estSetup.html文件;
打开QAToUXCore项目;
等待5秒,按钮文字等于“Dialogs”的按钮显示;
确认按钮文字等于“Dialogs”的按钮,已经显示;
点击按钮文字等于“Dialogs”的按钮;

具体命令,可以查看 gi/doc/* 下面的说明文档

5、打开GITAK,输入file:///e:/gi_project/test/testSuite.html, 点击go,即可看到测试效果

总结:点击“View DOM”按钮后,出现在图6中的元素,都可以很方便的以JsxName=? 的方式来查找。这里显示的是getBodyBlock()所找到的内容。
通过 getRootBlock().paintChild(obj) 所插入的节点,在这里找不到。

Ajax通用表单提交

Filed under: 交互设计 | 5 Comments »
Posted on

Ajax通用表单提交功能:把FORM表单中的值,通过AJAX方式提交到某页面

说明:

  • 以下FORM表单中,有name属性的、被checked的元素会被传递;disabled元素不被传递。
  • 不支持FORM表单中文件上传控件

测试地址:http://www.d5s.cn/example/ajax/ajax_form.php

源码:打开以上网址后,查看源文件即可。

jquery到底对object做了什么?

Filed under: 交互设计 | No Comments »
Posted on

还是看实际代码吧?

http://www.d5s.cn/example/js/js_flash.html 正常

http://www.d5s.cn/example/js/jquery_flash.html 出错

一个使用的是 document.getElementById(’XXX’).innerHTML = str;

另一个使用    $(”#XXX”).html(str);

结果,使用了jquery方法,会出现一些BUG在IE,其他浏览器未发现。

我之前也写过一篇文章: http://www.d5s.cn/archives/79

我以为 是使用jquery造成的,看来是jquery对object做了特殊处理,到底做了什么处理呢?我还不清楚,希望哪位js达人告诉我。

Google Ajax Library API

Filed under: 交互设计 | No Comments »
Posted on

不知道现在还有多少网站是自己从头开始写js的,至少我现在已经离不开jquery了,在做一个网站之前,必定要先引入js类库–jquery

如果大家都从一个地方载入js类库,那么载入速度将会快很多,伟大的google已经帮我们想到了 Google Ajax Library API

看看 “某人的栖息地” 写的教程说明:http://www.ooso.net/index.php/archives/404

呼吁各位使用这些 jQuery、prototype、script.aculo.us、MooTools、dojo 类库的朋友,都自己从 Google Ajax Library API 下载吧

使用widget

Filed under: 交互设计 | No Comments »
Posted on

先认识一下什么是widget?

http://baike.baidu.com/view/704016.htm

现在widget,已经由yahoo把它发扬光大了。

具体可以在这里下载

充分利用,每天面对次数最多的桌面,让你的工作,摆满屏幕。

1、使用 “桌面停靠栏” ,来管理你混乱复杂的桌面图标,让你桌面和MAC一样。

2、使用“X-TASK计划任务”,来管理每天的工作,以及代办事项。

3、使用 “yahoo记事本”,随手记下,手边的工作和事情。

4、其他一些 系统管理、天气预报、时间、日历,之类的,可以在这里

http://widget.cn.yahoo.com/gallery/view.htm?widgetID=127&cate=1

http://www.widgetgallery.com

找到你想要的扩展。

然后就是让我这个懒人,变得更懒,更高效。

如果你有需求,甚至可以自己编写一个 widget 组件。

开发文档:http://widget.cn.yahoo.com/document.htm

附一张我的桌面

widget

转一个图片未知高度,垂直居中的例子

Filed under: 交互设计 | No Comments »
Posted on

很久以来,自己也有这个疑惑,由于很久没有专职做这个了,就没有深入的研究过重构方面的东西,只是一直关注着,不曾落下。
转载记录一下,以免自己遗忘。

转自:http://www.planabc.net/2008/05/26/img_vertical_center_solution/

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>Vertical Middle</title>
  6. <style>
  7. .box {
  8.     /*非IE的主流浏览器识别的垂直居中的方法*/
  9.     display: table-cell;
  10.     vertical-align:middle;
  11.  
  12.     /*设置水平居中*/
  13.     text-align:center;
  14.  
  15.     /* 针对IE的Hack */
  16.     *display: block;
  17.     *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
  18.     *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
  19.  
  20.     width:200px;
  21.     height:200px;
  22.     border: 1px solid #eee;
  23. }
  24. .box img {
  25.     /*设置图片垂直居中*/
  26.     vertical-align:middle;
  27. }
  28. </style>
  29. </head>
  30.  
  31. <body>
  32. <div class="box">
  33.     <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
  34. </div>
  35. </body>
  36. </html>

http://listenpro.googlepages.com/demo_vertical_css.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>Vertical Middle</title>
  6. <style>
  7. .itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;}
  8. .blank{width:0;height:160px;}
  9. .itm img{vertical-align:middle;}
  10. </style>
  11. </head>
  12.  
  13. <body>
  14. <div class="itm">
  15. <img src="http://cn.yimg.com/i/comn/blank.gif" class="blank" />
  16. <a href=""><img src="http://cn.yimg.com/bookmark/yisou/mp3/m060616.jpg"/></a>
  17. </div>
  18. </body>
  19. </html>
分页: 1 2 Next
1,987 垃圾评论
截获自
Akismet