“台站管理App”的设计与实现

□安泽华

安徽广播电视台共有15 个无线发射台站、20 个台区，分布在全省11 个地市，承担着中央、省及当地市县广播电视节目信号的传输、发射任务。全年共播出广播电视节目240 套（次），其中播出中央台节目65 套次，播出省台节目139 套次，播出地方节目36 套次，播出总功率约1760W，年播出时间约200 万小时。各发射台站地址分散，有的台站还在高山上，交通不便，另外每个发射台站发射的节目、频率、频道以及发射机开关机检修时间也不一样，这样给台站技术和管理人员带来诸多不便。

基于目前智能手机、平板电脑已经发展成为人们日常生活获取信息的主要途径，我们开发了“台站管理App”软件，将我台15 个台站发射播出的广播电视节目表，每套广播电视节目播出时间表，全省广播电视无线覆盖图表，各套节目开关机检修时间，台站负责人及联系电话、台站情况简介等全部放到智能手机里，方便技术人员和技术管理人员随时调阅，方便实用。

开发环境及相关技术

该项目是在HTML5的移动开发平台上，调用jQuery Mobile样式和库文件，制作安卓和苹果系统下“台站管理App”。

前期工作包括收集、整理15 个台站信息，每个台站发射播出的广播电视节目表，每套广播电视节目播出时间表，全省广播电视无线覆盖图表，检修时间，台站负责人及联系电话、台站情况简介；对App 每一页进行构图设计，采用PHOTOSHOP 制作符合格式的台标、启动画面图片、台站简介图片等。编程部分主要使用HTML5 代码助手调用jQuery Mobile 样式和库文件，编写“台站手册App”首页面；使用HTML 编辑器，编写“台站手册App”的具体内容；使用开发套件WebMatrix 3 封装打包成APK（安卓系统）或IPA(苹果系统)安装包。最后运行安卓模拟器，测试软件运行情况。

HTML5 是继HTML4 以后的下一代HTML 标准规范，它提供了一些新的元素和属性，目前被广泛应用于各智能移动终端设备，被各种最新移动浏览器所支持。离线缓存为HTML5 开发移动应用提供了基础，音视频自由嵌入让多媒体应用更为方便，地理定位让用户随时随地分享位置，Canvas 绘图提升移动平台的绘图能力，丰富的交互提升了用户体验。

jQueryMobile 是一个针对触摸体验的web UI 开发框架，针对触屏智能手机与平板电脑的website 以及在线应用的前端开发框架。jQuery mobile 构建于jQuery 以及jQuery UI 类库之上，为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI 接口系统，拥有出色的弹性，轻量化以及渐进增强特性与可访问性，是移动web App 开发框架和工具集。

jQueryMobile 框架包括构建完整移动Web App 和网站所需的所有UI 组件，页面、对话框、工具栏、不同类型的列表视图，各种表单元素和按钮等。jQuery Mobile 构建于jQuery 内核之上，可以访问关键设备，包括HTML 和XML文档对象模型（DOM）的遍历操作，事件处理，使用Ajax 服务器通信，以及Web 页面的动画和图像效果。

另外，HTML5 具有明显跨平台优势，Andriod、iOS 支持几乎所有的HTML5 API 和CSS3 属性，大多数移动浏览器都是基于HTML5 支持良好的webkit 内核。采用HTML5 技术，文件体积将减小40%，文档加载速度提升30%。所以移动应用程序“台站管理App”将使用JQuery Mobile 和HTML5 平台进行编程开发。

客户端功能流程及页面设计

以下是“台站管理App”手机客户端功能流程图。主要由启动画面、主页面和台站内容构成，如图1 所示。

启动画面是采用图片制作软件PHOTOSHOP 制作,像素为320×533的PNG 格式图片，画面背景是安徽广播电视台新大楼，图片上还嵌入广电总局关于广播电视安全十二字方针，即“不间断、高质量、既经济、又安全”。

图1

启动画面后即进入主页面，主页面由三部分组成，分别由安徽广播电视台的LOGO 和大楼背景、15 个台站图片循环播放、15 个台站列表组成，15 个台站图片是像素为450×300JPG 格式的图片。点击每张循环播放的台站图片，即可进入台站内容简介。

主页面台站列表按照折叠页面设计，分别点击台站名称，即可出现关于该台站内容的目录索引，分别是台站简介及联系电话、发射播出节目表、节目播出时间表、无线覆盖图。点击某台站目录索引，即可浏览具体内容，如节目播出时间表。

同时，为了方便查询，我们在每张内页面顶部制作了页眉栏，内容包括“返回、首页”。底部都制作了页脚栏，内容包括“目录、上一篇、下一篇”。

首页源代码设计

“台站手册App”的首页利用HTML5 代码助手完成，步骤如下：

首先编写头文件代码，通过HTML5 代码助手调用jQueryMobile 库文件和样式文件。

其次编写主页面顶部“安徽广播电视台的LOGO 和大楼背景”部分代码，尺寸采用自适应方式。

再编写调jQuery 插件slides 代码，实现15 张台站图片无缝轮播图特效，点击图片进入台站简介页面。

最后编写的代码分别是利用jQuery 库文件创建内容折叠块。首先，创建一个容器，并添加data-role="collapsible" 属性，并且给此容器使用data-content-theme 属性，为可折叠的内容块，进行主题样式设计，展现在主页面上的就是折叠样式的台站列表。

jQuery Mobile 中的列表视图是标准的HTML 列表，向无序列表

元素添加data-role="listview"，并在每个列表项（
• ）中规定链接，形成台站内容的目录索引，分别是台站简介及联系电话、发射播出节目表、节目播出时间表、无线覆盖图。此部分代码在主页面显示的是折叠式台站列表和台站内容的目录索引，其余14 个台站代码基本相同，只是在每个列表项（
• ）中规定链接页面不一样，不再赘述。

  “台站手册App”的首页都是利用HTML5 代码助手完成。首页代码编好后，再使用HTML 编辑器，编写“台站手册App”的具体内容。我们使用的是微软发布的一套免费轻量级开发套件WebMatrix 3，它提供了如jQuery Mobile的代码调用的功能。此外,它还支持多种语言,如ASP、NET,PHP 和HTML5 模板等，含有HTML 富文本编辑器，可以直接将“广播电视节目表、每套广播电视节目播出时间表、全省广播电视无线覆盖图表、各套节目开关机检修时间，台站负责人及联系电话、台站情况简介”等WORD 和EXCEL文档导入到HTML 编辑器中。

  最后进行打包形成APK（安卓系统）或IPA(苹果系统)安装包，即可使用。安装图标采用像素为50×50的PNG 格式图片（台标logo 迎客松）。

  总结

  利用HTML5 与jQuery Mobile 框架开发适合于IOS和Android 系统的跨平台“台站手册App”，将安徽广播电视台分布在全省的15 个台站，包括每个台站发射播出的广播电视节目表，每套广播电视节目播出时间表，全省广播电视无线覆盖图表，检修时间，台站负责人及联系电话、台站情况简介全部做成手机App，供管理人员和台站技术人员使用，方便技术人员和管理人员随时调阅。目前该软件已经在15 个台站推广应用，成为技术人员和技术管理人员工作助手，方便实用。