基于Web—App的多媒体文件内容设计与通用嵌套

庄惠阳

【摘 要】本文研究基于Web-App的多媒体文件内容设计与通用嵌套，以满足阅读、交往的需求。首先，介绍Web-App及其即时联通。其次，介绍基于Web-App的内容设计，设计符合iPhone窄屏阅读、iPad宽屏阅读的内容。最后，以Moodle为例总结嵌套通用于Web-App的多媒体文件之路数。

【关键词】Web-App；多媒体文件；内容设计；通用嵌套

【中图分类号】G40-057 【文献标识码】B

【论文编号】1671-7384（2013）07/08-0102-05

Web-App

“我们正在逐渐抛弃开放而自由Web，寻找更加简单、时髦、用起来更舒服的服务，这丝毫不亚于我们当初对它的喜爱之情。”（Chris Anderson）十年前，浏览器主宰电脑世界，Web取代电脑软件。而今，采用IP和TCP协议传送数据包的Web只是一个工具，而非整个工具箱。网景联合创始人马克·安德瑞森（Marc Andreessen）说道：在互联网的光芒下，操作系统只不过是一套“漏洞重重的设备驱动器”。先有Java横空出世，继而Flash、Ajax、HTML5紧随其后，促使交互性网络代码将多数应用送入“云端”。通过对比新旧互联网技术[1]，可见后起之秀App已经抢占Web曾经独霸的浏览天下。近三年来，iPhone、iPad变成中国年轻人自秀、自乐的设备，也变成阅读、交往的工具。极力拯救Web生机的技术工作者们寄希望于HTML5（最新版本的网页构建编码），使之脚踩两只船，一侧是Web，一侧是App。他们希望HTML5减少浏览器（Browser）对于需要插件的丰富性网络应用服务（RIA），如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集[2]。于是，HTML5在助长谷歌控制内容的流通、销售时，也助长了苹果控制传递内容的应用程序（iTunes）以及播放设备（iPhone、iPad 以及iPod）。人类的即时联通进入了Web-App时代！Web-App时代即时联通了人类与电脑、电视（互联网电视）、移动设备等数字终端，从而严密地编制了传统互联网、有线电视网、无线互联网。因此，如果漠视App的威力，疏忽在Web与App之间做足衔接文件格式的工夫，势必被时代所淘汰。

既然要让内容活络、徘徊于Web与App之间，就必须嵌套通用于二者的多媒体文件，衔接通用于二者的文件格式。iPhone、iPad是苹果公司开发的手持硬件设备，对应的操作系统是iOS。然而，iOS不支持播放.avi、 .mkv、.rmvb、.flv、.wma、.flac等多数格式的文件。基于Web-App的多媒体文件嵌套，当下要紧的事情是让嵌套的文件内容呈现于iPhone、iPad上。因此，本文将以Moodle为例，从iOS所支持的文件格式角度着眼，论述多媒体文件内容设计与通用嵌套。一方面，利用Moodle既定的Web功能，嵌入多种格式的文件，设计符合iPhone窄屏阅读、iPad宽屏阅读的内容。另一方面，参考iOS所规定的格式文件，嵌套通用于Web-App的多媒体文件。

基于Web-App的内容设计

“多媒体用得好是画龙点睛，用得不好就是画蛇添足。”[3]（贾志敏，2012）就多媒体文件的内容设计而言，建议在通用嵌套之前，在文件上传之前，采用以下几种方法以确保精致美观[4]。

第一，字数相当（condign）。采用iPhone进行窄屏阅读，“字小看不见”成为传递内容的大忌。教育技术工作者不宜集中一大堆的文字，一起放在一个页面里。学习者看不见文字，就无法直观、形象地感知文字的意思。因此，页面字数应当合理，最好不要超过20～30字。利用ZineMaker自带的图文模板而制作的电子杂志，字数普遍较多，字体普遍较小，即使移动滚动条，文字也如蚂蚁一般细微。因此，要使字数减少，要让字体变大，从而使看电子书与看纸质书一样清晰。

第二，上下相排（abreast）。倘若精简不了字数，最好将文字分成多行罗列，整齐并排。若欲使文字左右对比，就必须分多栏依次并排。

第三，颜色相别（different）。不同级别、层次的文字应当在颜色上有所区别，并保证所有颜色不与背景颜色相同或相似。采用反差大、互补强的颜色，有助于分辨所欲强调的文字。

第四，段落相叠（overlapping）。同一级别、层次的文字应当在段落上保持一致。不同级别、层次的文字应当在段落上增加缩进（retraction）。

第五，内容相接（conterminous）。同一主题的文字应当在内容上前后相接，做到由浅入深，由表及里，先直观后抽象，先图后文，先分析后概括。

第六，时间相隔（disjunctive）。对于自动播放的内容，要控制播放的时间间隔。不宜令速度过快，要根据内容属于儿童卡通或深奥哲学，来确定时间相隔，来控制阅读速度。

第七，图文相近（near）。针对同一页面上的图文，内容应紧密靠近，例如，要么左图右字、左字右图，要么以图为背景、衬托文字，要么图文逐一呈现。

第八，视听相同（uniform）。倘若言语配音辅助同一页面上的图文，则要彼此相关一致。在朗读速度上，要与文字同步对应、逐一匹配。

除此之外，还应注意色彩的心理作用。色彩是用来直接对精神发生作用的手段。色彩是琴键；眼睛是键锤；精神是多位的钢琴；色彩勾勒者是以某种琴键为中介相应地使人的精神发生震颤的手。色彩的和谐只能建立在相应地震颤人的精神这个原则的基础之上。俄罗斯画家瓦西里·康定斯基认为，色彩的心理作用源自观察时的纯感官效果。从色彩的感官作用到色彩的心理作用，精神与肉体紧紧联结，一种强烈的精神感受通过联想引发另外一种与联想相适的感受就成为可能，譬如，红色引起精神震颤，让人激动与兴奋，而蓝色引起精神麻痹，让人松弛与平静。iPhone、iPad屏幕上的色彩没有受到2D调色板的教条所束缚，体现在对比度非常强烈——红得耀眼，绿得醒目，黄得彻底，可见乔布斯曾经专注鲜艳的色彩，从而打动每个掌中宝主人的心。这位时尚色彩设计者在年少时痴迷于设计字体，从旁听Reed大学的美术字课程中，学到的不仅是san serif 和serif字体，还有彩虹色彩搭配的3D字体。“一个人如果精神敏感程度低下，那么色彩引起的只是表面的作用；刺激一旦中止，前述作用就会很快消失。不过，即便发生这样的情况，这种最单一的作用可能也有不同的特点。眼睛最容易受明亮颜色的吸引，而且更多地是受明亮的暖色吸引：朱砂吸引和诱惑着人们，就像一个人总要去不断地欣赏火。看见鲜亮的橙亮色，眼睛过一会儿就要疼痛，就像高音喇叭之于耳鼓。眼睛开始感到烦躁，不能长久地忍耐这种色彩，就开始在蓝色和绿色中探寻深邃和宁谧。在人高度进化的时候，这种单因素的作用就能化为强烈地作用于精神的更深刻的印象。”[5]因此，挖掘不同色彩搭配对应的不同意境，有助于教育技术工作者在多媒体文件的内容设计上，做得更加精致美观。

如果无法复制上述游戏的绝对地址，可考虑复制相对地址代码行，嵌套游戏于Moodle上。那么如何获取相对地址代码行？注册新浪博客，并进入编辑日志的页面，点击正在缓冲的影片，使其播放，然后利用GreenBrower，点击影片所在页面的“工具”-“扩展工具栏”-“编辑页面”，右键点击BaiduPlayer下方、滚动广告上方的控制栏，“全选”红框内的视频区域，然后，“复制”整个视频页面，并“粘帖”到新浪博客正要编辑日志的页面，如图4所示。倘若“全选”、“复制”视频区域不太确定，不妨先“粘帖”到Word中，观看实际效果，倘若真的出现流媒体的效果，说明操作正常。

路数3：Moodle容器的管理与使用。

Moodle原创者马丁·多基马（Martin Dougiamas）博士考虑了调用外部网站素材的功能，即用新版“容器”方式代替旧版基于目录的文件管理方式。Moodle管理者只需知晓多媒体文件的大致名称，通过“容器”检索、选择文件，就能直接嵌套文件至Moodle编辑页面。因此，管理与使用Moodle容器（如图5所示），有利于调用其他网站的素材，嵌套多媒体文件。进入首页>网站管理>插件>容器>管理容器，发现只有前4种容器（服务器文件、最近的文件、上传一个文件、私人文件）被默认使用，其余15种容器被默认禁用，点击“启用，而且可见”，并予以命名即可使用。当需要添加多媒体文件，只要进入Moodle编辑页面，点击“插入/编辑图片（ ）”或“Moodle Media（ ）”，部分容器就以列表方式，逐一呈现在“文件选择器”下方。有些容器需预先获得授权，方能调用外部网站的素材。