基于HTML5的數字電子技術課程APP學習平臺設計

鄭 鑫 張曉潔

廣西民族師范學院物理與電子工程學院 廣西崇左 532200

在目前高校大學生對智能手機等移動終端的依賴性越來越強的環境下，如何利用好學生隨身攜帶的手機等移動設備實現課程的學習是目前各高校正在探索的問題。如何能讓學生利用現代信息技術的手段隨時隨地利用課余時間學習數字電子技術課程、充分調動學生學習的積極性、提高學習效果是高校教學改革要思考的問題。設計的數字電子技術課程APP學習平臺是通過手機等移動終端設備讓學生利用課余時間隨時隨地自由學習從而提高學習效果。

1 數字電子技術APP平臺設計的總體框架

數字電子技術課程APP平臺設計是基于HTML5技術實現的，主要采用的基本技術有HTML(超文本標記語言)、CSS(層疊樣式表)、javaScript編程語言和boostrap框架。通過HTML、CSS來進行頁面的布局[1]，用javaScript實現頁面的交互功能，利用boostrap柵格系統實現屏幕適配問題。最后設計出能夠在終端設備上學習數字電子技術的一個webAPP，即網頁APP。APP利用H5本地存儲的新特性來實現夜間模式功能。此外還設計了搜索功能、留言功能和分享等功能。

數字電子技術課程APP整體設計主要分為界面設計和功能設計兩個大模塊，APP平臺根據這兩大模塊具體設計框架(如圖1所示)。

圖1　APP總體設計框架圖

2 界面設計

數字電子技術APP平臺設計主要考慮界面直觀簡潔、布局合理、具有互動交流這些因素[2]。因為考慮到這是一款學習類的APP且用戶多為學生，因而設計作品以藍色為主風格。APP的設計實現則是通過HTML，CSS進行頁面的基本布局。考慮到市場上的手機型號有很多種，各種型號的手機屏幕與分辨率都不相同，因此，數字電子技術課程學習APP設計采用了boostrap框架解決屏幕的適配問題。這個框架能夠自適應從手機端到PC端實現響應式開發[3]。它有一套柵格系統，通過行(row)和列(col)創建頁面的布局，每個列都默認左右內填充15像素。通過在頁面上引入boostrap的JS腳本和boostrap的CSS樣式就可以在項目中使用它了。通過在HTML代碼中添加不同的類的名稱就可以達到屏幕的適配問題。常用來布局的主要有col-xs-，col-sm-，col-md-，col-lg-。如下面的代碼：，代表著div盒子在不同的屏幕下始終占屏幕寬度的三分之一。

2.1 主頁界面設計

APP主頁的頁面布局主要分為課程信息、知識拓展、資料下載、教學課程、微課教學、題庫練習、集成塊說明、Multisim仿真軟件介紹、實驗項目共9個模塊。每個模塊的圖標用了特殊的字體。這樣方便通過CSS樣式調節圖標的顏色，并且它對于圖片圖標來說內存占用更小，能減少資源的占用，主頁的界面設計效果圖如圖2所示。

圖2　APP主頁效果圖

2.2 課程信息模塊界面設計

在課程信息模塊界面設計中，有3個設計的內容，分別為授課計劃、進度計劃、教學大綱。其中頁面的頭部設計有標題導航欄，而內容采用了表格的形式把主要內容計劃呈現出來。

授課計劃表格的主要內容有授課周次、教學內容、教學重點難點、授課方法、授課教具共5個方面，授課計劃按周次從小到大的排序排列。進度計劃表格的主要內容有授課的周次、起止日期、教學內容、備注共4個內容，內容按周次從小到大的排序排列。教學大綱界面有實驗課程的目的和任務、實驗課程的基本理論、實驗課程的基本要求、實驗項目的設置與內容提要共4個內容。此模塊主要讓學生了解關于課程學習的相關信息，把握好課程的學習進度和知識難點重點，隨時掌握對本門課程學習要求。

2.3 教學課程模塊設計

教學課程模塊界面主要分為兩部分，第一個是列表標題界面，第二個是內容詳情界面，頭部都分別設計有導航欄。可以通過點擊標題進入到對應的標題內容界面，效果圖如圖3所示。

圖3　教學課程模塊界面設計圖

2.4 微課教學模塊界面設計

微課模塊界面主要分為兩部分，第一個是標題界面，第二個是內容詳情界面，里面放著教學視頻。頁面頭部都設計有導航欄，可以通過點擊標題進入到對應的標題內容界面，效果圖如圖4所示。

圖4　微課模塊列表圖

2.5 題庫練習模塊界面設計

題庫練習模塊的界面設計主要分為兩部分，第一個是標題界面，第二個是內容詳情界面。頁面頭部都有導航欄，通過點擊標題進入到對應的標題內容界面，內容詳情設計有答案提示功能，點擊查看答案按鈕，該題目的答案就會顯示出來，效果圖如圖5所示。

圖5　題庫練習的列表圖

2.6 仿真軟件模塊界面設計

Multisim仿真軟件模塊的界面設計主要分為兩部分，第一個是列表界面，顯示的是章節標題；第二個是章節內容詳情界面，頭部都設計有導航欄。通過點擊章節標題進入到對應章節內容界面，效果圖如圖6所示。

圖6　Multisim模塊界面設計圖

2.7 實驗項目模塊界面設計

實驗項目模塊的界面設計主要分為兩部分，第一個是列表界面顯示實驗項目的標題，第二個是內容詳情界面顯示實驗內容。頁面頭部都設置有導航欄，通過點擊實驗章節標題進入到對應的實驗章節內容的界面，效果圖如圖7所示。

圖7　實驗項目模塊界面設計圖

3 功能設計

3.1 搜索功能

搜索功能是通過調用onkeyup事件，搜索時通過RegExp找出符合條件的內容，并把它顯示出來，否則就是隱藏起來。本頁面頭部設計有返回按鈕和搜索框，學生在學習數字電子技術的知識時可通過搜索框搜集自己想要了解的知識，搜索集成塊模塊的界面效果圖如圖8所示。當用戶在輸入框輸入文字的時候，系統就會自動地把符合搜索的內容顯示出來，其他文字隱藏，然后高亮顯示以方便用戶快速地找相關的內容。

圖8　APP搜索功能效果圖

3.2 答案提示功能

答案提示的實現原理是通過this對象判斷當前事件發生的對象，查找到相應的兄弟節點，調用jQuery的toggle方法。toggle方法的作用是當元素發生點擊事件的時候，實現元素的顯示與隱藏的切換。當用戶點擊查看答案的時候，答案模塊顯示出來，再次點擊的時候，則是隱藏。答案提示功能可以方便用戶在解題后快速地得到答案，提高學習效率。

圖9　答案提示功能效果圖

3.3 夜間模式功能

由于人們晚上會長時間地盯著手機屏幕，屏幕的亮度過亮會傷害到眼睛。所以在這款數字電子技術APP上專門設計了一個夜間模式的功能，減少強光對眼睛的傷害以達到保護眼睛的效果，夜間模式效果圖如圖10所示。

圖10　夜間模式效果圖

點擊APP右上角的圖標，頁面會彈出設置夜間模式的窗口，用戶可通過滑動組件設置夜間模式亮度的大小，點擊右上角的小圖標則是關閉夜間模式的設置。

夜間模式的實現原理是在頁面上設置一個遮罩層，首先設置它的背景顏色為黑色，透明度為0，然后在滑動組件的時候調用change事件，每當頁面滑動組件的時候，求出頁面組件滑動的百分比數值，再利用HTML5的localStorage屬性，使用setItem方法向本地存儲百分比數值。再通過getItem方法獲取本地存儲百分比數值，作為遮罩層背景透明度的系數，達到屏幕亮度的調節。

3.4 社區分享功能

社會分享功能的實現原理是在頁面上用CSS樣式display的none屬性把社區分享功能模塊先隱藏起來，當用戶點擊主頁右上角的小圖標時，利用jQuery的show方法把社區分享功能模塊顯示出來，再點擊社區分享功能模塊以外的區域就用jQuery的hide方法把元素給隱藏起來。點擊分享圖標，通過百度分享提供的接口技術支持，實現了社區分享功能，社區分享功能效果圖如圖11所示。

圖11　社區分享功能效果圖

3.5 留言功能

留言功能的實現原理是根據服務器后臺提供的接口地址利用ajax方法請求提交表單數據到服務器上，當用戶提交表單的時候，對輸入文本框進行驗證，當表單提交的內容是空的時，不給提交數據請求。如果表單不為空的時，就調用ajax方法，使Ajax的提交類型為post，再利用ajax中serialize方法對表單信息進行處理，然后向服務器提交數據，服務器根據請求的內容把信息轉發到系統設置好的接收信息的郵箱地址，效果圖如圖12所示。

圖12　留言功能效果圖

4 結語

設計的數字電子技術APP平臺經過多次優化和測試后，能讓用戶更好更快地訪問頁面，提高了頁面響應的時間。設計的平臺通過減少HTTP請求數、讓腳本無阻塞加載、減少HTML中不必要的結構嵌套等手段減少資源對內存的占用率，提高了頁面的響應速度，達到了為學生提供便利學習的目的，能有效地輔助數字電子技術課程的教學，是值得推廣的現代教育模式和手段。