调研分享：Flipboard的使用特点和页面信息抽取机制

释放双眼，带上耳机，听听看~！

Flipboard是什么？

封面

　　标榜为“社会化杂志”，是ipad上的app应用，可以订阅twitter和facebook上的人、群组和话题，可以订阅flipboard（后面简称flip）指定的杂志类别，也可以订阅高质量的媒体站点，通过这些渠道，用户可以获得包括新闻、图片、视频、博客、微博等形式的数据，通过触屏点击进行预览、翻屏等操作，操作简单，内容组织图文并茂，类似于传统的杂志。

内容页

　　创始人麦克的最初想法是将杂志的阅读体验转移成为电子阅读体验，ipad的大屏和触屏交互能够很好支持杂志形式的电子阅读体验，也促成了flip在ipad上的发布。

　　杂志形态的阅读体验并不是flip的首创，ipad的用户体验更好地支撑了这种产品形态。flip的核心价值在于用户对数据的筛选、数据的组织和展现。

Flipboard使用分析

　　Flip可以订阅twitter和facebook上的人、群组和话题，也是“社会化”的根本原因。首先，这种订阅是用户的主动订阅，代表了用户信息消费的个性渠道，有别于传统站点运营产生的一致内容；其次，在twitter和facebook这种社会化平台，每个用户是信息的消费者，也是信息的生产者，信息传递的规模和及时性都远远高于传统的one to N模式；同时，用户的关注（follow）和信息的转发（retweet）机制使得用户的媒体价值以及信息的价值都能被用户行为所验证。所以flip筛选出来的信息在个性需求满足、及时性和覆盖、价值排序上都有着social平台的天生优势。（实际使用被墙，以上分析属于个人感受）

　　如果social平台筛选出来的数据都是火星文、spam等，flip的社会化价值会大打折扣。在www 2010的“What is Twitter, a Social Network or a News Media?”文章中，作者通过对twitter 4170万的用户，14.7亿的follow关系，4262个流行话题和1.06亿个消息进行了量化分析，得出的结论是twitter上85%的热门话题都是头条新闻（突发时效性？）和持续受关注的新闻（泛时效性or周期时效性？比如球队、品牌、比赛等），说明了social平台产生的信息是具备新闻价值的。这种新闻价值的挖掘还是具备一定的技术门槛，flip收购了ellerdale，后者是家用twitter数据流做趋势和热点分析的公司，每天可以索引分析5000万的tweet数据（2010.3的报道），并进行实时话题分析。

　　Flip还可从指定的站点集合中订阅某个站点的新闻，比如新闻、图片、艺术、科技等各个领域的知名站点，这些站点在其领域上都有着高知名度，属于精品资源，比如http://www.techcrunch.com，http://www.spin.com/，http://www.readwriteweb.com/。由于Flip只有9个订阅版块，如果只能订阅站点的话，数据来源会大受限制，所以flip搭建了分类体系，对数据进行聚合并提供给用户进行flip类别订阅。下面是flip的分类体系，第一列是一级类别，第二列是flip在一级类别下聚合的二级类别。

　News
　　Flippolitics
　　business&finance
　　flipbusiness
　　flipfinance
　　tech&science
　　flipgreen
　　flipgaming
　　cool curators(趣味性内容)
　　flipcool
　　art&photo
　　flipart
　　design
　　lifestyle
　　fliphome
　　flipauto
　　entertainment
　　flipfame，pop culture and celebrity gossip
　　flipmusic
　　flipread，book reviews
　　flipfilm
　　travel&adventure
　　flip trip（blog也行）
　　food&dining
　　flipeats

　　在类别的具体组织上，包含了中文资讯中不多见的趣味性、设计和艺术等类别；类别划分主要按照数据来源站点的内容进行组织的，不同类别间的数据划分并不具备独立性。

　　social订阅的数据来自个人social平台上关注对象、好友的资讯，订阅站点的数据来自首页定向收录的数据（至少从techcrunch,readwriteweb等几个站点的数据展现来看是这样的）。在展现时，通过下面的timeline滑动可以选择不同时间段的新闻，不同订阅源的新闻大体按照资讯出现的时间序进行排序（social订阅源不得而知，筛选考虑因素会更多考虑用户参与），资讯的展现形式包括图片、视频、文本、微博等，比较突出富媒体资源的考虑，也符合杂志的完整体验。Flip同时会在服务器端预先处理这些资讯，会考虑是否出图，出哪张图，是否出增长摘要等问题，同时在内容的选择和排版上融合，用户可以通过资讯标题（加粗），压缩后的图片，文本摘要来了解资讯内容，点击后通过预览了解资讯的完整内容，类似于无线百度新闻的tc正文页。

　　flip是个性化订阅平台，可以基于social关系订阅，也可以通过flip维护的高质量数据源进行订阅。通过social平台的用户参与，让用户行为对媒体价值作出筛选。完成数据的定向收录、分析后，通过杂志形态展现。在商业模式上，个性化平台能够提高广告推荐命中用户需求的精确度，social平台的用户参与和好友推荐可能会激发更多潜在购买力（fashion对大多人来说就是流行和盲从），同时时尚、游戏、旅行等频道内容同广告有更高的相关性，以及杂志形态对各种富媒体广告形式支持，所以flip的商业模式还是有很多尝试的可能。

　　杂志形态对数据质量提出了高要求，所以flip面对的最大技术问题是数据筛选、组织和筛选的问题。另外个性化平台的隐私问题，以及flip自身并不产生内容而可能导致的版权问题可能比技术问题更尖锐。

Flipboard页面信息抽取

　　由于social数据组织和筛选部分没有看见，其他数据源的数据和展现基本依照时间序进行组织。所以只具体介绍一下flip的页面信息抽取，类似于我们的正文提取。

　　Flip的技术类似于Safari 5的阅读器功能和Arc90的readability功能，如下图描述。

原始页面

点击safari 5导航栏后的阅读器预览效果

　　点击readability插件以后页面预览效果

　　两者的功能类似于flipboard的页面预览功能，把正文、图片等主要内容保留，把广告、导航链接等内容去除。Safari 5开始支持阅读器功能，但只能对页面结构良好的网页进行阅读预览，比如http://video.sina.com.cn/p/ent/y/2010-08-22/180661085937.html，该新闻是视频新闻，包含视频和文本描述，但并不支持预览。Readability是arc90出品的一个浏览器插件，处理效果也类似，比如http://www.yn.xinhuanet.com/video/2010-08/22/content_20686684.htm会把声明信息提取出来。虽然flip的页面抽取技术不等同于上述两者，但页面抽取技术本身比较成熟，不依赖wrapper和模板的全自动提取技术不具备绝对的泛化能力，需要针对具体问题特制一些解决方案。

　　以readability为例进行分析(http://code.google.com/p/arc90labs-readability)，readability是一个js库，通过自动化提取算法对网页的dom树进行改写，并在浏览器上展现页面抽取后的网页。工作流程：

/***定义一些规则***/

unlikelyCandidates:/combx|comment|community|disqus|extra|foot|header|

menu|remark|rss|shoutbox|sidebar|sponsor|ad-break|agegate|pagination|

pager|popup|tweet|twitter/i,

okMaybeItsACandidate:/and|article|body|column|main|shadow/i,

positive: /article|body|content|entry|hentry|main|page|pagination|post|

text|blog|story/i,

negative:/combx|comment|com-|contact|foot|footer|footnote|masthead|

media|meta|outbrain|promo|related|scroll|shoutbox|sidebar|sponsor|

shopping|tags|tool|widget/i,

　　1．清除JavaScript，css等html标签

　　2．根据定义的规则集合过滤结点，根据id和class字符串特征进行过滤

　　3．结点权重计算

　　　　a) 结点类型调权

switch(node.tagName) {
    case 'DIV':
        node.readability.contentScore += 5;
        break;
    case 'PRE':
    case 'TD':
    case 'BLOCKQUOTE':
        node.readability.contentScore += 3;
        break;
    case 'ADDRESS':
    case 'OL':
    case 'UL':
    case 'DL':
    case 'DD':
    case 'DT':
    case 'LI':
    case 'FORM':
        node.readability.contentScore -= 3;
        break;
    case 'H1':
    case 'H2':
    case 'H3':
    case 'H4':
    case 'H5':
    case 'H6':
    case 'TH':
        node.readability.contentScore -= 5;
        break;
}

　　　　b)结点Id和Class特征调权

/* Look for a special classname */
if (e.className != "")
{
    if(e.className.search(readability.regexps.negativeRe) !== -1)
        weight -= 25;
    if(e.className.search(readability.regexps.positiveRe) !== -1)
        weight += 25;
}
/* Look for a special ID */
if (typeof(e.id) == 'string' && e.id != "")
{
    if(e.id.search(readability.regexps.negativeRe) !== -1)
        weight -= 25;
    if(e.id.search(readability.regexps.positiveRe) !== -1)
        weight += 25;
}

　　　　c)逗号分隔调权

contentScore += innerText.split(',').length;

　　　　d)文本长度调权

contentScore += Math.min(Math.floor(innerText.length / 100), 3);

　　　　e) 权重向父母转移

parentNode.readability.contentScore += contentScore;
grandParentNode.readability.contentScore += contentScore/2;

　　　　f)链接文本比的权重调整

倍积因子 = 1 – 链接文本比
contentScore = contentScore * (1-node.LinkDensity);

　　4．定位文本统领文本结点，兄弟结点考虑

　　ContentScore最大的结点作为文本统领结点Max；

　　对Max的兄弟结点进行尝试，contentScore满足一定阈值且满足一些强制要求者，加入到dom树中。

　　5．展示新的dom树

　　上述的网页抽取流程类似于无线新闻TC页的展现，算法框架优化借鉴价值有限，个别的特征选取（逗号分隔调权，权重向父母转移等）上可以借鉴考虑。

给我们的启发

　　社交性平台的媒体价值，一方面可以直达个人资讯需求，另一方面通过用户参与可以对资讯价值进行传递、推荐和筛选，并保证了即时性。新浪、搜狐、网易、腾讯、凤凰、和讯、搜房等门户都开始布局微博是一个佐证。

　　数据分类组织值得我们参考，比如趣味性、设计、时尚、艺术、旅游等类别的定义，可以很好的丰富我们的数据体系，提供传统门户无法提供的服务。Flip在数据分类组织上通过站点的定向收录，比较多地考虑了来源站点的属性和价值，值得参考。

　　Flip在收录源上是精简版本的百度新闻，内容贡献站点远少于我们。在资源组织上是放大版本的百度新闻，一方面更多考虑了图片、视频、博客等各种体裁的资源，另一方面提供了更丰富和个性化的资源类别体系，我们可以朝这个方向尝试。

　　技术上，social平台的数据组织还没有揭开神秘面纱，在定向展现、分析和收录环节，我们的技术储备没有问题，个别细节可以借鉴flip的做法。

参考资料

[1] What is Twitter, a Social Network or a News Media?,WWW 2010

[2]http://cn.advfn.com/news_Ellerdale-Turns-Twitter-Stream-Into-Trends-and-Hot-Topics_41777724.html

[3] http://hidigi.net/post/ipad-we-media-flipboard.html

[4] http://arc90.com/

[5] http://article.yeeyan.org/view/105279/120538?all=1

[6] http://shangjin.blog.techweb.com.cn/archives/532

[7] http://mmdays.com/2010/07/22/social-media-flipboard-for-ipad/

[8] http://tech.163.com/10/0726/14/6CHA0K9L000915BD.html

[9] http://code.google.com/p/arc90labs-readability

By yueyifan

{{userData.name}}已认证

Flipboard是什么？

Flipboard使用分析

Flipboard页面信息抽取

给我们的启发

参考资料

谷歌浏览器(Google Chrome)各版本以及历史版本下载

python爬虫报错：(Caused by SSLError(SSLEOFError(8, ‘EOF occurred in violation of protocol (_ssl.c:1129)’)))解决

命令（CMD）终端的清屏/清空命令/快捷键

Python从列表中随机获取元素方法

python错误: Object of type * is not JSON serializable解决

github访问速度慢解决方法

SEO优化技巧：首页链接nofollow

WordPress友情链接添加nofollow选项方法

如何根据http请求信息区分访问用户的国家、语言信息

前端基础视频教程

Python requests 异常Max retries exceeded with url: 请求地址… (Caused by SSLError(SSLCertVerificationError(1, ‘[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1129)’)))”))}解决

WordPress重新生成缩略图插件推荐：Regenerate Thumbnails