基于H5網(wǎng)頁前端開發(fā)的項(xiàng)目啟發(fā)式教學(xué)探究

2021-12-15 13:38:48伍尚君

科技視界 2021年33期

伍尚君

（東莞市經(jīng)濟(jì)貿(mào)易學(xué)校，廣東東莞 523000）

0 引言

隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，對高素質(zhì)的網(wǎng)頁前端工程師的要求越來越高。因此，H5網(wǎng)頁前端工程師作為網(wǎng)頁前端工程師的技術(shù)專業(yè)課程越來越受到重視。在民辦中等職業(yè)院校、高職本科院校計(jì)算機(jī)專業(yè)，應(yīng)該采用哪種方式進(jìn)行課堂教學(xué)是一個(gè)需要解決的問題。網(wǎng)站前端，也叫前端開發(fā)，運(yùn)行在PC、手機(jī)等電腦瀏覽器上，顯示客戶瀏覽過的網(wǎng)頁。隨著云計(jì)算技術(shù)的發(fā)展，HTML5、CSS3的使用，前端框架應(yīng)用組件化響應(yīng)式網(wǎng)站網(wǎng)頁設(shè)計(jì)可以融合各種分辨率、極致動(dòng)畫特效設(shè)計(jì)方案，為用戶帶來極高的體驗(yàn)。

1 H5網(wǎng)頁前端

H5大家可能都聽說過，但是H5前端開發(fā)的實(shí)際工作并不是很了解。隨著前端工程師行業(yè)的日益普及，越來越多的人選擇做前端工程師。

HTML5是HTML的新標(biāo)準(zhǔn)，是Web開發(fā)的關(guān)鍵下HTML使用的第五次重大變化，這是一項(xiàng)推薦標(biāo)準(zhǔn)，CSS3和HTML5雖然是兩種語言表達(dá)方式，但一般來說，HTML5也包含CSS3，因?yàn)樗鼈兘?jīng)常結(jié)合使用。從技術(shù)分析來看，目前部分網(wǎng)頁制作、WApp、網(wǎng)頁開發(fā)設(shè)計(jì)和網(wǎng)頁游戲全部采用HTML5標(biāo)準(zhǔn)完成。雖然開發(fā)的應(yīng)用其實(shí)還是以JS為主，但是因?yàn)镠TML5的定義很流行，所以微網(wǎng)站開發(fā)、Web、App或是微網(wǎng)站等應(yīng)用都會(huì)使用HTML5開發(fā)。

隨著HTML5“前端H5工程師”的出現(xiàn)，HTML5工程師成為前端開發(fā)中的主力，使得Web前端的使用更加靈活，移動(dòng)應(yīng)用也更火爆。隨著該領(lǐng)域的快速發(fā)展，互聯(lián)網(wǎng)公司在Web前端技術(shù)的前端開發(fā)方面要具備大量的知識。當(dāng)今流行的互聯(lián)網(wǎng)技術(shù)網(wǎng)站要?jiǎng)?chuàng)造一流的用戶交互體驗(yàn)。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，這些人員在現(xiàn)階段的人力市場中非常罕見，所有互聯(lián)網(wǎng)公司都在高薪招聘技術(shù)人才。

優(yōu)秀的前端開發(fā)是新時(shí)代文明世界的布道者、奠基人。因?yàn)橹挥杏凶銐蛲晟频闹R體系，內(nèi)容深度和廣度，才能做一些更有意義的工作，而不是只作為一名普普通通的為別人實(shí)現(xiàn)定制內(nèi)容的乙方，這也說明了前端開發(fā)的必要性。在當(dāng)前互聯(lián)網(wǎng)時(shí)代的發(fā)展中，Web前端的發(fā)展已經(jīng)占據(jù)了非常重要的位置，且據(jù)Web前端開發(fā)，HTML5已經(jīng)迅速興起。

2 HTML和Web的區(qū)別

HTML5實(shí)際上是一種技術(shù)的組合，其中包括HTML5、CSS3、JS等技術(shù)，Web前端是一種職業(yè)，中國從2005年開始逐漸形成一種趨勢，從網(wǎng)站設(shè)計(jì)師演變而來。

通過教學(xué)，學(xué)生應(yīng)該在一定程度上能夠獨(dú)立完成軟件開發(fā)和設(shè)計(jì)方案的能力，不同的公司對Web前端開發(fā)有不同的技術(shù)標(biāo)準(zhǔn)。在傳統(tǒng)規(guī)則的實(shí)際意義上，URL分為前端和后端。前端是大家別名的網(wǎng)頁和大家經(jīng)?？吹降母鞣N展示實(shí)際效果，后臺(tái)管理的關(guān)鍵是指管理方式、升級、網(wǎng)站建設(shè)和維護(hù)的后臺(tái)管理。百科是這樣定義的：工作職責(zé)是使（X）HTML/CSS/Java/Flash等各種Web技術(shù)來開發(fā)和設(shè)計(jì)移動(dòng)用戶端產(chǎn)品。進(jìn)行用戶端軟件（即計(jì)算機(jī)瀏覽器端）的開發(fā)設(shè)計(jì)，進(jìn)行Java及其Flash控制模塊的開發(fā)設(shè)計(jì)，同時(shí)集成后臺(tái)開發(fā)技術(shù)模擬整體實(shí)際效果，通過Web開發(fā)設(shè)計(jì)豐富多彩的互聯(lián)網(wǎng)技術(shù)，基于技術(shù)提升用戶體驗(yàn)。

一般來說，在實(shí)際意義上，Web前端工程師不僅需要開發(fā)設(shè)計(jì)技能，還需要進(jìn)行移動(dòng)應(yīng)用程序開發(fā)。也就是說，大家在學(xué)習(xí)Web的同時(shí)，也要學(xué)習(xí)HTML5技術(shù)。據(jù)統(tǒng)計(jì)，公司現(xiàn)在的招聘標(biāo)準(zhǔn)包括HTML5開發(fā)和設(shè)計(jì)。

3 課程現(xiàn)狀及問題

3.1 課程現(xiàn)狀

Web業(yè)務(wù)流程智能管理系統(tǒng)的日益完善推動(dòng)了Web技術(shù)的快速發(fā)展。許多迭代開發(fā)技術(shù)加快了新Web應(yīng)用程序的項(xiàng)目進(jìn)度，互聯(lián)網(wǎng)表達(dá)方式和客戶體驗(yàn)也發(fā)生了巨大的變化。Web前端工程師是高校軟件專業(yè)開發(fā)的專業(yè)技能教學(xué)內(nèi)容。學(xué)習(xí)中比較困難的代碼。由于提升新項(xiàng)目層次和實(shí)踐活動(dòng)的機(jī)構(gòu)有限，學(xué)生的學(xué)習(xí)和訓(xùn)練只停留在對專業(yè)知識的掌握環(huán)節(jié)，但由于專業(yè)性強(qiáng)，覆蓋面廣，專業(yè)技能和實(shí)踐量大，學(xué)生個(gè)體差異大，傳統(tǒng)課堂教學(xué)的核心理念和教學(xué)方法無法滿足如今的教學(xué)需求。

3.2 存在的問題

學(xué)生一般都是在課堂上完成Web前端工程學(xué)習(xí)，包括實(shí)訓(xùn)中的專業(yè)知識、實(shí)驗(yàn)學(xué)習(xí)中很難測試的代碼。由于學(xué)習(xí)和培訓(xùn)新項(xiàng)目層次和實(shí)踐活動(dòng)的機(jī)構(gòu)很少，學(xué)生的學(xué)習(xí)和培訓(xùn)只停留在對專業(yè)知識關(guān)鍵環(huán)節(jié)的掌握上，很少有新的工作經(jīng)驗(yàn)積累。

4 課堂教學(xué)設(shè)計(jì)方案

為了更好地塑造學(xué)生的編程愛好，完成學(xué)生自主學(xué)習(xí)的總體目標(biāo)，選擇新項(xiàng)目作為實(shí)訓(xùn)指導(dǎo)。講授網(wǎng)站開發(fā)專業(yè)知識要點(diǎn)，讓學(xué)員更清晰地掌握學(xué)習(xí)和培訓(xùn)的目的，將枯燥的序列號數(shù)據(jù)信息可視化。下面以H5 Web前端工程師的HTML5方法為例，對新項(xiàng)目的教學(xué)情境設(shè)計(jì)進(jìn)行研究。

4.1 創(chuàng)設(shè)課堂教學(xué)情境

教師先詳細(xì)講解，這個(gè)控制模塊會(huì)進(jìn)行2個(gè)新項(xiàng)目。新增項(xiàng)目1：移動(dòng)登陸頁面。項(xiàng)目描述：這個(gè)新項(xiàng)目必須有一個(gè)移動(dòng)客戶登錄頁面，包括一個(gè)登錄名文本框、一個(gè)賬戶密碼文本框和一個(gè)登錄按鈕。其中，“登錄名”和“賬戶登錄密碼”為提示文本，只存儲(chǔ)客戶輸入的文本，焦點(diǎn)所在的輸入框顏色才會(huì)發(fā)生變化。新增項(xiàng)目2：會(huì)員注冊網(wǎng)頁。會(huì)員注冊是指向Web服務(wù)器提交相關(guān)客戶信息的全過程。未申請注冊的客戶無權(quán)使用本站部分功能。某個(gè)輸入框聚焦后，會(huì)增大，無法正常填充。該信息為紅色，包含警告標(biāo)志。

4.2 建立學(xué)習(xí)目標(biāo)項(xiàng)目

項(xiàng)目1學(xué)習(xí)目標(biāo)：（1）規(guī)定學(xué)生掌握報(bào)告的應(yīng)用；（2）規(guī)定學(xué)生掌握HTML5的應(yīng)用；（3）規(guī)定學(xué)生明確執(zhí)行本項(xiàng)目的實(shí)際效果和網(wǎng)頁結(jié)構(gòu)；（4）要求學(xué)生掌握本項(xiàng)目的重點(diǎn)及相關(guān)知識點(diǎn)的應(yīng)用。項(xiàng)目2、學(xué)習(xí)目標(biāo)：（1）要求學(xué)生掌握、、

亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放