一、纽约时报都有哪些功能?

在firefox浏 览器下打开纽约时报,有一个地方很值得注意:“此网站(www.nytimes.com)提供了保存至您计算机以供脱机使用的数据。”从这句话很容易推断 出这是离线存储功能,阅读类产品没有网络连接情境下,用户还能继续浏览到一些更新的内容,对用户来说,这可是一个加分型的需求满足。

接下来我们看看这张图中的右边栏:

细 心的人会发现,鼠标悬停时,有些内容分类右边有实心圆点,而有些内容分类右边是空心圆点,这代表了什么?经过试验发现,这其实是有没有内容更新的一种提 示,实心圆点表示有内容更新,用户还没浏览过;空心圆点则表示当前分类下没有内容更新,这样做的好处就是给用户一种阅读提醒,便于用户选择合适的内容阅读,节约了时间。

点击列表中的某一篇文章,之后我们来看看纽约时报的文章终端页长什么样子?

细心的人会发现,右上角有个调节文字大小的ICON,左下角主要是社会化传播功能,如email推荐、分享到twitter和facebook。当然了,还有就是上下翻页功能。

火星人都知道,用户的阅读习惯各不相同,呈现多元化趋势,且看纽约时报是如何解决这个问题的,它主要使用了自定义的功能就解决了这个问题,且看纽约时报有多少种内容排版的模板。

 

 

一共有11种排版模板供用户自定义选择,这对满足用户多元化的阅读习惯又向前迈了一大步,这里面重点介绍priority、slideshow和gallery三种模板,顾名思义,priority指的是有 内容热度权重rank的排版方式,这跟新浪微博应用广场上的每讯阅读器里的微博内容权重rank排序是一个道理,都体现了一种根据内容热度来浏览的阅读习 惯;而slideshow指的是将文章内容的图片抓取出来,以幻灯片的形式展示,类似前端时间炒得比较火的flipboard效果,毕竟用户对图片的感知 优胜于纯文字内容;gallery指的是将内容中图片抓取出来组成相册的方式来组织文章内容的排版,flipboard和每讯阅读器都有此类排版效果,不 错从图片的美观角度来说,感觉每讯阅读器的图片排版效果略胜一筹。如下图所示:

二、纽约时报(在线版)的内容源从哪来?

很多人看到这个在线阅读产品之后,都在思考这些不同分类的内容是从哪来的,无独有偶,我仔细试验了纽约时报官方网站footer下的RSS订阅,惊奇地发现,在线版的内容正是来自这些RSS订阅源,当然还包括这些RSS订阅源的子内容源。看官看到这,不知道你们有什么好的商业模式闪现出来,此处略去N个字。。。这里面值得一提的是,内容分类里面有一个(纽约地区)基于地区地理位置的内容分类,难道跟LBS也有关系?这个留给看官去思考。

三、既然是基于HTML5技术,那么阅读体验咋样?

说到阅读体验,就不得不说纽约时报的自定义快捷键的功能,如下图所示:

纽约时报的快捷键功能还是很强大的,尤其是上面的翻页、上篇、下篇功能给用户带来了良好的阅读体验,国内的在线阅读器像QQ reader和每讯阅读器都有快捷键的功能,不过可以向纽约时报看齐一下。

总的来说,在线阅读类产品有两个核心要点:一是优质的内容、而是良好的阅读体验,如果再能解决跨终端平台的问题,用户阅读市场还是很客观的。期待国内能出一款优秀的在线阅读产品。

原文链接:http://www.alibuybuy.com/posts/55802.html

【编辑推荐】

【责任编辑:陈贻新 TEL:(010)68476606】

点赞 0

阅读全文 html,看看纽约时报是怎么用HTML 5设计在线阅读产品的相关推荐

  1. web课程设计网页规划与设计~在线阅读小说网页共6个页面(HTML+CSS+JavaScript+Bootstrap)...

    HTML期末大作业 ~ 大学生网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 临近期末, 你还在为HTML网页设计结课作业 ...

  2. 计算机控制技术在线,12毕业论文:计算机控制技术免费在线阅读

    <毕业论文:计算机控制技术.doc>由会员分享,可在线阅读全文,更多相关<12毕业论文:计算机控制技术免费在线阅读>请在www.woc88.com上搜索. 1.ionsreco ...

  3. python展开阅读全文_展开阅读全文 js 爬虫操作

    from selenium import webdriver import time import random from bs4 import * browser = webdriver.Chrom ...

  4. html点击阅读全文,【css】html+css给文章页,做阅读全文

    手机打开一些体验很好的网站的时候,当文章很长的时候,为了用户体验更好一点,都会出现"阅读全文"这些字样 所以在这里,就效仿做一下这样的效果把,会碰到几个问题需要解决的 1,我只想在 ...

  5. 【英语阅读】纽约时报 | 乔布斯是对的:手机和iPad杀死了个人电脑

    乔布斯是对的:手机和iPad杀死了个人电脑 Steve Jobs Was Right: Smartphones and Tablets Killed the P.C. I got an iPad Pr ...

  6. 纽约时报:雅虎财经远远超越 Google 财经

    纽约时报:雅虎财经远远超越 Google 财经 新浪科技导语:<纽约时报>网络版今日发表分析文章称,尽管 Google 已经完全超过了雅虎,但雅虎财经仍在财经服务网站领域占据着无可争议的领 ...

  7. 纽约时报订阅_在家创新:《纽约时报》的创客周

    纽约时报订阅 Maker Week is an annual tradition: New York Times employees in Data, Design, Marketing, Produ ...

  8. 纽约时报:人们正成为移动通讯的奴隶

    北京时间8月22日消息,纽约时报发表美国著名经济学家.政经评论家.电视节目主持人本•斯坦(Ben Stein)的评论文章,指出在现代生活中,人们因为无处不在的移动通讯,丧失独立思考.体会孤独的能力,正 ...

  9. 帝国cms重置管理员_重新设计《纽约时报》 CMS飞行员

    帝国cms重置管理员 1.什么是飞行员? (1. What Is Pilot?) For 10 weeks, I joined The New York Times's Story Formats t ...

最新文章

  1. 区块链中的“智能合约”有何应用?
  2. ROS学习笔记—-- catkin
  3. 比特币现金支持者为BCH引入了各种新概念
  4. System tuning中经常用到的一些Tcode
  5. mqtt服务器性能H3,运用 MQTT-JMeter 插件测试 MQTT 服务器性能
  6. 类似系统的UIActivityViewController显示方式的开源代码:HYActivityView
  7. mysql 数据库名称限制_mysql 数据库名称限制
  8. php+管道+pipe管道,angular2+管道pipe
  9. 牛客网 【每日一题】5月26日题目精讲 [JSOI2007]建筑抢修
  10. Flutter 图片选择器 SelectPhotoWidget
  11. echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图
  12. 3dmax软件怎么贴图
  13. 桌面太单调?一起用Python做个自定义动态壁纸,竟然还可以放视频!
  14. matlab无法复制图形到剪切板,cad图纸无法复制到剪贴板如何解决
  15. Android 热修复Bugly和Sophix介绍
  16. python根据题库答案自动答题_Selenium实现百度自动答题 懒人获取积分
  17. Ambiguous mapping. Cannot map ‘xxxController‘ method
  18. Android 10 添加第三方输入法为系统默认输入法
  19. 使用Unity编写传统ARPG游戏的人物操作方式
  20. Scikit-learn学习系列 | 1. sklearn的简要使用介绍与数据集获取

热门文章

  1. 从黑马刚毕业拿年薪45万!这个岗位开始高薪抢人了?
  2. Unity控制第三人称和相机的移动
  3. php xml expat,php 使用expat方式解析xml文件操作示例
  4. ros kinetic下网口类激光雷达传感器的配置
  5. BigDecimal加减乘除次方运算及比较大小
  6. 又一公司被曝监控员工手机:短信照片微信聊天记录都能获取!
  7. ubuntu18.04+realtek8822CE解决wifi突然搜不到问题
  8. matlab音乐键盘模拟,Matlab课程设计报告--MATLAB GUI的音乐键盘仿真
  9. 贵州明德学院节能项目预付费云平台系统的研究与应用
  10. win10小课堂:如何向U盘里拷贝大文件?