基于HTML5技術(shù)的就業(yè)信息服務(wù)APP的設(shè)計(jì)與實(shí)現(xiàn)

宋麗萍 韋建國(guó)

摘要：隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展和移動(dòng)智能設(shè)備的普及，基于HTML5技術(shù)的移動(dòng)Web應(yīng)用也大量涌現(xiàn)，HTML5所具有的跨平臺(tái)、跨終端的特性，使其將成為移動(dòng)互聯(lián)網(wǎng)未來(lái)的發(fā)展趨勢(shì)。該文從高校畢業(yè)生就業(yè)信息服務(wù)工作的實(shí)際需要出發(fā)，為方便畢業(yè)生及時(shí)掌握用人單位信息，促進(jìn)學(xué)生就業(yè)，利用Html5技術(shù)設(shè)計(jì)了一個(gè)學(xué)生就業(yè)信息管理APP，從學(xué)生就業(yè)信息管理APP的設(shè)計(jì)原則，提出了基于HTML5的系統(tǒng)架構(gòu)和功能設(shè)計(jì)。該APP可及時(shí)發(fā)布國(guó)家的相關(guān)就業(yè)政策、各用人單位的需求信息及公布招聘會(huì)、就業(yè)資訊等。

關(guān)鍵詞：HTML5；跨平臺(tái)；就業(yè)信息；APP

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）04-0046-02

近年來(lái)隨著高職教育的興起，高職院校的畢業(yè)生就業(yè)形勢(shì)也越來(lái)越嚴(yán)峻，各高校也都相繼成立了獨(dú)立的就業(yè)與創(chuàng)業(yè)指導(dǎo)服務(wù)中心，旨在為大學(xué)生就業(yè)提供幫助和指導(dǎo)，隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，就業(yè)指導(dǎo)服務(wù)中心的很多工作也都需要借助于網(wǎng)絡(luò)信息平臺(tái)來(lái)實(shí)現(xiàn)。高校就業(yè)指導(dǎo)工作的一端是學(xué)校就業(yè)指導(dǎo)部門(mén)，另一端是學(xué)生的手機(jī)。因此高校就業(yè)信息服務(wù)平臺(tái)也面臨著大數(shù)據(jù)時(shí)代所帶來(lái)的各種挑戰(zhàn)，隨著移動(dòng)智能設(shè)備的普及，如何讓學(xué)生隨時(shí)隨地的利用移動(dòng)智能設(shè)備了解就業(yè)信息，更簡(jiǎn)單更快捷的從網(wǎng)上獲取一些用人單位信息？如何讓學(xué)生就業(yè)部門(mén)從大量繁雜的就業(yè)數(shù)據(jù)中獲取有效的信息？提升工作效率，是個(gè)值得探討的問(wèn)題[1]，本文嘗試著利用HTML5技術(shù)設(shè)計(jì)實(shí)現(xiàn)了一個(gè)學(xué)生就業(yè)信息服務(wù)APP。以期這個(gè)APP能更好的推動(dòng)學(xué)生就業(yè)工作的開(kāi)展。

1 HTML5技術(shù)

作為下一代Web標(biāo)準(zhǔn)，HTML5 致力于為互聯(lián)網(wǎng)開(kāi)發(fā)者搭建更加便捷、開(kāi)放的溝通平臺(tái)。HTML5是唯一一個(gè)通配PC、Mac、iPhone、iPad、Android等主流平臺(tái)的跨平臺(tái)語(yǔ)言。因?yàn)镠TML5這種跨平臺(tái)的便利，開(kāi)發(fā)一次，即可部署不同的移動(dòng)應(yīng)用設(shè)備[2]。

HTML5是基于HTML語(yǔ)言的第五次修訂，它是由萬(wàn)維網(wǎng)聯(lián)盟于2014年10月制定并修改完成的最新的HTML，實(shí)際上，HTML5不單指HTML技術(shù)，它還包括CSS樣式和JavaScript腳本語(yǔ)言。大多數(shù)HTML5的應(yīng)用與層疊樣式表（CSS）相集成， JavaScript負(fù)責(zé)瀏覽器的交互行為，如果瀏覽器沒(méi)有事件響應(yīng)，就沒(méi)有行為交互，這將在很大程度上影響用戶(hù)體驗(yàn)。相對(duì)于瀏覽器而言，HTML5可以提供更豐富的客戶(hù)端應(yīng)用，這樣可以大大的減少瀏覽器對(duì)插件的依賴(lài)性[3]。

2 HTML5的主要特性

相比較于以前的版本，HTML5具有許多新穎的特性。對(duì)于終端用戶(hù)，HTML5可以使用戶(hù)無(wú)需下載或安裝任何的插件，就可以聆聽(tīng)音樂(lè)、欣賞視頻、體驗(yàn)游戲等各方面的需求；同時(shí)HTML5具有更好的設(shè)備兼容性，攝像頭等一些設(shè)備可以直接與視頻、影音等關(guān)聯(lián)；另外HTML5技術(shù)還可以支持手機(jī)端的應(yīng)用切換。具體特性如圖1所示：

3 就業(yè)信息管理APP需求分析

近幾年來(lái)，高職院校畢業(yè)生的就業(yè)形勢(shì)也不容樂(lè)觀，學(xué)校的就業(yè)工作也面臨很多挑戰(zhàn)，如何提高高職院校每年畢業(yè)生的就業(yè)率，為畢業(yè)生和用人單位提供更好的、更準(zhǔn)確的就業(yè)、創(chuàng)業(yè)信息服務(wù)，是目前高校就業(yè)指導(dǎo)中心面臨的一項(xiàng)難題，利用網(wǎng)絡(luò)發(fā)布相關(guān)就業(yè)及擇業(yè)、創(chuàng)業(yè)信息能夠有效地幫助建立畢業(yè)生和用人單位之間的聯(lián)系，將用人單位的招聘信息及相關(guān)就業(yè)、創(chuàng)業(yè)政策、就業(yè)法律防控知識(shí)等有效的傳遞給畢業(yè)生。同時(shí)也可以利用網(wǎng)絡(luò)向社會(huì)宣傳我校的畢業(yè)生情況及專(zhuān)業(yè)設(shè)置情況等，幫助用人單位更好的了解我校的每年畢業(yè)生情況，以能夠?qū)崿F(xiàn)成功招聘。另外我校學(xué)生處還可以通過(guò)后臺(tái)管理匯總來(lái)我校招聘的企業(yè)信息，及時(shí)向畢業(yè)生發(fā)布，針對(duì)用人單位提出的要求，學(xué)生處可以有針對(duì)性的收集并反饋給各教學(xué)院系，使學(xué)校能夠更加充分的了解企業(yè)需求，及時(shí)調(diào)整專(zhuān)業(yè)設(shè)置和各專(zhuān)業(yè)人才培養(yǎng)方案，每位畢業(yè)生也要能通過(guò)網(wǎng)絡(luò)提交個(gè)人基本信息及就業(yè)信息，及時(shí)收集畢業(yè)生的反饋意見(jiàn)，方便統(tǒng)計(jì)匯總，以更好的建立學(xué)生與企業(yè)之間的溝通與交流。

4 就業(yè)信息服務(wù)APP設(shè)計(jì)

4.1 功能設(shè)計(jì)

通過(guò)對(duì)高校就業(yè)信息管理平臺(tái)的需求分析，將此就業(yè)信息服務(wù)平臺(tái)設(shè)計(jì)成前臺(tái)展示和后臺(tái)管理。前臺(tái)主要幫助學(xué)校就業(yè)部門(mén)發(fā)布用人單位招聘信息、就業(yè)政策、通知公告等。后臺(tái)根據(jù)用戶(hù)權(quán)限設(shè)計(jì)相應(yīng)的功能模塊，主要用于學(xué)校管理員進(jìn)行內(nèi)容發(fā)布管理和用戶(hù)管理。依此確立就業(yè)信息服務(wù)APP需要具備以下幾個(gè)特點(diǎn)：學(xué)生可以憑學(xué)號(hào)登錄平臺(tái)，學(xué)校在后臺(tái)進(jìn)行管理，以保證信息的安全，更方便的實(shí)現(xiàn)就業(yè)數(shù)據(jù)信息統(tǒng)計(jì)，為數(shù)據(jù)挖掘提供數(shù)據(jù)來(lái)源；在原有高校就業(yè)服務(wù)平臺(tái)基礎(chǔ)上，利用HTML5所具有的跨平臺(tái)的特性來(lái)實(shí)現(xiàn)。主發(fā)布平臺(tái)的界面設(shè)計(jì)要簡(jiǎn)潔美觀，信息要更新及時(shí)，同時(shí)平臺(tái)安全要有保障。其功能結(jié)構(gòu)如圖2所示。

4.2 前端頁(yè)面設(shè)計(jì)

就業(yè)信息服務(wù)APP的設(shè)計(jì)是為了滿(mǎn)足學(xué)生與用人單位需求的一個(gè)平臺(tái)，作為學(xué)校信息化建設(shè)的典型應(yīng)用。平臺(tái)以HTML5設(shè)計(jì)為出發(fā)點(diǎn)，所有頁(yè)面符合HTML5規(guī)范要求，通過(guò)CSS和Java Script對(duì)元素和操作進(jìn)行定義[4]。其APP前端部分展示效果設(shè)計(jì)如圖3、圖4所示：

根據(jù)設(shè)計(jì)學(xué)生可以使用學(xué)號(hào)登錄進(jìn)入學(xué)校的就業(yè)信息服務(wù)平臺(tái)，查詢(xún)就業(yè)及招聘信息，以及就業(yè)資訊、就業(yè)政策等，同時(shí)也可以發(fā)布個(gè)人簡(jiǎn)歷等，學(xué)校就業(yè)部門(mén)可以對(duì)有就業(yè)指導(dǎo)需求的學(xué)生指導(dǎo)其就業(yè)。學(xué)校也可以為企業(yè)提供符合企業(yè)需求的畢業(yè)生材料，為企業(yè)招聘提供合適的畢業(yè)生資源，建立企業(yè)和學(xué)校就業(yè)溝通平臺(tái)，同時(shí)學(xué)校也可以通過(guò)問(wèn)卷調(diào)查了解學(xué)生的就業(yè)、擇業(yè)意向，為學(xué)生推薦合適的就業(yè)單位，也為來(lái)校招聘的企業(yè)提供第一份資料，實(shí)現(xiàn)學(xué)生與企業(yè)的對(duì)接。

5 就業(yè)信息服務(wù)APP的關(guān)鍵技術(shù)與實(shí)現(xiàn)

本APP主要應(yīng)用HTML5技術(shù)，采用WeX5開(kāi)發(fā)實(shí)現(xiàn)，WeX5是一款開(kāi)源免費(fèi)的快速H5 APP開(kāi)發(fā)工具，前端采用HTML5+CSS3+JS標(biāo)準(zhǔn)，使用AMD規(guī)范的RequireJS、Bootstrap、jQuery等技術(shù)，同時(shí)對(duì)移動(dòng)端開(kāi)發(fā)做了極致優(yōu)化，效率極高。支持多種類(lèi)型的后端，包括Java、PHP和.NET等，同時(shí)也支持云API。本平臺(tái)中所使用到的關(guān)鍵技術(shù)如下：

5.1 表單技術(shù)

根據(jù)設(shè)計(jì)學(xué)生可以使用學(xué)號(hào)和密碼登錄進(jìn)入此平臺(tái)，在此使用了HTML5的表單技術(shù)實(shí)現(xiàn)了用戶(hù)登錄頁(yè)面和問(wèn)卷調(diào)查，其用戶(hù)登陸頁(yè)面關(guān)鍵代碼如下：

5.2 視頻播放技術(shù)

在本平臺(tái)中，學(xué)校為了更好的讓學(xué)生了解國(guó)家的相關(guān)就業(yè)、創(chuàng)業(yè)新政策以及就業(yè)法律防控方面的內(nèi)容，采用了視頻播放技術(shù)，而在 HTML5 中， Video元素可以用來(lái)實(shí)現(xiàn)視頻播放。關(guān)鍵代碼如下：

6 結(jié)束語(yǔ)

本文通過(guò)對(duì)就業(yè)信息服務(wù)APP進(jìn)行需求分析、功能設(shè)計(jì)、HTML5新技術(shù)的應(yīng)用等，設(shè)計(jì)了跨平臺(tái)的基于 HTML5 高校就業(yè)信息服務(wù)APP，該APP的設(shè)計(jì)思想主要來(lái)源于移動(dòng)智能設(shè)備的普及，達(dá)到了預(yù)期的使用目標(biāo)，為我校的就業(yè)工作提供了很大便利，通過(guò)此平臺(tái)畢業(yè)生可以及時(shí)獲取最新的招聘信息，用人單位也可以找到所需要的專(zhuān)業(yè)人才，實(shí)現(xiàn)了畢業(yè)生與企業(yè)的雙贏，大大提高了我校就業(yè)指導(dǎo)工作的效率。該就業(yè)信息平臺(tái)的設(shè)計(jì)和應(yīng)用，為我校的就業(yè)信息管理工作提供了一個(gè)有力的工具，具有很大的實(shí)用性和可推廣性。

參考文獻(xiàn)：

[1] 李敏艷，高建波. 大數(shù)據(jù)時(shí)代基于就業(yè)網(wǎng)絡(luò)信息服務(wù)平臺(tái)的大學(xué)生就業(yè)指導(dǎo)研究[J]. 江西科技師范大學(xué)學(xué)報(bào)，2016（3）：92-96.

[2] 馬科.HTML5 APP商業(yè)開(kāi)發(fā)實(shí)戰(zhàn)教程[M].北京：高等教育出版社，2016：2-6.

[3] 臺(tái)雯. HTML5在Web前端開(kāi)發(fā)中的應(yīng)用研究[J]. 天津職業(yè)院校聯(lián)合學(xué)報(bào)，2016（8）：70-73.

[4] 高少琛.基于HTML5的內(nèi)容發(fā)布管理系統(tǒng)的研究與實(shí)現(xiàn)[J].軟件產(chǎn)業(yè)與工程，2016（2）：43-46.

[5] 舒遠(yuǎn)仲，黃文強(qiáng)，梅夢(mèng)喆.基于HTML5跨平臺(tái)高校就業(yè)信息服務(wù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代，2016（3）：93-96.

[6] 侯小麗.基于HTML5的Web APP的購(gòu)物網(wǎng)站設(shè)計(jì)[J] .太原學(xué)院學(xué)報(bào)，2017（2）：56-59.

[7] 汪梅，湯書(shū)昆，陳敬宇.基于HTML5的宣紙文化網(wǎng)站設(shè)計(jì)研究[J].包裝工程，2016（8）：143-147.

[8] 李穎.基于響應(yīng)式設(shè)計(jì)的Web App界面布局研究[J] . 安慶師范大學(xué)學(xué)報(bào)：自然科學(xué)版，2017（3）：62-67.

[9] 吳巍.基于 HTML5 民辦高校教務(wù)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].吉林工程技術(shù)師范學(xué)院學(xué)報(bào)，2016（8）：89-90.

[10] 劉洋.基于WEB結(jié)構(gòu)學(xué)生就業(yè)信息平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 自動(dòng)化與儀器儀表，2016（6）：146-148.

[11] 王睿.淺談HTML5的技術(shù)優(yōu)勢(shì)[J].遼寧師專(zhuān)學(xué)報(bào)，2017（1）：40-41.

[12] 紀(jì)娟，李華，王洪海.等.一體化移動(dòng)學(xué)習(xí)APP的設(shè)計(jì)與實(shí)現(xiàn)[J].安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2017（4）：27-32.