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