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

侯 震 侯 麗 李 姣

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

?

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

侯 震 侯 麗 李 姣

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

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

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

1 引言

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

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

2.1 概述

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

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

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

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

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

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

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

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

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

3.1 概述

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

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

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

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

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

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

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

3.4 其他輔助功能

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

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

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

4 結(jié)語(yǔ)

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

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

R-058

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