December 29th, 2009 |
htmlor |
web, 技巧 |
33 Comments »
前几天 twitter 上发了条“Google Voice + Ringplus + flaphone , 可实现在线免费拨打全球电话（当然包括中国），无需安装客户端” ，当时就怕说得含糊，所以加了句“Google Voice 负责免费拨打美国接入号，Ringplus 负责免费转接全球电话（有广告有限制），flaphone 负责在线接听拨打”。今天发现好多人问具体怎么实现，那就说说吧。
前提条件
- 本文不提供 Google Voice 注册教程。你应当已注册 Google Voice ，或会注册。如不会，参看教程这里和这里；
- 本文不提供翻墙教程。你应当会使用翻墙/代理软件（Tor / VPN / SSH 等）。如不会，请学会后再看；
- 本文不提供截图。你应当阅读英文无障碍，至少能看懂简单的英文。如不会，我也爱莫能助；
- 在此免费拨打过程中你可能会觉得不爽，因为有广告语音，而且有时会无法接通。如能忍受，请继续；
一、拨打原理
Google Voice 免费拨打美国接入号码
Google Voice 只能免费拨打美国和加拿大的号码（国际区号为+1），所以需要一个提供美国接入号码的转接服务商，在这里由 Ringplus 实现；
Google Voice 只能转接，没有通话功能，所以需要一个电话机。美国以外的用户，电话机功能可由 SIP 客户端实现（Gizmo5 / VoipStunt 等），在这里由 flaphone 实现。
Ringplus 免费转接全球电话
Ringplus 提供国际长途免费转接服务，它的接入号码所在地包括美国、瑞士和意大利；
不过，Ringplus 的免费转接有条件，每次通话时间限制在6分钟，每天可通话多次（至于多少次，没说，我试过10次之后还能打）；
而且，它会在等待对方号码响应时播放广告。也就是说，你不会听到等待的响铃声，而是广告语音，即使对方挂了，你也不会听到提示。有点傻是吧？这就是免费的代价。
flaphone 在线接听
flaphone 是基于 Web 的网络电话，它本身不提供 SIP 服务，但能使用已有 SIP 账户，实现通话功能。
二、如何注册
Google Voice 注册
详细过程不再赘述，只说几个要点：
- IP 要在美国；
- 要有美国电话号码（SIP 号码即可）；
- SIP 客户端要能输入确认码；
Ringplus 注册
- 访问注册页面 http://www.ringplus.net/subscribe
注意：IP 要在美国，否则无法注册。注册后登录无此限制。
- 填写注册资料
注意：Cell phone 填写你的 Google Voice 号码，并选中 Auto auth 。这是为了以后拨打时自动识别，无需认证。
- 注册成功后访问 http://www.ringplus.net/access-numbers
可以看到多个美国接入号，拨打时任选其一。
flaphone 注册
- 访问网站 http://www.flaphone.com/
注册账户
- 注册成功后登录
打开 Menu 菜单（点拨号键盘上方 menu ），打开 SIP Settings 界面，添加 SIP 账户（Google Voice 注册时用的 SIP 账户）
注意：选中 Register 。这是为了使 SIP 号码响铃时，flaphone 能接听。
三、拨打流程
- Google Voice 拨打 Ringplus 美国接入号；
- flaphone 响铃，接听；
- Ringplus 语音提示，按提示拨打中国号码（以手机号为例，前加 01186 ，后加 # ，如 0118613800138000#）；
- 在广告语音中等待中国号码响应，接通。
常见问题
- 不用 flaphone 可以吗？
当然可以。本文讲的是“无需安装客户端”，所以要用基于 Web 的 flaphone 。如果已装 SIP 客户端，可直接使用。
- 可以使用 Gtalk 或 Skype 吗？
把 flaphone 换成 Gizmo5 即可。Gizmo5 账户可免费呼转至 Gtalk 或 Skype 。
- 不用 Google Voice 可以吗？
可以。Gizmo5 也能免费拨打美国号码，因此 Gizmo5 + Ringplus 的搭配即可实现上文所述。
- Ringplus 的接入号打不通怎么办？
很简单，换一个再打。有个小技巧：把 Ringplus 加为 Gmail 联系人，电话号码多填几个接入号，Google Voice 里直接拨打。
- 每次都得输一堆数字，还要听广告，烦死了！有没有办法简单点？
免费的东西，从来都不简单。想要简单，花点钱吧。
October 16th, 2006 |
htmlor |
css, 技巧 |
19 Comments »
用了这么多年css（经验也算丰富），总觉得该写点什么。理论性太强的暂时写不了，只好先从简单直白的入手。css简写（css shorthand）就符合这个条件。
简单的说，css简写就是在等效的前提下，把多句css代码简化成一句。在我看来，简写css的好处有三：一是写起来方便（就像键盘快捷键）；二是简化代码；三是帮助你熟悉和深刻理解css。
闲话少说，书归正传。能够简写的css属性主要有以下几个：
font
简写：
font:italic small-caps bold 12px/1.5em arial,verdana;
等效于：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
（注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。）
background
简写：
background:#fff url(bg.gif) no-repeat fixed left top;
等效于：
background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
顺序：background-color | background-image | background-repeat | background-attachment | background-position
margin & padding
简写：
margin:1px 0 2em -20px;
等效于：
margin-top:1px;
margin-right:0;
margin-bottom:2em;
margin-left:-20px;
顺序：margin-top | margin-right | margin-bottom | margin-left
padding的简写和margin完全一样。
border
简写：
border:1px solid #000;
等效于：
border-width:1px;
border-style:solid;
border-color:#000;
顺序：border-width | border-style | border-color
这三句也是简写，等于是把四边的样式合而为一了。（关于四边的问题，下文有详细说明）
border-top / border-right / border-bottom / border-left
简写：
border-top:1px solid #000;
等效于：
border-top-width:1px;
border-top-style:solid;
border-top-color:#000;
（和border一样）
list-style
简写：
list-style:square outside url(bullet.gif);
等效于：
list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);
顺序：list-style-type | list-style-position | list-style-image
关于四边
有很多样式都涉及到了四边的问题，这里统一说明。
四边的简写一般如下：
padding:1px 2px 3px 4px;
等效于：
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
顺序：top | right | bottom | left
不论是边框宽度，还是边框颜色、边距等，只要css样式涉及四边，顺序通通都是“上右下左”（顺时针方向）。
如果四边的值省略一个，只写三个：
padding:1px 2px 3px;
则等效于：
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;
（省略的“左”值等于“右”）
如果四边的值省略两个：
padding:1px 2px;
则等效于：
padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;
（省略的“下”值等于“上”）
如果只有一个值：
padding:1px;
则等效于：
padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;
关于css简写就先写到这里，大家有什么问题欢迎与我交流。
August 21st, 2006 |
htmlor |
web, 技巧 |
50 Comments »
上feedburner随便逛逛，无意中看到一条提示：“别忘了坐直身体，还要时不时的休息会儿。有了健康的你，才有开心的我们。”（Remember to sit up straight and take frequent breaks. A healthy you is a happy us.） 简单的一句话，让我本有些郁闷的心情开朗起来。不由得多刷了几次页面（提示是随机显示的），看到了更多提示。其中有略带调侃的“订阅者周末不见了？这很正常，周一他们会回来的。”（Subscribers dipping on weekends? That’s normal; many subscribers return on Monday.） 还有申明“只此一家别无分号”的“请通过官方新闻了解我们，而不是花边小报。”（Read about us in the news, not the tabloids.）…… 都是精心挑选，让人一见难忘。
都说网站模式容易copy，“web 2.0一抄一个准”，怎么没见其他网站这么干、抄的这么准？如果能做到这般细致入微、关怀备至，用户怎会不甘之如饴、心花怒放？
既然feedburner让我开心，我就要回报它——为它宣传倒是一种不错的方式。
feedburner最基本的功能就是帮你烧制feed、提供永久地址，让你无论换多少次bsp都不用为feed地址变了而烦心。除了这个，其他的功能呢？
统计分析（Analyze）
把源feed地址提交给feedburner之后，就等着人来订阅吧。自己的哪些blog受欢迎、受哪些人欢迎，当然要了然于胸了。
- 概览（dashboard）
以柱状图的形式显示订阅状况。能够看到订阅者数量随天数的起起落落，直观又清晰。可以选择显示当天/最近7天/最近30天/所有时间的统计。还能看到哪些blog最受欢迎（点击数多）。
- 订阅者（subscribers）
以饼状图的形式显示订阅者的客户端类型（阅读器、email订阅、浏览器等）、数量和百分比（如下图）。可以看到每个客户端的简短介绍。
我的订阅者客户端分布：
- 实时访问（live hits）
记录feed实时的访问状况（最近25次访问）。包括阅读器抓取、浏览器下载、搜索引擎收录等。显示访问时间、客户端名称和国家。
- 聚合使用（item use）
记录feed内容被聚合器（aggregator）收录的状况。默认只有总数统计，要查看详细统计，得升级到完全统计（totalstats）才行。
- 非常规使用（uncommon uses）
记录“非常规”的抓取状况。根据feedburner的说明，“非常规”包括个人写的抓取程序、由别人feed拼成的blog和blog spam等。
- 标准统计（standardstats）
标准统计选项。统计项包括订阅者数量、阅读器类型、非常规使用、feed条目点击数和附件的下载数（podcast）等。
- 完全统计（totalstats）
完全统计选项（收费）。在标准统计的基础上，又增加了统计访问量、被聚合的条目使用、单个条目使用等状况。请查看完全统计和标准统计的具体差别。
优化（Optimize）
有了feed地址之后，要想办法使之更容易的订阅、更友好的显示，这时就需要优化了。
- 预览（your feed）
预览feed内容。跟在阅读器中的显示差不多。
- 源代码（xml source）
查看feed的xml源代码。
- 浏览器友好度（browser friendly）
优化feed在浏览器中的显示。经过此项优化之后，浏览器会把feed显示为页面（而不是一堆xml代码），方便预览（有些人会先看一眼再决定是否订阅）。可以选择页面模板，选择显示全文/只要标题，并写下自己的话。还能把feed转向到指定的地址。
想查看优化效果，请对比我的优化之前和优化之后的feed页面。
- 智能cast（smartcast）
此功能是专门为podcast设立的。可以针对itunes的podcast目录和yahoo media rss做具体设置。（没玩过podcast，不太明白）
- 智能feed（smartfeed）
把feed格式转换，变成多种阅读器都能兼容的版本。一个feed，大小阅读器通吃，最大限度的扩展了订阅者的范围。
- 第三方链接（feedflare）
通过一个flare（一个图片链接，显示在每篇feed的尾部），让订阅者更方便的对你的blog做些什么（如email给好友、提交给digg、收藏到del.icio.us等）。除了feedburner提供的官方flare，还有很多的flare可用，也可以自己添加。链接的显示顺序可以通过拖放调整，非常方便。
我使用的feedflares：
- 网摘（link splicer）
自动发布你收藏的链接（网摘）。提供网摘服务的帐号（支持del.icio.us、digg、my web等），feedburner就会在你的feed里自动添加网摘。可以选择有了新的网摘就发或者一天只发一次。
- 照片（photo splicer）
自动发布你的照片。提供照片服务的帐号（支持flickr、bussnet和webshots），feedburner就会在你的feed里自动添加照片。可以设置照片发布的数量，还可以只发布标有指定tag的照片。
- 地理标注（geotag your feed）
为你的feed标明地理位置。美国用户用邮编即可，其他用户需注明经度和纬度。
- logo图片（feed image burner）
指定一幅图片（url地址）作为你feed的logo（或banner）。它会显示在阅读器和feed页面中，链接到你指定的地址。
我的feed logo：
- 标题/描述生成（title/description burner）
重新设置feed标题和描述。适用于那些不满意原有的标题和描述但无法自行修改的用户（像新浪blog的feed就是没有描述的）。
- 转换格式（convert format）
把feed内容转换成标准格式（rss或atom，4种格式可选）。如果使用了smartfeed，则不推荐使用此项（因为smartfeed已经相当智能的把feed转换成了各种阅读器都能理解的格式）。
- 内容类型（content type）
设置feed文件的内容类型（即mime类型）。有多种类型可选，默认类型为与源feed相同。
- 摘要生成（summary burner）
自动截取内容生成摘要。可以设置最大截取字数，还能加上一个“teaser”（如“欲知详情，请点击此处”），链接到具体blog。
- 行情收录（tickerize）
股票行情自动收录。激活此功能之后，如果feed内容里含有股票代码（如ge是GE，yahoo是YHOO），feedburner会通知相关金融聚合器收录此feed。如果你写金融股票方面的blog比较多，就很方便了。（我是没用过）
- amazon id（amazon id burner）
当feed内容中含有链接到amazon目录的文字时，自动插入相关id。（不太明白什么意思）
推广（Publicize）
酒好也怕巷子深，feed经过优化之后还得推广，才能吸引订阅者，传播的更广。
- 推介页面（buzzboost）
生成html推介页面（包括标题、摘要、时间等）。激活此功能之后，会生成一段javascript代码，需要时嵌入页面即可。可以选择一页显示几篇、链接打开窗口、摘要字数等选项。
- 头条动画（headline animator）
生成一个gif动画，循环显示最近5篇blog的标题。可以选择普通版或email签名版。可惜不支持中文（显示乱码）。
- 通知（pingshot）
通知第三方服务。在抓取feed后，即时通知阅读器或搜索引擎更新数据，使订阅者更快的获知你的blog更新。支持technorati、bloglines等十余种服务。
- email订阅（email subscriptions）
提供email订阅。在feed更新之后，自动把文章用email发给用户。激活此功能之后，会生成一段html代码，嵌入页面中即可让人订阅。有人订阅之后，可以看到订阅者email列表。这其实是备份blog的一种不错的方式（我就正在用）。
- 订阅计数（feedcount）
生成一个gif动画，显示你的feed被订阅次数。能选择图片是静态还是动画，还能定制背景和文字的颜色。
我的订阅计数动画：
- api访问（awareness api）
设置第三方api访问你的feed数据的权限（允许/不允许）。
- 订阅图标（chicklet chooser）
提供feed图标和阅读器订阅图标。提供多达20种的阅读器接口，更方便的供人订阅。把html代码贴在页面中即可。
- 密码保护（password protector）
用密码保护feed。要使用此功能，阅读器得支持http认证。
- 创作共用（creative commons）
设置创作共用协议的选项（允许商业使用，允许修改等）。
赚钱（Monetize）
等你大受欢迎、订阅者足够多的时候，就可以考虑用feed赚钱了。你可以加入FAN（FeedBurner Ad Network），通过feed里放广告来赚钱。此服务暂不公开，需要向feedburner申请才行。如果你自信有这个实力，就可以去信申请了。
解决问题（Troubleshootize）
常在河边走，哪有不湿鞋？出了问题，自然得想办法解决。
- 帮助和提示（tips and tools）
这里有常见问题列表，还能重新同步feed（相当于重启系统。有些问题重新同步一下就好了），实在不行就去支持论坛求助。
- feed状况（feedmedic）
这里显示了feedburner在抓取你feed数据过程中遇到的问题和解决过程。其实就是下面提到的feedbulletin的预览。
帐户（Account）
任凭feed变换，总归要以人为本。
- 基本资料（account basics）
修改email地址、密码，设置安全问题等。
- 付费状况（pro payment info）
查看专业版的付费状况（如果你购买了专业版）。
- 自有域名（mybrand）
使用自己的域名（收费）。通过修改域名dns，让自己的域名指向feed地址。
- feed监测（feedbulletin）
提供一个订阅地址（http://feeds.feedburner.com/~u/用户名），让你时刻了解feed状况。每一次feedburner对源feed数据的抓取，成功或者失败（为什么失败），都会记录在案。假若出了问题，用户不再摸不着头脑、狂联系客服（像抓取donews的feed连接被重置这种问题，根本不必找客服人员），feedburner自然也乐得轻松自在。
除了以上这些，还有一些很实用的功能没有详谈，比如ping（发布新blog后通知feedburner马上抓取feed）等。
不写不知道，写出来真是吓一跳。原来feedburner功能这么强大，更别说它刚收购blogbeat（详情），今后的统计会更强了。善用feedburner的你，必然能拥有完美的feed体验。
当然，前提是gfw网开一面、刀下留人。