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

侯 震 侯 麗 李 姣

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

?

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

侯 震 侯 麗 李 姣

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

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

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

1 引言

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

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

2.1 概述

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

2.2 在閱讀體驗方面能增強閱讀友好性

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

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

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

2.4 在界面腳本編碼方面具備更強的適應性

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

表1 不同瀏覽器對HTML5主要標簽的支持效果

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

3.1 概述

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

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

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

圖1 使用標簽后對圖片放大縮小效果

3.3 跟隨式目錄導航

使用CSS3的垂直錨點標簽，讀者可對文章中的目錄進行鏈接，可以通過點擊目錄的方式瀏覽任意標題，見圖2。

圖2 使用CSS垂直錨點建立文章中標題的鏈接目錄

3.4 其他輔助功能

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

圖3 使用標注文章中的文字

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

4 結(jié)語

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

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

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

R-058

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