侯 震 侯 麗 李 姣

(中國醫(yī)學(xué)科學(xué)院醫(yī)學(xué)信息研究所 北京 100020)

?

HTML5在醫(yī)學(xué)信息展示中的應(yīng)用初探*

侯 震 侯 麗 李 姣

(中國醫(yī)學(xué)科學(xué)院醫(yī)學(xué)信息研究所 北京 100020)

以PubReader為例，介紹HTML5在醫(yī)學(xué)信息展示中的典型應(yīng)用，通過醫(yī)學(xué)信息展示的案例闡明HTML5技術(shù)在界面交互、智能終端支撐、多媒體呈現(xiàn)和本地存儲等方面的優(yōu)勢，對未來的發(fā)展趨勢及存在的不足進(jìn)行展望。

HTML5； 醫(yī)學(xué)信息；信息展示；用戶交互；移動閱讀

1 引言

HTML5是一種新型的互聯(lián)網(wǎng)標(biāo)記語言，也是一種標(biāo)準(zhǔn)，2014年10月由萬維網(wǎng)聯(lián)盟(World Wide Web Consortium，W3C)完成標(biāo)準(zhǔn)制定，是截至目前HTML最新的修訂版本。與之前的HTML相關(guān)標(biāo)準(zhǔn)相比，HTML5在對圖片和多媒體內(nèi)容的展示等方面提供了良好的支持，對不同瀏覽器下網(wǎng)頁的展示具有廣泛的兼容性，能為不同智能終端下網(wǎng)頁的展示提供更好的適應(yīng)性；同時，HTML5規(guī)范中新增的標(biāo)簽也被越來越多的人使用[1]。本文重點(diǎn)探討HTML5在醫(yī)學(xué)信息展示中的應(yīng)用方式，通過醫(yī)學(xué)信息展示的案例闡明HTML5技術(shù)在界面交互、智能終端支撐、多媒體呈現(xiàn)和本地存儲等方面的優(yōu)勢。

2 HTML5在醫(yī)學(xué)信息展示中的典型應(yīng)用

2.1 概述

PubReader[2]是美國國立醫(yī)學(xué)圖書館制作的網(wǎng)上閱讀醫(yī)學(xué)相關(guān)文章的平臺，其應(yīng)用最新的HTML5技術(shù)，增強(qiáng)了醫(yī)學(xué)文章的可讀性[3]，方便了讀者對文章結(jié)構(gòu)、內(nèi)容、重點(diǎn)的了解。而且隨著智能終端和移動網(wǎng)絡(luò)的發(fā)展，PubReader在移動平臺展現(xiàn)上替代了傳統(tǒng)的Web演示文稿，適用于不同屏幕的移動終端[4]；當(dāng)然也可用在臺式機(jī)和筆記本電腦上，更能在多種瀏覽器下使用。在HTML5和CSS3的支持下，PubReader使得信息呈現(xiàn)方式更加友好，方便讀者對醫(yī)學(xué)信息的瀏覽與閱讀。

2.2 在閱讀體驗(yàn)方面能增強(qiáng)閱讀友好性

HTML5使得文章在網(wǎng)頁上的呈現(xiàn)更簡潔，更容易閱讀，讀者根據(jù)屏幕的大小自行調(diào)節(jié)文章的呈現(xiàn)方式和文字大?。慌c傳統(tǒng)在線閱讀文章方式相比，在PubReader上瀏覽醫(yī)學(xué)文章有更多方式，既允許使用鼠標(biāo)的滾輪和方向鍵上下翻動外[5]，也可以像翻書一樣左右翻動；CSS3為PubReader提供多種分頁效果，隨讀者的閱讀習(xí)慣，可自由切分文章的版面。

2.3 在圖片展示方面更加靈活多變

PubReader運(yùn)用HTML5技術(shù)對文章中的圖片展示方式進(jìn)行改進(jìn)，傳統(tǒng)文章中圖片是直接粘貼在網(wǎng)頁中的，如讀者想要放大觀察圖片，只能通過下載或者放大瀏覽器的方法；而PubReader通過使用HTML5對圖片新的注解方式，讀者只需點(diǎn)擊圖片就能實(shí)現(xiàn)對其的放大，并且可以獲得圖片的相關(guān)信息(如格式、分辨率等)；此種展現(xiàn)方法對移動終端也是非常方便[6]，可以通過減小圖片的分辨率來節(jié)約讀者的流量；讀者可將文章中出現(xiàn)的圖片拖拽到相關(guān)位置與相關(guān)段落一起瀏覽，顯示方式可以設(shè)為完全填充此區(qū)域或按原大小拖拽；當(dāng)讀者使用移動設(shè)備瀏覽某些網(wǎng)站時，經(jīng)常發(fā)現(xiàn)網(wǎng)站圖片被一個紅叉代替，這主要因?yàn)橐苿釉O(shè)備無法使用由FLASH構(gòu)成的較大圖片組合，而HTML5方便地解決了這一點(diǎn)，它無需借助FLASH就能把圖片生動有趣地呈獻(xiàn)給不同終端的讀者[7]。

2.4 在界面腳本編碼方面具備更強(qiáng)的適應(yīng)性

表1為在Windows系統(tǒng)下不同種類和不同版本瀏覽器對HTML5中標(biāo)簽的支持情況[8]。以前為適應(yīng)不同瀏覽器，一篇文章或許要編碼多次[9]；現(xiàn)如今有了HTML5技術(shù)的幫助，網(wǎng)頁只需一次編碼就能適應(yīng)很多的瀏覽器[10]。

表1 不同瀏覽器對HTML5主要標(biāo)簽的支持效果

3 實(shí)踐探索：面向公眾的醫(yī)學(xué)信息展示

3.1 概述

隨著健康理念的日益普及，公眾對醫(yī)學(xué)信息有著更加強(qiáng)烈的需求，亟需制作面向公眾的醫(yī)學(xué)信息展示。生動形象的展示醫(yī)學(xué)信息可以幫助公眾理解醫(yī)學(xué)健康知識、促進(jìn)病患溝通、提高公眾健康素養(yǎng)[11]。在基于PubReader的框架下，使用HTML5和CSS3技術(shù)，制作了一篇介紹糖尿病的網(wǎng)頁，此網(wǎng)頁擁有如下功能，能方便公眾獲取醫(yī)學(xué)相關(guān)信息，并提升公眾對健康信息的理解與接收能力。

3.2 優(yōu)化圖片的展示方式

使用HTML5中新添加的圖片標(biāo)簽[12]，對文章中出現(xiàn)的圖片實(shí)現(xiàn)放大、縮小的瀏覽效果，讀者可按自身需求任意放大圖片，見圖1。

圖1 使用標(biāo)簽后對圖片放大縮小效果

3.3 跟隨式目錄導(dǎo)航

使用CSS3的垂直錨點(diǎn)標(biāo)簽，讀者可對文章中的目錄進(jìn)行鏈接，可以通過點(diǎn)擊目錄的方式瀏覽任意標(biāo)題，見圖2。

圖2 使用CSS垂直錨點(diǎn)建立文章中標(biāo)題的鏈接目錄

3.4 其他輔助功能

使用CSS3的字體標(biāo)簽，讀者可對文章中的文字大小進(jìn)行縮放，方便特殊人群對文章的瀏覽。使用HTML5的標(biāo)記標(biāo)簽，讀者可對文章中的文字使用不同顏色進(jìn)行高亮標(biāo)注，標(biāo)引自己感興趣的段落，見圖3。

圖3 使用標(biāo)注文章中的文字

使用HTML5的本地保存技術(shù)，讀者可對已標(biāo)記的文章進(jìn)行本地儲存，方便瀏覽。HTML5與之前的HTML4技術(shù)相比，在向公眾傳播醫(yī)學(xué)信息方面有了很大改進(jìn)。HTML5可以省去大量人工編寫代碼的工作，提升了醫(yī)學(xué)信息的流通速度，增加了醫(yī)學(xué)信息的網(wǎng)站的可用性，使得傳播醫(yī)學(xué)信息類的網(wǎng)站更具活力，能吸引更多的公眾來使用網(wǎng)站。

4 結(jié)語

由于HTML5擁有良好的屏幕適應(yīng)性，能適應(yīng)在移動客戶端、筆記本電腦、PC機(jī)等多種終端設(shè)備的不同分辨率上進(jìn)行展示，能為讀者帶來一個無縫的網(wǎng)站瀏覽體驗(yàn)，因此在以后制作有關(guān)醫(yī)學(xué)信息網(wǎng)站的過程中，開發(fā)者需考慮網(wǎng)站結(jié)構(gòu)、瀏覽方式在不同硬件中的轉(zhuǎn)換。隨著信息科技的發(fā)展，智能終端已經(jīng)變得便攜化、移動化，越來越多的人習(xí)慣于從智能終端上獲取信息，由于HTML5將應(yīng)用功能直接嵌入內(nèi)核(HTML5允許讀者在瀏覽器內(nèi)開發(fā)應(yīng)用)，未來的智能終端將由瀏覽器占主導(dǎo)地位。HTML5在將來也許會替代其他的媒體框架，讀者在瀏覽帶有這種媒體的網(wǎng)頁時，不再需要安裝FLASH等控件，從而提高網(wǎng)頁的適應(yīng)性。此外，由于HTML5最新的本地儲存技術(shù)使之存在安全隱患，能實(shí)時記錄讀者在網(wǎng)頁上瀏覽的信息，給讀者的信息安全帶來一定威脅，因此HTML5仍需在可靠性、兼容性、安全性等方面進(jìn)行改進(jìn)[13]。

1 Jonathan Feinberg[EB/OL].[2015-01-10].http://www.wordle.net/.

2 ePublish[EB/OL].[2015-01-10].http://www.ncbi.nlm.nih.gov/pmc/about/PubReader/.

3 Ondov B D,Bergman N H, Phillippy A M,Interactive Metagenomic Visualization in A Web Browser[J]. BMC Bioinformatics，2011，(12): 385.

4 White J.Going Native (or not): five questions to ask mobile application developers[J].Australas Med J, 2013， 6(1): 7-14.

5 Pak T R, Roth F R.ChromoZoom: aflexible, fluid, web-based genome browser[J].Bioinformatics, 2013,29(3): 384-386.

6 Frant L,Goldstein B, Ma Y, et al.MedlinePlus Mobile: consumer health information on-the-go[J].IT Prof, 2012, 14(3): 44-49

7 Vercruysses, Venkatesan A, Kuiper M.OLSVis: an animated, interactive visual browser for bio-ontologies[J]. BMC Bioinformatics, 2012, (13): 116.

8 HTML5 TEST[EB/OL]. [2015-01-10].http://html5test.com/compare/browser/chrome06.html.

9 深度分析HTML5在移動開發(fā)方面的發(fā)展?fàn)顩r[EB/OL].[2015-01-10].http://www.evget.com/zh-CN/info/catalog/16374.html.

10 主流瀏覽器CSS3/HTML5兼容性清單[EB/OL].[2015-01-10].http://tools.yesky.com/233/30105733.shtml.

11 侯震,侯麗,李姣.醫(yī)學(xué)美術(shù)作品的創(chuàng)作與管理[J].中國醫(yī)學(xué)教育技術(shù)，2013,27(5)：614-617

12 Sinha A U, Armstrong S A.iCanPlot: visual exploration of high-throughput omics data using interactive canvas plotting[J].PLoS One, 2012, 7(2): e31690.

13 Leon P S, Knock S A, Woodman M M. The Virtual Brain: a simulator of primate brain network dynamics[J]. Front Neuroinform, 2013, (7): 10.

Exploration on the Application of HTML5 in Medical Information Display

HOUZhen,HOULi,LIJiao，

InstituteofMedicalInformation,ChineseAcademyofMedicalSciences,Beijing100020,China

Taking PubReader as an example, the paper introduces typical applications of HTML5 in displaying medical information. By cases in medical information display, it illustrates advantages of HTML5 in interface alternation, intelligent terminal support, multimedia presentation, and local storage, etc. It also predicts its future development tendency and disadvantages.

HTML5; Medical information; Information display; User interaction; Mobile reading

2015-04-20

侯震,學(xué)士;通訊作者：李姣，博士。

國家科技支撐計劃課題“公眾健康知識整合與服務(wù)技術(shù)研究與應(yīng)用”(項(xiàng)目編號：2013BAI06B01)。

R-058

A 〔DOI〕10.3969/j.issn.1673-6036.2015.09.012