“臺站管理App”的設(shè)計與實現(xiàn)
2015-12-29 05:01:18安澤華
聲屏世界 2015年13期
□安澤華
安徽廣播電視臺共有15 個無線發(fā)射臺站、20 個臺區(qū)，分布在全省11 個地市，承擔(dān)著中央、省及當(dāng)?shù)厥锌h廣播電視節(jié)目信號的傳輸、發(fā)射任務(wù)。全年共播出廣播電視節(jié)目240 套（次），其中播出中央臺節(jié)目65 套次，播出省臺節(jié)目139 套次，播出地方節(jié)目36 套次，播出總功率約1760W，年播出時間約200 萬小時。各發(fā)射臺站地址分散，有的臺站還在高山上，交通不便，另外每個發(fā)射臺站發(fā)射的節(jié)目、頻率、頻道以及發(fā)射機開關(guān)機檢修時間也不一樣，這樣給臺站技術(shù)和管理人員帶來諸多不便。
基于目前智能手機、平板電腦已經(jīng)發(fā)展成為人們?nèi)粘Ｉ瞰@取信息的主要途徑，我們開發(fā)了“臺站管理App”軟件，將我臺15 個臺站發(fā)射播出的廣播電視節(jié)目表，每套廣播電視節(jié)目播出時間表，全省廣播電視無線覆蓋圖表，各套節(jié)目開關(guān)機檢修時間，臺站負(fù)責(zé)人及聯(lián)系電話、臺站情況簡介等全部放到智能手機里，方便技術(shù)人員和技術(shù)管理人員隨時調(diào)閱，方便實用。
開發(fā)環(huán)境及相關(guān)技術(shù)
該項目是在HTML5的移動開發(fā)平臺上，調(diào)用jQuery Mobile樣式和庫文件，制作安卓和蘋果系統(tǒng)下“臺站管理App”。
前期工作包括收集、整理15 個臺站信息，每個臺站發(fā)射播出的廣播電視節(jié)目表，每套廣播電視節(jié)目播出時間表，全省廣播電視無線覆蓋圖表，檢修時間，臺站負(fù)責(zé)人及聯(lián)系電話、臺站情況簡介；對App 每一頁進(jìn)行構(gòu)圖設(shè)計，采用PHOTOSHOP 制作符合格式的臺標(biāo)、啟動畫面圖片、臺站簡介圖片等。編程部分主要使用HTML5 代碼助手調(diào)用jQuery Mobile 樣式和庫文件，編寫“臺站手冊App”首頁面；使用HTML 編輯器，編寫“臺站手冊App”的具體內(nèi)容；使用開發(fā)套件WebMatrix 3 封裝打包成APK（安卓系統(tǒng)）或IPA(蘋果系統(tǒng))安裝包。最后運行安卓模擬器，測試軟件運行情況。
HTML5 是繼HTML4 以后的下一代HTML 標(biāo)準(zhǔn)規(guī)范，它提供了一些新的元素和屬性，目前被廣泛應(yīng)用于各智能移動終端設(shè)備，被各種最新移動瀏覽器所支持。離線緩存為HTML5 開發(fā)移動應(yīng)用提供了基礎(chǔ)，音視頻自由嵌入讓多媒體應(yīng)用更為方便，地理定位讓用戶隨時隨地分享位置，Canvas 繪圖提升移動平臺的繪圖能力，豐富的交互提升了用戶體驗。
jQueryMobile 是一個針對觸摸體驗的web UI 開發(fā)框架，針對觸屏智能手機與平板電腦的website 以及在線應(yīng)用的前端開發(fā)框架。jQuery mobile 構(gòu)建于jQuery 以及jQuery UI 類庫之上，為前端開發(fā)人員提供了一個兼容所有主流移動設(shè)備平臺的統(tǒng)一UI 接口系統(tǒng)，擁有出色的彈性，輕量化以及漸進(jìn)增強特性與可訪問性，是移動web App 開發(fā)框架和工具集。
jQueryMobile 框架包括構(gòu)建完整移動Web App 和網(wǎng)站所需的所有UI 組件，頁面、對話框、工具欄、不同類型的列表視圖，各種表單元素和按鈕等。jQuery Mobile 構(gòu)建于jQuery 內(nèi)核之上，可以訪問關(guān)鍵設(shè)備，包括HTML 和XML文檔對象模型（DOM）的遍歷操作，事件處理，使用Ajax 服務(wù)器通信，以及Web 頁面的動畫和圖像效果。
另外，HTML5 具有明顯跨平臺優(yōu)勢，Andriod、iOS 支持幾乎所有的HTML5 API 和CSS3 屬性，大多數(shù)移動瀏覽器都是基于HTML5 支持良好的webkit 內(nèi)核。采用HTML5 技術(shù)，文件體積將減小40%，文檔加載速度提升30%。所以移動應(yīng)用程序“臺站管理App”將使用JQuery Mobile 和HTML5 平臺進(jìn)行編程開發(fā)。
客戶端功能流程及頁面設(shè)計
以下是“臺站管理App”手機客戶端功能流程圖。主要由啟動畫面、主頁面和臺站內(nèi)容構(gòu)成，如圖1 所示。
啟動畫面是采用圖片制作軟件PHOTOSHOP 制作,像素為320×533的PNG 格式圖片，畫面背景是安徽廣播電視臺新大樓，圖片上還嵌入廣電總局關(guān)于廣播電視安全十二字方針，即“不間斷、高質(zhì)量、既經(jīng)濟、又安全”。
圖1
啟動畫面后即進(jìn)入主頁面，主頁面由三部分組成，分別由安徽廣播電視臺的LOGO 和大樓背景、15 個臺站圖片循環(huán)播放、15 個臺站列表組成，15 個臺站圖片是像素為450×300JPG 格式的圖片。點擊每張循環(huán)播放的臺站圖片，即可進(jìn)入臺站內(nèi)容簡介。
主頁面臺站列表按照折疊頁面設(shè)計，分別點擊臺站名稱，即可出現(xiàn)關(guān)于該臺站內(nèi)容的目錄索引，分別是臺站簡介及聯(lián)系電話、發(fā)射播出節(jié)目表、節(jié)目播出時間表、無線覆蓋圖。點擊某臺站目錄索引，即可瀏覽具體內(nèi)容，如節(jié)目播出時間表。
同時，為了方便查詢，我們在每張內(nèi)頁面頂部制作了頁眉欄，內(nèi)容包括“返回、首頁”。底部都制作了頁腳欄，內(nèi)容包括“目錄、上一篇、下一篇”。
首頁源代碼設(shè)計
“臺站手冊App”的首頁利用HTML5 代碼助手完成，步驟如下：
首先編寫頭文件代碼，通過HTML5 代碼助手調(diào)用jQueryMobile 庫文件和樣式文件。
其次編寫主頁面頂部“安徽廣播電視臺的LOGO 和大樓背景”部分代碼，尺寸采用自適應(yīng)方式。
再編寫調(diào)jQuery 插件slides 代碼，實現(xiàn)15 張臺站圖片無縫輪播圖特效，點擊圖片進(jìn)入臺站簡介頁面。
最后編寫的代碼分別是利用jQuery 庫文件創(chuàng)建內(nèi)容折疊塊。首先，創(chuàng)建一個容器，并添加data-role="collapsible" 屬性，并且給此容器使用data-content-theme 屬性，為可折疊的內(nèi)容塊，進(jìn)行主題樣式設(shè)計，展現(xiàn)在主頁面上的就是折疊樣式的臺站列表。
jQuery Mobile 中的列表視圖是標(biāo)準(zhǔn)的HTML 列表，向無序列表
- 元素添加data-role="listview"，并在每個列表項（
- ）中規(guī)定鏈接，形成臺站內(nèi)容的目錄索引，分別是臺站簡介及聯(lián)系電話、發(fā)射播出節(jié)目表、節(jié)目播出時間表、無線覆蓋圖。此部分代碼在主頁面顯示的是折疊式臺站列表和臺站內(nèi)容的目錄索引，其余14 個臺站代碼基本相同，只是在每個列表項（
- ）中規(guī)定鏈接頁面不一樣，不再贅述。
“臺站手冊App”的首頁都是利用HTML5 代碼助手完成。首頁代碼編好后，再使用HTML 編輯器，編寫“臺站手冊App”的具體內(nèi)容。我們使用的是微軟發(fā)布的一套免費輕量級開發(fā)套件WebMatrix 3，它提供了如jQuery Mobile的代碼調(diào)用的功能。此外,它還支持多種語言,如ASP、NET,PHP 和HTML5 模板等，含有HTML 富文本編輯器，可以直接將“廣播電視節(jié)目表、每套廣播電視節(jié)目播出時間表、全省廣播電視無線覆蓋圖表、各套節(jié)目開關(guān)機檢修時間，臺站負(fù)責(zé)人及聯(lián)系電話、臺站情況簡介”等WORD 和EXCEL文檔導(dǎo)入到HTML 編輯器中。
最后進(jìn)行打包形成APK（安卓系統(tǒng)）或IPA(蘋果系統(tǒng))安裝包，即可使用。安裝圖標(biāo)采用像素為50×50的PNG 格式圖片（臺標(biāo)logo 迎客松）。
總結(jié)
利用HTML5 與jQuery Mobile 框架開發(fā)適合于IOS和Android 系統(tǒng)的跨平臺“臺站手冊App”，將安徽廣播電視臺分布在全省的15 個臺站，包括每個臺站發(fā)射播出的廣播電視節(jié)目表，每套廣播電視節(jié)目播出時間表，全省廣播電視無線覆蓋圖表，檢修時間，臺站負(fù)責(zé)人及聯(lián)系電話、臺站情況簡介全部做成手機App，供管理人員和臺站技術(shù)人員使用，方便技術(shù)人員和管理人員隨時調(diào)閱。目前該軟件已經(jīng)在15 個臺站推廣應(yīng)用，成為技術(shù)人員和技術(shù)管理人員工作助手，方便實用。
猜你喜歡- 巧用列表來推理
小學(xué)生學(xué)習(xí)指導(dǎo)(高年級)(2024年4期)2024-05-07 03:28:46- 中國科學(xué)院野外臺站檔案工作回顧
中國科學(xué)院院刊(2022年8期)2022-09-02 06:25:16- 氣象基層臺站建設(shè)
西藏科技(2021年12期)2022-01-17 08:46:38- 學(xué)習(xí)運用列表法
小學(xué)生學(xué)習(xí)指導(dǎo)(中年級)(2021年4期)2021-04-27 10:14:56- 擴列吧
課堂內(nèi)外(初中版)(2020年5期)2020-06-19 08:11:11- 創(chuàng)世代碼
動漫星空(2018年11期)2018-10-26 02:24:02- 創(chuàng)世代碼
動漫星空(2018年2期)2018-10-26 02:11:00- 創(chuàng)世代碼
動漫星空(2018年9期)2018-10-26 01:16:48- 創(chuàng)世代碼
動漫星空(2018年5期)2018-10-26 01:15:02- 基層臺站綜合觀測業(yè)務(wù)管理之我見
西藏科技(2015年6期)2015-09-26 12:12:13 - 巧用列表來推理
