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