M-learning時(shí)代網(wǎng)絡(luò)課程設(shè)計(jì)新范式*
——響應(yīng)式課程設(shè)計(jì)

陸靈明（玉林師范學(xué)院，廣西 玉林537000）

?

M-learning時(shí)代網(wǎng)絡(luò)課程設(shè)計(jì)新范式*
——響應(yīng)式課程設(shè)計(jì)

陸靈明
（玉林師范學(xué)院，廣西 玉林537000）

當(dāng)今的互聯(lián)網(wǎng)已步入移動(dòng)互聯(lián)時(shí)代，各種移動(dòng)設(shè)備飛速發(fā)展，計(jì)算機(jī)進(jìn)入后PC時(shí)代，這種變化也導(dǎo)致網(wǎng)絡(luò)課程設(shè)計(jì)的底層——WEB設(shè)計(jì)發(fā)生巨大變化。文章從響應(yīng)式WEB設(shè)計(jì)的三個(gè)關(guān)鍵要素談起，闡述了WEB課件設(shè)計(jì)的響應(yīng)式布局趨勢(shì)，分析了響應(yīng)式WEB設(shè)計(jì)面臨的挑戰(zhàn)，最后指出隨著未來的移動(dòng)終端各種傳感的使用，將會(huì)大大擴(kuò)展“響應(yīng)式”課程設(shè)計(jì)的內(nèi)涵，并最終使課程交互產(chǎn)生革命性的變革。

M-learning；響應(yīng)式布局；課件交互

傳統(tǒng)互聯(lián)網(wǎng)進(jìn)一步深入發(fā)展與電子技術(shù)的突飛猛進(jìn)，使得全球快速進(jìn)入了移動(dòng)互聯(lián)網(wǎng)時(shí)代，據(jù)CNNIC發(fā)布的第34次《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示，截至2014年6月，我國(guó)網(wǎng)民上網(wǎng)設(shè)備中，手機(jī)使用率達(dá)83.4%，首次超越傳統(tǒng)PC整體使用率80.9%，手機(jī)已經(jīng)成為第一大上網(wǎng)終端設(shè)備。

對(duì)于教育、培訓(xùn)領(lǐng)域來說，大都采用B/S架構(gòu)，其主流的課件制作軟件正進(jìn)一步向標(biāo)準(zhǔn)化、跨平臺(tái)的Web格式趨勢(shì)發(fā)展。李麗萍、莫永華等認(rèn)為，“Html5與Flash這兩者功能上的互補(bǔ)是課件發(fā)展的趨勢(shì)，也是未來課件發(fā)布的主流”，“課件的發(fā)布遵從LMS平臺(tái)標(biāo)準(zhǔn)，從而便于學(xué)習(xí)跟蹤和測(cè)試。”［1］從根本上說，這也是課件開發(fā)的成本與效果這兩個(gè)維度所決定的。我們知道，自從蘋果公司與谷歌公司的移動(dòng)操作系統(tǒng)發(fā)布以來，智能終端迅速普及。智能手機(jī)的移動(dòng)性是傳統(tǒng)PC無可比擬的，尤其是近幾年來，手機(jī)CPU的運(yùn)算速度，ROM容量與PC的差距越來越小，操作系統(tǒng)越來越完善，用戶體驗(yàn)好，然而PC也自有其優(yōu)勢(shì)，屏幕大，顯示的內(nèi)容多，操作便利性，應(yīng)用功能強(qiáng)大，幾十年積累的數(shù)以萬計(jì)軟件優(yōu)勢(shì)，也是手機(jī)所不能比擬的。“一次編寫，到處運(yùn)行”是課件開發(fā)者最理想的追求。

一、響應(yīng)式建筑與響應(yīng)式WEB設(shè)計(jì)

響應(yīng)式設(shè)計(jì)源于建筑設(shè)計(jì)的概念：這種理論認(rèn)為，智能建筑可以感知和反饋信息的，用戶可以參與的環(huán)境與空間。即物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行響應(yīng)。根據(jù)這種理念，建筑師們建造的房屋應(yīng)是一種可以根據(jù)周圍人群的情況進(jìn)行彎曲、伸縮和擴(kuò)展的墻體結(jié)構(gòu)；同時(shí)還可以使用運(yùn)動(dòng)傳感器配合氣候控制系統(tǒng)，調(diào)整室內(nèi)的溫度及環(huán)境光。

2010年5月，Ethan Marcotte發(fā)表的一篇文章《Responsive Web Design》認(rèn)為：Web設(shè)計(jì)同樣應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動(dòng)響應(yīng)及調(diào)整。他制作了一個(gè)范例，里面是《福爾摩斯歷險(xiǎn)記》六個(gè)主人公的頭像。如果屏幕寬度大于1300像素，則6張圖片并排在一行。如果設(shè)備寬度在600像素到1300像素之間，6張圖片分成兩行。自此，這個(gè)思路延伸到了Web設(shè)計(jì)的領(lǐng)域。響應(yīng)式Web設(shè)計(jì)興起的原因主要是計(jì)算機(jī)已進(jìn)入了 “后PC時(shí)代”，各種終端的屏幕尺寸與分辨率在不斷變化中，而網(wǎng)頁(yè)要能夠適應(yīng)不同環(huán)境下的需要，一個(gè)網(wǎng)站、多種終端進(jìn)行訪問使得開銷成本大大降低。

二、響應(yīng)式WEB的三大關(guān)鍵技術(shù)

1.流體網(wǎng)格（Fluid Grid）

因?yàn)楝F(xiàn)代文字的排列方式為橫排，所以根據(jù)閱讀不間斷的原理，在PC上閱讀，人們習(xí)慣于使用上下滾動(dòng)條以擴(kuò)大閱讀的范圍，同樣，在各種各樣的移動(dòng)設(shè)備上，視圖區(qū)域并不固定，理想的方式是隨著屏幕的大小變化，內(nèi)容進(jìn)行重排，這樣就可以避免使用水平滾動(dòng)條或者縮小版面。要做到這一點(diǎn)，流布局時(shí)對(duì)網(wǎng)站尺寸的測(cè)量單位需不同。固定寬度布局使用的是像素，但是流布局使用的是百分比，它提供了很強(qiáng)的可塑性和流動(dòng)性。通過設(shè)置百分比，你將不需要考慮設(shè)備尺寸或者屏幕寬度大小，可以為每種情形找到一種可行的方案，因?yàn)槟愕脑O(shè)計(jì)尺寸將適應(yīng)所有的設(shè)備尺寸。響應(yīng)式布局最大的特色就是版面調(diào)整的靈活性，它的顯示并不是針對(duì)瀏覽器的窗口，而是將網(wǎng)頁(yè)中的DIV塊進(jìn)行靈活布局，大小和表現(xiàn)形式都是動(dòng)態(tài)的。

2.彈性圖片與相對(duì)大小的字體（Flex Picture）

彈性圖片：指的是圖片能夠在不同的設(shè)備中呈現(xiàn)不同的效果。彈性布局跟流布局很相像，彈性布局的方法之一是采用em做為單位。一個(gè)em單位等于參考字體的大寫字母的高度，定義在CSS規(guī)則里面。例如，我們?cè)O(shè)置文本的font-size大小為20像素，那么 1em就等于20px。另外按照比例縮放圖片，也是很容易實(shí)現(xiàn)，最方便的是使用max-width和height:auto的屬性值。第一條規(guī)則確保圖像保持在父容器，而并不會(huì)溢出，忽略元素的高度與寬度，讓瀏覽器根據(jù)設(shè)備來設(shè)置圖像的大小。把圖像的寬度設(shè)置為最大值就是瀏覽器的寬度或者設(shè)備的寬度，所有當(dāng)寬度減少時(shí)，圖像會(huì)按照比例縮小。

3.媒體查詢（Media Query）

媒體查詢是通過不同的環(huán)境下查詢到不同的值，以此來決定設(shè)備的特性，從而設(shè)計(jì)出更為行之有效的方案，解決之前單一布局中的問題。媒體類型（Media Type）在css2中是一個(gè)常見的屬性，也是一個(gè)非常有用的屬性，可以通過媒體類型對(duì)不同的設(shè)備指定不同的樣式。到了CSS3里，得到了增強(qiáng)，Media Query就是對(duì)Media Type的增強(qiáng)版，它是響應(yīng)式設(shè)計(jì)的核心，根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁(yè)面。設(shè)備通過媒介查詢的檢驗(yàn)，然后調(diào)入相關(guān)的CSS樣式表，附加到HTML源碼上，從而控制相應(yīng)的布局樣式。

三、技術(shù)實(shí)現(xiàn)

目前，關(guān)于響應(yīng)式Web設(shè)計(jì)可以說是進(jìn)行得熱火朝天，一些大型的門戶網(wǎng)站，諸如騰訊、百度等公司紛紛使用了響應(yīng)式布局，教育領(lǐng)域的大學(xué)網(wǎng)站也陸續(xù)都改版為響應(yīng)式布局，方便了移動(dòng)終端的瀏覽。在實(shí)現(xiàn)手段上，技術(shù)人員除了上述的基本方式之外，還開發(fā)出各類響應(yīng)式布局框架。

下面是目前最受響應(yīng)式開發(fā)者歡迎的框架：

在課件制作領(lǐng)域，一些軟件公司也開始研發(fā)出相應(yīng)的技術(shù)，下面是Trivantis公司的Lectora軟件，它的最新版本Lectora 16也已經(jīng)開始支持響應(yīng)式課程設(shè)計(jì)。下面是一個(gè)E-learning課件在臺(tái)式機(jī)或筆記本中呈現(xiàn)出的版面，在這個(gè)視圖中，很多元素是可以選擇顯示或者隱藏的。

表1　最常見的十大響應(yīng)式布局框架

圖1　響應(yīng)式課程的筆記本視圖［2］

當(dāng)學(xué)習(xí)者在手機(jī)上訪問同一課件時(shí)，由于屏幕顯示區(qū)域的大小發(fā)生了很大的變化，在這樣的情況下，課件的內(nèi)容就需要重新考慮。由于4∶3或16∶9的屏幕比例，橫向顯示時(shí)，顯示的區(qū)域變寬變窄，這種情況下可以去掉一些額外的導(dǎo)航按鈕，同時(shí)縮小圖片，這樣可以確保基本版式不變，學(xué)習(xí)者能看到完整的學(xué)習(xí)內(nèi)容，繼續(xù)保持良好的學(xué)習(xí)體驗(yàn)。

圖2　響應(yīng)式課程的手機(jī)視圖

這一切，在新版本的Lectora 16里是通過一個(gè)叫做“響應(yīng)式課程設(shè)計(jì)”的獨(dú)特方法來實(shí)現(xiàn)這個(gè)功能的。這個(gè)軟件的編輯界面頂部有一個(gè)“響應(yīng)式工具條”，切換時(shí)可以顯示不同終端的顯示效果，可根據(jù)當(dāng)前的特殊情況進(jìn)行微調(diào)，這樣在作品編輯時(shí)查看不同設(shè)備的顯示效果，修改時(shí)候可以根據(jù)設(shè)備的不同進(jìn)行多方考慮。

同時(shí)軟件還具有這樣的功能：根據(jù)Lectora非常有特色的繼承方式，可以讓它在臺(tái)式機(jī)模式下進(jìn)行的調(diào)整繼承到其它視圖。在平板視圖下調(diào)整不會(huì)影響臺(tái)式機(jī)模式下的排版，但是會(huì)繼承到手機(jī)視圖。在手機(jī)視圖下進(jìn)行的調(diào)整只影響到手機(jī)端的視圖，真正做到了“一次發(fā)布，到處運(yùn)行”的理想狀態(tài)。

四、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的挑戰(zhàn)

1.性能不佳

移動(dòng)網(wǎng)絡(luò)體驗(yàn)必須非常快，這樣才能做到實(shí)用，但目前市場(chǎng)上新上市的設(shè)備都有太多的屏幕分辨率與尺寸。從qHD（960×540）到QHD（2560×1440）甚至4K顯示器，相應(yīng)的CSS像素?cái)?shù)目也需要發(fā)生變化。如果使用基于寬度“節(jié)點(diǎn)”來為平板定義內(nèi)容，手機(jī)的邏輯屏幕寬度和平板一樣時(shí)，手機(jī)上渲染顯示會(huì)非常的小，不適合瀏覽者觀看。不僅如此，瀏覽器的渲染在計(jì)算能力有限、動(dòng)力不足的移動(dòng)設(shè)備上，以及受限的移動(dòng)網(wǎng)絡(luò)上，會(huì)對(duì)用戶體驗(yàn)產(chǎn)生不利影響。

2.最終效果可能不一致

課件中對(duì)象呈現(xiàn)的相對(duì)位置有時(shí)非常重要。比如人物操作物件，不同的顯示方式會(huì)帶來不同的效果，即使重新排版。

3.交互方式

PC基于鼠標(biāo)指針的互動(dòng)，觸屏技術(shù)主要是觸摸、劃動(dòng)；兩者有各自所適用的領(lǐng)域。設(shè)計(jì)課件時(shí)我們應(yīng)該同時(shí)滿足這兩類設(shè)備的規(guī)范，比如觸屏設(shè)備無法反映CSS定義的hover行為及相應(yīng)的樣式，因?yàn)樗鼪]有鼠標(biāo)指針的概念，手指點(diǎn)擊就是click行為。所以在觸摸屏上不應(yīng)該有功能依賴于對(duì)hover狀態(tài)的觸發(fā)。

五、結(jié)束語(yǔ)

移動(dòng)終端盛行的時(shí)代，這些設(shè)備不僅僅是為學(xué)習(xí)者提供的“應(yīng)手之物”（馬丁·海德格爾），同時(shí)也是教師管理學(xué)生的“教具”。羅斯切利和皮（Roschelle&Pea，2002）曾經(jīng)描述了移動(dòng)終端可以將教師從“講臺(tái)上的圣人”（以教師為中心的教學(xué)）和“站在邊上指導(dǎo)者”（教師指導(dǎo)下的探索）這兩種對(duì)立的教學(xué)范式中解脫出來。［3］這些論述從全新的視角論述了移動(dòng)設(shè)備的功能。

近幾年“電子書包”熱在國(guó)內(nèi)被數(shù)字出版、IT企業(yè)和教育技術(shù)界掀起，然而電子書包并不只是包括一個(gè)單一的硬件設(shè)備，它的組成部分應(yīng)該是 “移動(dòng)終端+教育內(nèi)容+服務(wù)平臺(tái)”，其中教育內(nèi)容的建設(shè)是電子書包取代傳統(tǒng)出版物的關(guān)鍵。

當(dāng)今，我們已經(jīng)生活在一個(gè)日益豐富的智能設(shè)備世界里，我們的課件設(shè)計(jì)也應(yīng)該做到一次設(shè)計(jì)，然后發(fā)布到任何設(shè)備上。這就會(huì)大大增加資源的使用效率，也能使泛在學(xué)習(xí)環(huán)境能夠更好的構(gòu)建。與此同時(shí)，智能終端的傳感器和模式識(shí)別技術(shù)的發(fā)展帶來了人機(jī)交互的革命。各種傳感器都搭載到了移動(dòng)設(shè)備上，如重力加速度、陀螺儀、GPS定位器、距離傳感器、NFC近場(chǎng)通訊等，這些器件已經(jīng)讓手機(jī)具備了類似人的五官，能夠?qū)χ車h(huán)境進(jìn)行感知，大大增強(qiáng)了功能和體驗(yàn)。

“新的輸入方式?jīng)Q定了終端有更加人性化的人機(jī)交互界面，用戶可以通過和智能終端的對(duì)話、肢體等方式操作智能終端。”［4］而這些特性，還并未引起教育領(lǐng)域課程制作者的重視，我們必須意識(shí)到：“響應(yīng)式”課程并不單單是網(wǎng)頁(yè)布局的“響應(yīng)”，它有著更廣泛的內(nèi)涵。

［1］李麗萍，莫永華，楊上影等.主流快速課件工具對(duì)比及其發(fā)展趨勢(shì)［J］.現(xiàn)代教育技術(shù)，2015（9）：110-115.

［2］John Blackmon.響應(yīng)式課程設(shè)計(jì)Responsive Course Design［EB/OL］.http：//blog.sina.com.cn/s/blog_946caa 3b0102 vwza.html.

［3］R·基思·索耶主編.劍橋?qū)W習(xí)科學(xué)手冊(cè)［M］.北京：教育科學(xué)出版社，2010.

［4］智能終端白皮書［DB/OL］.http：//www.cesi.ac.cn/cesi/guanwanglanmu/biaozhunhuayanjiu/2014/0724/11531. html.

（編輯：李曉萍）

G434

B

1673-8454（2016）10-0049-03

玉林師范學(xué)院高等教育本科教學(xué)改革工程立項(xiàng)項(xiàng)目“教育技術(shù)學(xué)專業(yè)（信息技術(shù)教育方向）課程改革研究”（編號(hào)：15XJJG37）的研究成果。