紐約時(shí)報(bào)是怎么用HTML5設(shè)計(jì)在線閱讀產(chǎn)品的

這篇文章將為大家詳細(xì)講解有關(guān)紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的安徽網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!

一、紐約時(shí)報(bào)都有哪些功能?

在firefox瀏 覽器下打開紐約時(shí)報(bào),有一個(gè)地方很值得注意:“此網(wǎng)站(www.nytimes.com)提供了保存至您計(jì)算機(jī)以供脫機(jī)使用的數(shù)據(jù)?!睆倪@句話很容易推斷 出這是離線存儲(chǔ)功能,閱讀類產(chǎn)品沒有網(wǎng)絡(luò)連接情境下,用戶還能繼續(xù)瀏覽到一些更新的內(nèi)容,對(duì)用戶來說,這可是一個(gè)加分型的需求滿足。

接下來我們看看這張圖中的右邊欄:

紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的

細(xì) 心的人會(huì)發(fā)現(xiàn),鼠標(biāo)懸停時(shí),有些內(nèi)容分類右邊有實(shí)心圓點(diǎn),而有些內(nèi)容分類右邊是空心圓點(diǎn),這代表了什么?經(jīng)過試驗(yàn)發(fā)現(xiàn),這其實(shí)是有沒有內(nèi)容更新的一種提 示,實(shí)心圓點(diǎn)表示有內(nèi)容更新,用戶還沒瀏覽過;空心圓點(diǎn)則表示當(dāng)前分類下沒有內(nèi)容更新,這樣做的好處就是給用戶一種閱讀提醒,便于用戶選擇合適的內(nèi)容閱讀,節(jié)約了時(shí)間。

點(diǎn)擊列表中的某一篇文章,之后我們來看看紐約時(shí)報(bào)的文章終端頁長(zhǎng)什么樣子?

紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的

細(xì)心的人會(huì)發(fā)現(xiàn),右上角有個(gè)調(diào)節(jié)文字大小的ICON,左下角主要是社會(huì)化傳播功能,如email推薦、分享到twitter和facebook。當(dāng)然了,還有就是上下翻頁功能。

火星人都知道,用戶的閱讀習(xí)慣各不相同,呈現(xiàn)多元化趨勢(shì),且看紐約時(shí)報(bào)是如何解決這個(gè)問題的,它主要使用了自定義的功能就解決了這個(gè)問題,且看紐約時(shí)報(bào)有多少種內(nèi)容排版的模板。

紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的 紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的

紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的 紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的

一共有11種排版模板供用戶自定義選擇,這對(duì)滿足用戶多元化的閱讀習(xí)慣又向前邁了一大步,這里面重點(diǎn)介紹priority、slideshow和gallery三種模板,顧名思義,priority指的是有 內(nèi)容熱度權(quán)重rank的排版方式,這跟新浪微博應(yīng)用廣場(chǎng)上的每訊閱讀器里的微博內(nèi)容權(quán)重rank排序是一個(gè)道理,都體現(xiàn)了一種根據(jù)內(nèi)容熱度來瀏覽的閱讀習(xí) 慣;而slideshow指的是將文章內(nèi)容的圖片抓取出來,以幻燈片的形式展示,類似前端時(shí)間炒得比較火的flipboard效果,畢竟用戶對(duì)圖片的感知 優(yōu)勝于純文字內(nèi)容;gallery指的是將內(nèi)容中圖片抓取出來組成相冊(cè)的方式來組織文章內(nèi)容的排版,flipboard和每訊閱讀器都有此類排版效果,不 錯(cuò)從圖片的美觀角度來說,感覺每訊閱讀器的圖片排版效果略勝一籌。如下圖所示:

紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的

二、紐約時(shí)報(bào)(在線版)的內(nèi)容源從哪來?

很多人看到這個(gè)在線閱讀產(chǎn)品之后,都在思考這些不同分類的內(nèi)容是從哪來的,無獨(dú)有偶,我仔細(xì)試驗(yàn)了紐約時(shí)報(bào)官方網(wǎng)站footer下的RSS訂閱,驚奇地發(fā)現(xiàn),在線版的內(nèi)容正是來自這些RSS訂閱源,當(dāng)然還包括這些RSS訂閱源的子內(nèi)容源??垂倏吹竭@,不知道你們有什么好的商業(yè)模式閃現(xiàn)出來,此處略去N個(gè)字。。。這里面值得一提的是,內(nèi)容分類里面有一個(gè)(紐約地區(qū))基于地區(qū)地理位置的內(nèi)容分類,難道跟LBS也有關(guān)系?這個(gè)留給看官去思考。

三、既然是基于HTML5技術(shù),那么閱讀體驗(yàn)咋樣?

51CTO推薦專題:HTML 5 下一代Web開發(fā)標(biāo)準(zhǔn)詳解

說到閱讀體驗(yàn),就不得不說紐約時(shí)報(bào)的自定義快捷鍵的功能,如下圖所示:

紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的

紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的

紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的

紐約時(shí)報(bào)的快捷鍵功能還是很強(qiáng)大的,尤其是上面的翻頁、上篇、下篇功能給用戶帶來了良好的閱讀體驗(yàn),國(guó)內(nèi)的在線閱讀器像QQ reader和每訊閱讀器都有快捷鍵的功能,不過可以向紐約時(shí)報(bào)看齊一下。

總的來說,在線閱讀類產(chǎn)品有兩個(gè)核心要點(diǎn):一是優(yōu)質(zhì)的內(nèi)容、而是良好的閱讀體驗(yàn),如果再能解決跨終端平臺(tái)的問題,用戶閱讀市場(chǎng)還是很客觀的。期待國(guó)內(nèi)能出一款優(yōu)秀的在線閱讀產(chǎn)品。

關(guān)于紐約時(shí)報(bào)是怎么用HTML 5設(shè)計(jì)在線閱讀產(chǎn)品的就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。

當(dāng)前文章:紐約時(shí)報(bào)是怎么用HTML5設(shè)計(jì)在線閱讀產(chǎn)品的
網(wǎng)站鏈接:http://bm7419.com/article26/gejicg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、商城網(wǎng)站、搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作網(wǎng)站內(nèi)鏈

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管