基于HTML5的企業(yè)WebApp設(shè)計(jì)與實(shí)現(xiàn)

周森鵬，陸正球，張城，王溢達(dá)

（寧波大紅鷹學(xué)院，寧波 31517）

基于HTML5的企業(yè)WebApp設(shè)計(jì)與實(shí)現(xiàn)

周森鵬，陸正球，張城，王溢達(dá)

（寧波大紅鷹學(xué)院，寧波 31517）

隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，WebApp以極佳的用戶體驗(yàn)和交互得到越來(lái)越多使用者的認(rèn)可。采用HTML5技術(shù)設(shè)計(jì)實(shí)現(xiàn)GE公司的WebApp，為該公司科技產(chǎn)品的展示提供一個(gè)快捷入口，使得參觀的用戶只需掃描二維碼即可瀏覽與使用。在提升公司形象的同時(shí)，也讓參觀用戶深入了解相應(yīng)的科技產(chǎn)品。

HTML5；WebApp；二維碼

0 引言

隨著移動(dòng)互聯(lián)時(shí)代和云計(jì)算時(shí)代的到來(lái)，3G/4G技術(shù)和云計(jì)算技術(shù)都給我們的生活帶來(lái)了巨大的改變，手機(jī)的數(shù)據(jù)傳輸速度也有了質(zhì)的飛越，且其所具備的功能也越來(lái)越多元化[1]。與此同時(shí)，Web[2]以其跨平臺(tái)的優(yōu)點(diǎn)，使得無(wú)論是在Android還是iOS平臺(tái)上，都能很好地兼容，不像手機(jī)應(yīng)用需要適應(yīng)多個(gè)系統(tǒng)與版本，并且相對(duì)WebApp不僅需要極高的開(kāi)發(fā)成本，而且下載以及頻繁的升級(jí)版本都會(huì)對(duì)用戶造成困擾。

WebApp[3]是基于Web的系統(tǒng)和應(yīng)用，是指通過(guò)使用Web和Web瀏覽器技術(shù)，跨越網(wǎng)絡(luò)（互聯(lián)網(wǎng)或內(nèi)聯(lián)網(wǎng)）完成一個(gè)或多個(gè)任務(wù)的應(yīng)用程序，通常需要使用Web瀏覽器。WebApp是Google在設(shè)計(jì)Chrome時(shí)提出的概念，是Google推廣云計(jì)算的其中一步，具有輕松跨平臺(tái)、開(kāi)發(fā)效率高成本低、應(yīng)用更豐富、無(wú)需安裝和更新等優(yōu)勢(shì)。

1 需求分析

為了更好地展示企業(yè)的產(chǎn)品，避免企業(yè)App給用戶帶來(lái)的麻煩，在開(kāi)發(fā)初期就拋棄原有的App開(kāi)發(fā)，轉(zhuǎn)而通過(guò)網(wǎng)頁(yè)的方式進(jìn)行展示，用戶只需要輸入網(wǎng)址或者掃描二維碼就能夠簡(jiǎn)單方便地使用，且HTML5的自適應(yīng)性能夠很好地適應(yīng)不同分辨率的手機(jī)屏幕，讓所有手機(jī)用戶都能夠看到不變形、簡(jiǎn)單、靈活的操作，具有良好用戶體驗(yàn)，讓參觀用戶在良好的第一印象下深入了解GE的科技產(chǎn)品，將科技產(chǎn)品帶入普通群眾的視線，為以后的科技產(chǎn)品發(fā)布打下基礎(chǔ)。

同時(shí)為了體現(xiàn)產(chǎn)品展示的國(guó)際化，整體設(shè)計(jì)采用英漢雙語(yǔ)界面，讓用戶隨時(shí)切換到相應(yīng)的語(yǔ)音界面進(jìn)行瀏覽和操作。同時(shí)，鑒于文字內(nèi)容受手機(jī)屏幕大小的限制，在頁(yè)面中加入音頻功能，點(diǎn)擊播放按鈕就能了解到公司的發(fā)展歷史背景和相應(yīng)科技產(chǎn)品的介紹。Web App端主要包括以下功能：

（1）中英文切換功能：實(shí)現(xiàn)中文頁(yè)面與英文頁(yè)面以及音頻的切換；

（2）地圖點(diǎn)位跳轉(zhuǎn)：通過(guò)點(diǎn)擊地圖中的點(diǎn)位，跳轉(zhuǎn)到對(duì)應(yīng)的科技產(chǎn)品展示頁(yè)面；

（3）播放音頻及快進(jìn)：在科技產(chǎn)品展示頁(yè)面中，點(diǎn)擊播放按鈕即可播放對(duì)應(yīng)的介紹音頻，拖動(dòng)播放按鈕下的拖動(dòng)條可調(diào)節(jié)音頻播放進(jìn)度。

（4）科技產(chǎn)品介紹頁(yè)面：第四個(gè)點(diǎn)位的科技產(chǎn)品頁(yè)面中，在相應(yīng)的輸入框中輸入科技產(chǎn)品編號(hào)，就能跳到對(duì)應(yīng)的科技產(chǎn)品介紹頁(yè)面。

后臺(tái)服務(wù)端采用B/S結(jié)構(gòu)實(shí)現(xiàn)如下功能：

用戶管理：系統(tǒng)分為管理員和普通工作人員兩種角色，分別具有不同的權(quán)限。

驗(yàn)證碼生成：生成4位數(shù)的驗(yàn)證碼，用戶瀏覽頁(yè)面時(shí)需要輸入。

（1）ICFC素材管理：管理ICFC科技產(chǎn)品介紹頁(yè)面內(nèi)容，包括圖片、音頻等素材。

（2）地圖素材管理：可對(duì)地圖界面各個(gè)點(diǎn)位對(duì)應(yīng)的科技產(chǎn)品介紹頁(yè)面內(nèi)容進(jìn)行修改。

2 企業(yè)WebApp

根據(jù)需求分析，首先對(duì)每個(gè)模塊進(jìn)行了詳細(xì)設(shè)計(jì)，將項(xiàng)目分為顯示層、邏輯層以及地圖點(diǎn)位。顯示層主要根據(jù)效果圖完成相應(yīng)的HTML頁(yè)面，邏輯層則實(shí)現(xiàn)HTML頁(yè)面中的功能，因地圖點(diǎn)位觸發(fā)的特殊性，所以單獨(dú)成一模塊進(jìn)行開(kāi)發(fā)。

2.1 首頁(yè)

為了滿足國(guó)際化的需求，項(xiàng)目的每個(gè)頁(yè)面都具有中英文切換的按鈕，首頁(yè)中具有兩套中英文切換按鈕，為了避免用戶未注意到右上角的按鈕，因此在頁(yè)面中間設(shè)計(jì)按鈕，用戶在首頁(yè)中選擇自己所對(duì)應(yīng)的語(yǔ)言，之后系統(tǒng)記住用戶初始的選擇，并且在后面的每個(gè)頁(yè)面都默認(rèn)為用戶所選擇的語(yǔ)言。如圖1所示。

圖1 首頁(yè)展示

2.2 地圖頁(yè)

用戶在首頁(yè)中點(diǎn)擊了進(jìn)入按鈕后，跳轉(zhuǎn)至地圖點(diǎn)位頁(yè)面，此頁(yè)面中每個(gè)有數(shù)字標(biāo)志的圖標(biāo)都代表了一個(gè)點(diǎn)位，總共有八個(gè)點(diǎn)位，點(diǎn)擊其中任意一個(gè)點(diǎn)位，都會(huì)跳轉(zhuǎn)到相應(yīng)的科技產(chǎn)品展示頁(yè)面。地圖中的開(kāi)始按鈕是默認(rèn)第一個(gè)音頻，點(diǎn)擊開(kāi)始即可播放，如圖2所示。

2.3 音頻播放

點(diǎn)擊點(diǎn)位圖中相應(yīng)的點(diǎn)位后，就跳轉(zhuǎn)到GE介紹頁(yè)面。將會(huì)顯示一張?jiān)擖c(diǎn)位的現(xiàn)場(chǎng)圖片，在圖片下方是音頻播放，包括播放按鈕以及音頻進(jìn)度條。用戶通過(guò)播放按鈕控制音頻的播放與暫停，通過(guò)進(jìn)度條控制音頻的進(jìn)度播放，如圖3所示。

圖2 地圖展示

圖3 音頻播放

2.4 科技產(chǎn)品展示頁(yè)面

在輸入框中輸入相應(yīng)的數(shù)值，點(diǎn)擊GO按鈕，就能跳轉(zhuǎn)到科技產(chǎn)品展示頁(yè)面。頁(yè)面中包括科技產(chǎn)品的效果圖以及正中間的設(shè)置按鈕，按下按鈕，就能播放關(guān)于該科技產(chǎn)品介紹的音頻，效果如圖4所示。

圖4 科技產(chǎn)品展示

3 后臺(tái)管理

Web端后臺(tái)管理模塊采用了JSP和Servlet結(jié)構(gòu),在MySQL數(shù)據(jù)庫(kù)的基礎(chǔ)上開(kāi)發(fā),以實(shí)現(xiàn)前后臺(tái)分離,使用了工廠模式和代理模式,實(shí)現(xiàn)了“高內(nèi)聚、低耦合”[4]。系統(tǒng)權(quán)限分為管理員和普通工作人員兩種角色權(quán)限，管理員主要進(jìn)行“用戶的管理”、“ICFC的管理”和地圖8個(gè)點(diǎn)的“素材管理”。

其中ICFC與地圖素材管理功能一致，只是操作不同的數(shù)據(jù)庫(kù)表。以ICFC管理為例，在ICFC主頁(yè)面，主要展示每款產(chǎn)品的中文標(biāo)題、英文標(biāo)題等信息，以及生成的二維碼地址，每一頁(yè)顯示8款產(chǎn)品，用戶可以點(diǎn)擊“上一頁(yè)”、“下一頁(yè)”、“首頁(yè)”、“末頁(yè)”返回到當(dāng)前頁(yè)面的上一頁(yè)、下一頁(yè)、首頁(yè)或末頁(yè)，如圖5。

點(diǎn)擊“添加ICFC”，輸入ICFC產(chǎn)品的中文標(biāo)題、英文標(biāo)題，同時(shí)通過(guò)“瀏覽”上傳中文音頻、英文音頻和產(chǎn)品的展示圖片，所有標(biāo)記為“*”的選項(xiàng)為必填項(xiàng)。也可在主頁(yè)中點(diǎn)擊“修改”，可以修改某款產(chǎn)品的信息，如圖5。也可以點(diǎn)擊“刪除”刪除某款產(chǎn)品。

4 結(jié)語(yǔ)

本文給出了基于HTML5的企業(yè)WebApp的設(shè)計(jì)與實(shí)現(xiàn)過(guò)程，使得用戶在移動(dòng)端就可以輕松地了解企業(yè)的發(fā)展歷程和相關(guān)科技產(chǎn)品。隨著未來(lái)移動(dòng)設(shè)備的高速發(fā)展和4G網(wǎng)絡(luò)的推廣使用，開(kāi)發(fā)成本低、便捷的迭代更新和跨平臺(tái)等優(yōu)勢(shì)將使得基于基于HTML5的企業(yè)WebApp得到更廣泛的應(yīng)用。

圖5 ICFC主頁(yè)面

[1] 思華科技:對(duì)移動(dòng)互聯(lián)網(wǎng)發(fā)展趨勢(shì)的認(rèn)識(shí)與思考[EB/OL].[2010-06-20].http://tech.lmtw.com/csyy/Using/201003/54901_3.html

[2] 劉華星,楊庚.HTML5——下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)研究[J].計(jì)算機(jī)技術(shù)與發(fā)展,2011.8

[3] 陳勇．WebApp現(xiàn)狀分析與展望[J]．行業(yè)觀察，2012.7

[4] 周森鵬，陸正球.基于Android平臺(tái)的校園掌中行設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代計(jì)算機(jī)，2014.11

Design and Implementation of Enterprise WebApp Based on HTML5

ZHOU Sen-peng，LU Zheng-qiu，ZHANG Cheng，WANG Yi-da
（Ningbo Dahongying University，Ningbo 315175）

Along with the rapid development of mobile Internet technology,the WebApp getsmore and more recognition by users because of its excellent user experience and interaction.Adopts the HTML5 technology,designs and realizes the WebApp of GE enterprise,which provides a fast entrance to show the science and technology products,and the users can browse this products just by scanning the QR code. It promotes the companies'image and lets the visitor penetratewith the science and technology products at the same time.

HTML5;WebApp;QR Code

1007-1423（2015）07-0049-04

10.3969/j.issn.1007-1423.2015.07.014

周森鵬（1993-），男，浙江麗水人，在校本科生，研究方向?yàn)檐浖?wù)外包

陸正球（1982-），男，浙江余姚人，講師，研究方向?yàn)檐浖_(kāi)發(fā)

2015-01-13

2015-02-13

張城（1993-），男，浙江杭州人，在校本科生，研究方向?yàn)檐浖?wù)外包

王溢達(dá)（1993-），男，浙江溫州人，在校本科生，研究方向?yàn)檐浖?wù)外包