meditic的博客

Javascript Widget入门解析

首发时间:2009-02-07

收到读者的来信,希望知道采麦的Widget是怎么做出来的,突然想起当年我第一次写widget代码的时候,也是满世界找不到一个简明实用的教程。于是做个总结,也许更多人可以用得到。

复习一下两个js函数:

js可以动态生成网页代码,比如:

document.write(‘<div id=”photo”>123</div>’);

这段代码可以让网页里显示出一个叫photo的层,里面还有数字123。

此外,js可以动态改变网页内容,比如这段代码:

document.getElementById(‘photo’).innerHTML=’abc';

就可以让这个photo层里显示abc,而不是原来的123了

别看这么一段小代码,其实这就是整个widget的核心了

技术原理:

widget有3个重要部分组成:数据、外壳、脚本。

  • 数据:就是你希望显示出来的内容,比如你要显示flickr上最近的照片,那么照片就是数据;
  • 外壳:就是容纳数据的容器,比如上述照片,你把他们包裹到一个叫photo的div里,那么这个div就是外壳。
  • 脚本:脚本的作用是生成外壳,并把数据填充到外壳里,主要就是js代码,当然也可以带一些css

所以,理论上,一个原始的widget代码应该是这样的:

//js脚本生成外壳photo
document.write(‘<div id=”photo”></div>’);
//js脚本把数据abc填充到外壳photo
document.getElementById(‘photo’).innerHTML=’abc';

是不是很简单?是很简单,可惜太长了,于是把上面四行代码的中间两行提取出来,复制放到一个wjs.js文件里:

//js脚本生成外壳photo
document.write(‘<div id=”photo”></div>’);
//js脚本把数据abc填充到外壳photo
document.getElementById(‘photo’).innerHTML=’abc';

这样只需要调用一下就可以使用widget了:

<script type=”text/javascript” src=”wjs.js”></script>

好了,到这里你已经学会了最简单的widget制作,快去实验一下吧。

基础进阶:

那么,如果数据不是abc怎么办呢? 很简单,把数据独立出来就可以了。我们改造一下wjs.js代码:

//利用js建立photo层,生成外壳
document.write(‘<div id=”photo”></div>’);
//js填充数据:
document.write(‘<script type=”text/javascript” src=”widget.js”></script>’);

数据就在widget.js里,我们分析一下其代码,只有一句:

document.getElementById(‘photo’).innerHTML=’xxx';

这样的话,要改变数据,只需要把widget.js里的xxx换成任何内容即可,而无需改动wjs.js

中级进阶:

如果要自动动态改变数据xxx,只需要把widget.js也做成动态的,以php为例,首先把wjs.js修改一下:

//利用js建立photo层,生成外壳
document.write(‘<div id=”photo”></div>’);
//js填充数据:
document.write(‘<script type=”text/javascript” src=”widget.php?user=howard></script>’);

注意里面的widget.js换成了widget.php,后面还跟了一串变量,这样就可以显示为howard量身定制的数据了,看看widget.php的代码:

<?php
Header( “Content-type: text/javascript”); //声明文件类型为js
$user=$_GET[‘user’]; //读取user变量 (howard)
echo “document.getElementById(‘photo’).innerHTML=’hi, my name is $user'; “; //输出动态内容(hi, my name is howard)
?>

到这里,我们已经可以根据不同变量来自动显示不同的数据了。后面就很简单了,把widget.php任意改造,读取数据库,可以输出各种各样关于howard的数据。

实战应用:

事实上,实际应用中,wjs.js也被改造成了动态文件,比如wsj.php,这样你的用户howard只需要在其blog里插入以下代码,就可以真正实现个性数据调用:

<script type=”text/javascript” src=”http://domain.com/wjs.php?user=howard”> </script>

wjs.php的内部代码是这样的:

<?php
//声明文件类型为js
Header( “Content-type: text/javascript”);
$user=$_GET[‘user’]; //读取user变量 (howard)

//利用js建立photo层,生成外壳
echo “document.write(‘<div id=”photo”></div>’);”

//动态调用widget.php
echo “document.write(‘<script type=\”text/javascript\” src=\”widget.php?user=$user\”></script>); “; ?>

这样,widget.php收到了user变量之后,就能显示出howard的个性数据。

先写到这,大家可以先回去测试一下。真正能用的widget,代码和上面有很大区别,但是原理是相同的。

社会化媒体营销的两个小实验

首发时间:2009-01-21

实验一:通过奶粉钱把吐司网的一个作品做到了QQ书签的首页,结果如下:

  • 总共收藏超过26000(两万六千)人,而且在QQ书签的首页挂了24个小时;
  • 为了保证国内访问量的精确统计,除了google的analytics以外,我还自己做了一个后台统计,来一个ip加一次
  • 通过QQ书签带来的访问小于2000次(两千次),也就说93%以上的收藏者居然连看都没看就收藏了!!
  • 由此引发相关的社会化传播为零,因为google搜索该标题没有发现任何转载。

实验二:同一时间,我最近的一篇文章上了Del.icio.us热门第一页,结果如下:

  • Del.icio.us收藏113次,Del.icio.us过来的直接访问者600个
  • 引发相关的社会化转载最高时刻超过100次,包括FriendFeed, twitter, 也包括直接爬取社会化数据的网站(比如popurls.compopacular.comtheweblist.net等,见下图),这部分带来的访问量超过1000,高于直接从Del.icio.us过来的点击,其中尤其以popurls.com为甚,光popurls.com就已经超过了Del.icio.us
  • 除了英文国家外,这篇文章之后还被Gigazine翻译到了日本,然后被Livedoor转载,相关的后续访问超过五百次。
  • 因此这篇文章的关系,也使得我最近的其他几篇文章被日本读者和韩国读者翻译成了他们各自的语言。

实验结果很明显,在只考虑访问量增长的前提下,QQ书签营销的杠杆效用只有0.07倍,而del.icio.us的杠杆效用是20多倍。这就意味着,在相同收藏人数的前提下,del.icio.us的效用是QQ书签的280倍。虽然用户群体不同,但QQ书签和del.icio.us都是社会化书签,具有一定的可比性。

不过,QQ书签的流量虽然很大,实验结果表明其“社会化”还是流于形式,如果无法形成有效的社会化传播,那就称不上真正的社会化。通过奶粉钱的几十次实验发现,无论收藏多少万次,QQ书签过来的访问数一直都在收藏数的10%以下,这个结果完全在我意料之外(以前老觉着上了QQ书签首页怎么着也得创造个百万级别的访问量吧。。。。),也让我对社会化媒体在国内发展的模式感到担忧。

后话:

不过,QQ书签在不断进步,很多人都不知道,在2009年1月18号以前,QQ书签的热门收藏里80%是美女、露点、女优、免费A片、龌龊走光等“低俗”话题,而且排名也有漏洞,被奶粉钱利用了很多次。1月18号以后,被整改的干净了很多(不知道是不是“低俗”网站被暴光的缘故),排名规则也更加优化了(估计是被奶粉钱搞得发飙了)。至于之后怎么走,真正让它社会化起来,暂时我也没什么想法。

Why is Economic Recession Good for Startups

首发时间:2009-01-16

Weaker Competition:

Many big companies are struggling with laying off employees, cutting off secondary product/service, rebuilding management structure, asking for cash investment…..but definitely not going to release new product or better service very soon. Well, this is your chance to sneak into their market.

Lower Cost:

When people get unemployed, even students from great schools and managers from big companies are considering to work for small startups with discounted salary, which rarely happened in the past. Stuff like office, server, food are also cheaper than before.

Better Plan:

While VC is holding back their offers carefully in the recession, it’s more difficult to get fund with a lousy business plan, especially those without a clear revenue model or healthy cash flow. While your business plan is revised again and again but still get cold-shoulder from VCs, it’s more likely to survive in the real business environment.

Fairer Chance:

Well, we all say 9 out of 10 startups are going to fail within 12 months. It’s true that small company has high risk of failure, but after Lehman Brother fell apart, Merrill Lynch got sold, and auto industry monsters kept crying for help, it’s pretty clear that no company is safe in this world, and size definitely can’t determine the fate of a company. I’m sure people will tend to have a fairer attitude towards small companies.

Tighter Pocket:

I have a friend getting >10,000 dollars a month as revenue from his online business. Pretty good for startups, isn’t it? But what makes me sad is, he spend 10 times more money every month, 90% of which is for senior management’s salary, while the job of those seniors is just flying for coffee meeting once a month. It’s never too late to watch every penny in your pocket, dude, no matter it’s recession or not.

Japanese Version (日本語) of this post >>

7 Steps To Build A Better Blog

首发时间:2009-01-13

1. Create Value:

Whatever you write, remember to bring value to readers. Just saying Myspace sucks can’t make your a good writer, since there are over 1 million people already knowing this conclusion earlier than you. Just saying viral marketing is amazing can’t make you a great blogger either. Say something more to make us know something fresh, or, to save our time, or, to create other value.

2. Focus on your own industry:

I can’t remember anything you write if you write about everything. Focus on one industry you’re interested in, man. Beer, Mac, Black-Hole theory…… anything would do, as long as you’d rather cut your sleeping time and sacrifice your dinner to make yourself know it better than anyone else.

3.Blog is not twitter:

Blog is blog, but twitter is another thing. Don’t make your blog into another twitter. I’m not really interested to know what you had for lunch or which brand of soap you bought unless you are Charlize Theron, and 10 posts a day makes me doubt whether you are a blogger.

4.Write drafts:

When you think of some new ideas, put them into drafts as soon as possible. Finally you will find your drafts full of great materials to make a great article, and this is how other Blogger’s great articles are made.

5. Appearance matters:

Just as a great pianist needs a gorgeous concert hall to show his best performance, you need a suitable appearance to make your blog looks great if you believe it is great. Pick a clean theme, use related pictures, insert sharing buttons…and more.

6.Share:

Leave a full link when you quote another blogger’s post, and they will thank you very much and probably do the same thing to you in the future. It’s a small world, and readers won’t forget you just because you refer them to read another blog.

7.Hold on, man:

It’s a lonely and boring job to write blog when no one notice you. Don’t give up if you believe your posts are creating value to the society. Check your blog system to make sure the SEO part is well done. Hold on and keep writing. If you are still lonely after you write 50 posts, leave your blog address here, dude, and I’ll be the 1st one to make you not lonely anymore.

Practical Tips for Google SEO

首发时间:2009-01-10

Never underestimate the power of SEO. It’s the most effective & healthy way of marketing online. Although Google is constantly changing its algorithm of search ranking, but some basic rules for SEO still works at least now. Here is several tips from my own experience when I was in charge of the promotion for Tucia.

Commitment:

Pay money and extend your domain expiration time to 5 or 10 years later, so that Google won’t easily put you into the list of temporary spamming & cheating sites.

80/20 Rule:

20% of your keywords bring 80% of traffic. Give up all the other keywords except these 20% most important ones. 3~5 keywords would be the best. Focus on them.

Forget 6%:

Adjust your content, link’s TITLE, image’s ALT and everything else to high light your keywords. Don’t be afraid of too many keywords (forget about the 6% density limit), because you’ll never have enough high keywords density in a readable text.

I’ve seen a very stupid personal site with lousy page TITLE, DESCRIPTION, META, and shitty codes, but standing right on the top of Google search results. The only reason is ultra-high keyword density which I can never achieve when I try to make visitor enjoy reading it at the same time, for God’s sake.

Avoid Duplication:

Every page must have a different TITLE and DESCRIPTION and also different content text, unless you want Google to put you into the list of trash-producing sites.

Cross-Level Consistency:

You need to make Google believe that you page is highly related to the keywords, which can be simply done by putting the same text in different levels of the same page. Such as link TITLE, link TEXT, image ALT. For example, this text link to abc.htm:

<a href=”/abc.htm” title=”keyword1-keyword2″>keyword1-keyword2</a>

and this image link to abc.htm

<a href=”/abc.htm” title=”keyword1-keyword2″><img src=”/abc.jpg” alt=”keyword1-keyword2″ /></a>

Remember you have to put keyword1-keyword2 in the page TITLE of abc.htm

IF you can change the page file name of abc.htm to keyword1-keyword2.htm, that will be best:

<a href=”/keyword1-keyword2.htm” title=”keyword1-keyword2″><img src=”/keyword1-keyword2/keyword1-keyword2.jpg” alt=”keyword1-keyword2″ /></a>

Social Media Effect:

I found it by chance that a high rank in social media (e.g. Digg & del.icio.us) will prominently make your rank higher in Google too. I send Tucia to a low-cost social media marketing service, which helped me to get 600 diggs & 300 del.icio.us bookmarkers in a short time. In 72 hours, I found Tucia climbed to Google’s 2nd page from 5th page with the same search keywords.

“经济衰退”带给创业家的机会

首发时间:2009-01-16

竞争削弱:

在经济危机中,很多大公司因为投资链断裂而走向绝境,忙于裁员、重组、贷款,必然疏于新服务新产品的开发,这正好是初创小公司异军突起的最好时机。

人力成本降低:

大批的失业者找不到大公司的工作,不得不考虑进入初创小公司,而且不需要给很高的薪水。最近很多名校毕业的高材生也开始考虑创业,开餐馆,卖家具。。。。。。这在以前是不可想象的。此外,服务器、办公室、食物等相关的平均开销也会降低。

商业模式趋于理性:

风险投资在经济危机下被迫收紧口袋,意味着创业者拿到钱的机会更小了。很多注定来骗钱烧钱的商业计划自然被淘汰,于是,创业者最终执行的必然是拥有清晰盈利模式和健康现金流的商业计划。这样的计划生存下来的可能性更大,也就意味着创业成功的可能性更大。

价值观趋于理性:

以前人们去创业都自比为“走钢丝绳”,似乎小公司注定就要失败,大公司注定就能成功。这种自卑的观念是有问题的。雷曼哥哥的倒掉,美林姐姐的被收购,让我们意识到,无论大公司小公司都有失败的可能,也都有成功的潜力,这取决于怎么运营,而不取决于规模大小。人们将以更平和的心态来看待小公司,并为其创造积极、平等的发展环境;人们也会以更加冷静的态度来看待大公司,它们已经不再意味着终生保险的铁饭碗了。

收紧口袋的时候到了:

有个美国创业家哥们,他的互联网公司每月盈收超过1万美金(非常棒,不是吗?) 不过每个月的开支超过十万美金,其中90%是高管的薪水,而这些高管的工作就是一个月飞来喝一次咖啡,顺便拍拍小秘的肩膀而已。 很可笑吧?事实就是如此:很多小公司的失败,并不是收入太少,而是开支太大。 经济危机让每个人都有收紧口袋的意识,这对公司成长的好处远大于坏处。

在线定制高品质相册印品
影楼在线预约系统/云端选片SaaS订单管理
photo editing & retouching services