基于混合模式移动终端设计方法.docVIP

基于混合模式移动终端设计方法 　　摘要：随着智能移动终端的普及，移动学习（M-learning）与大规模在线教育（MOOCs）进入实用阶段，如何让移动学习客户端能兼具原生App的良好交互，又能够利用浏览器的高效和灵活性，这里提出了一种采用网页渲染Web App与Native App混合模式移动学习的客户端实现方案，能够很好的融合浏览器模式与移动学习App的优点。 　　关键词：移动学习 浏览器 原生APP 混合模式 　　中图分类号：TP391.7 文献标识码：A 文章编号：1007-9416（2015）04-0148-02 　　1 网页渲染Web App与Native App混合模式（Hybrid App） 　　混合型应用（Hybrid App），是指在原生客户端中嵌入基于前端技术建构HTML页面，因此它就不再需要调用移动设备中的浏览器进行操作了，可以这样理解，将Hybrid App视为一个“容器”，其核心是基于HTML、CSS、JavaScrit或前端框架打造的页面视图。含有静态文件资源的学习内容页面可以存储在移动学习服务器端，让动态数据通过Ajax的方式在页面视图与移动应用中传输[1]。 　　采用Web App与原生App混合模式（Hybrid App）核心层面是解决跨平台与硬件应用的问题；针对不同平台，只需要开发与维护核心部份，即具有“容器”性质的本地应用部分。让具体应用功能安排给一套页面视图来实现。 　　1.1 主框架用原生App实现 　　采用原生App模式进行移动学习客户端的开发，而不是以浏览器模式作为载体的原因是： 　　第一，要保证快捷高效的移动学习质量，应当有良好的用户体验。移动学习程序的主框架原生App化，将软件的主体交互、UI都用各移动操作系统提供的SDK来实现，可以保证客户端程序的纯净性、易用性和优雅性。 　　通过iPhone 4S上对LLVM（底层虚拟机）和Nitro（Nitro是一个web2.0的ruby开发框架）的运行效率进行了对比实验。结果如下图1： 　　在实验中可以看到，native应用差不多比js执行方式快4.5倍[2]。对于要进行频繁计算的场景，比如主框架管理的页面之间的页面切换动画等，采用原生app有明显的优势。 　　第二：采用SDK开发客户端，能够最大限度的采用移动客户端的开发方案来实现移动学习客户端，从而使用系统所提供的一切硬件资源来实现功能，而不受制于浏览器提供的能力。这里需要注意的重点，是开发过程中一定要贴合移动客户端的特点来进行设计和创新。 　　第三：采用原生App框架来管理各个子页面，对于数据库、本地文件的存储和管理都更加灵活，对于实现学习资料的存储，收藏，分享等独特的功能更加有优势。 　　1.2 置放学习内容的页面使用独立的网页渲染 　　第一，网页的渲染系统高效强大：教学文字和图片内容的展示，要写出适应各种教材的排版，需要进行大量的客户端开发。对网页排版系统来说，经过多年的开发完善已经非常强大。客户端的大多数基础控件的排版算法，都在有意无意的参考网页的实现。在教学内容的最终展示页面，用网页来进行渲染，在性能和排版通用性上是远优于客户端采用基础控件实现。对已有的学习资源，用网页的形式也能够很好的实现兼容。对于一个学习客户端来说，占最大比重的应该是内容。内容页面采用平台无关的网页来实现，可以减少跨平台的开发量。 　　第二，对于多媒体内容的调用，网页模式有较高兼容性，易于实现，现在移动端主要采用两种方式： 　　一是adobe公司从PC上移植来的flash，它的好处是现有资源多，但缺点很致命：耗电和性能。在pc上大行其道的flash技术，在移动端已经肯定败给了HTML5，它从一开始就没有被IOS和WP原生支持。而在Android上，adobe已经宣布不再支持Android系统的flash版本开发，这个问题将直接导致移动学习平台上的flash类型课程无法在线使用， 所以我们建议在移动端上可以彻底抛弃flash的使用。[3] 　　二是采用HTML5技术。HTML5是用于替代HTML 4.01 和 XHTML 1.0的新标准版本；目前仍处于发展阶段，现在主流的移动浏览器内核如webkit（android和IOS），Trident（WP）都支持HTML5 技术。HTML5提供了间单有效的对多媒体音频、视频、动画等内容的支持。而且HTML5还有一个好处，它可以说是具有与操作系统无关性，因为IOS，Android，WP对HTML5的支持也越来越好，这些组件使用非常方便，开发成本也很低。比如一段教学视频，学习者点击之后通过网页的形式就可以打开，其实在网页上只用一个简单的标签即可实现。 　　例如HTML5在 Web 页面中嵌入视频的语法如下： 　　 　　这样向