項(xiàng)目五H5開發(fā)工具電子課件 中職 新媒體運(yùn)營

項(xiàng)目五H5開發(fā)工具電子課件中職高教版新媒體運(yùn)營項(xiàng)目五：H5開發(fā)工具《新媒體運(yùn)營》新媒體運(yùn)營項(xiàng)目綜述微信朋友圈中，常?？梢钥吹脚笥逊窒淼腍5微海報(bào)，這些海報(bào)制作精美，伴有悅耳的背景音樂、藝術(shù)的文字、妙趣的圖片、動感的視頻、炫酷的轉(zhuǎn)場，動態(tài)地展示企業(yè)或個人的信息。在信息化、移動化、可視化的今天，H5頁面已經(jīng)成為企業(yè)或個人，宣傳推介的重要工具。本項(xiàng)目分3個任務(wù)，分別為什么是H5、初級H5頁面制作和H5互動頁面制作。通過3個任務(wù)循序漸進(jìn)地學(xué)習(xí)，將學(xué)會如何使用H5開發(fā)工具，制作出符合企業(yè)需求、直觀有趣、互動性與代入感都較強(qiáng)的H5頁面，助推企業(yè)或個人更好地宣傳推廣產(chǎn)品、服務(wù)和信息。項(xiàng)目綜述PROJECTTASKS任務(wù)1什么是H5項(xiàng)目任務(wù)活動1介紹H5制作平臺活動2了解H5制作工具任務(wù)2初級H5頁面制作活動1制作H5頁面活動2制作H5小動畫項(xiàng)目五H5開發(fā)工具任務(wù)3H5互動頁面制作活動1制作H5搖一搖活動2制作H5邀請函活動3制作H5互動知識問答知識目標(biāo)了解H5的概念、特點(diǎn)、分類了解H5制作平臺和工具技能目標(biāo)會制作H5初級頁面會制作H5互動頁面增強(qiáng)自主學(xué)習(xí)和探究精神培養(yǎng)文字表達(dá)和圖片處理能力培養(yǎng)熱點(diǎn)跟蹤、營銷意識和創(chuàng)新意識情感目標(biāo)項(xiàng)目目標(biāo)李江和張敏經(jīng)過一段時間的實(shí)習(xí)磨煉，成長迅速，尤其是李江，已成為“聚星公司”網(wǎng)絡(luò)拓展部門的負(fù)責(zé)人。為進(jìn)一步提升個人的業(yè)務(wù)能力，李江主動學(xué)習(xí)H5。情景設(shè)計(jì)任務(wù)1什么是H5填寫課前調(diào)查問卷，觀看H5案例了解學(xué)生對H5的認(rèn)知情況培養(yǎng)學(xué)生熱點(diǎn)跟蹤能力環(huán)節(jié)1調(diào)查問卷二維碼自主探究H5的概念、特點(diǎn)培養(yǎng)搜索、篩選和整理網(wǎng)絡(luò)信息的能力培養(yǎng)自主學(xué)習(xí)和團(tuán)隊(duì)協(xié)作探究精神培養(yǎng)學(xué)生文字表達(dá)和圖片處理能力以小組為單位運(yùn)用網(wǎng)絡(luò)搜索回答下列問題，以PPT的形式上交。1、什么是H5？用簡潔的文字闡述。2、H5有哪些特點(diǎn)？完成下表的填寫。環(huán)節(jié)2特點(diǎn)說明學(xué)生展示、教師點(diǎn)評培養(yǎng)溝通表達(dá)、總結(jié)歸納能力引導(dǎo)學(xué)生主動分享、互動小組代表展示講解搜索歸納的內(nèi)容。12環(huán)節(jié)3教師點(diǎn)評。知識點(diǎn)講解理清H5的概念、特點(diǎn)、分類等知識點(diǎn)突出重點(diǎn)、化解難點(diǎn)H5概念。播放教學(xué)視頻，強(qiáng)調(diào)要點(diǎn)。12環(huán)節(jié)4H5特點(diǎn)。H5特點(diǎn)本地存儲性多媒體性跨平臺性功能多樣性（一）本地存儲性H5可以把一些信息存在客戶端，這使得頁面擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度和更流暢的畫面。

（二）多媒體特性支持文字、圖片、音樂、視頻，三維圖及特效，互動性強(qiáng)。

（三）跨平臺性PC端與移動端、Windows與Linux、安卓與IOS、微信與QQ都可以運(yùn)行，兼容性強(qiáng)。

（四）功能多樣性可以支持投票、表單收集、趣味游戲、畫板、地圖、照片墻等，可用于展示產(chǎn)品、吸納粉絲、增加用戶粘度等。

知識點(diǎn)講解理清H5的概念、特點(diǎn)、分類等知識點(diǎn)突出重點(diǎn)、化解難點(diǎn)H5的分類。3環(huán)節(jié)4分類標(biāo)準(zhǔn)分類代表案例展示形式信息型《我們之間就一個字》活動型《蓋倫提莫》游戲型《圍住神經(jīng)貓》測試型《四六級方言考試》展示效果全景/AR/VR型《穿越宇宙的邀請函》《淘寶購物節(jié)》《2016廣州車展線上VR展廳》《星際探索之旅》3D操作畫面型《杜蕾斯美術(shù)館》重力感應(yīng)型《敢在辦公室瘦嗎》雙屏互動型《七夕鵲橋會，愛更多》H5的分類案例展示加強(qiáng)學(xué)生對H5的認(rèn)識激發(fā)學(xué)生對H5的學(xué)習(xí)興趣案例：我們之間就一個字1環(huán)節(jié)5案例：蓋倫莫提2環(huán)節(jié)5H5的分類案例展示加強(qiáng)學(xué)生對H5的認(rèn)識激發(fā)學(xué)生對H5的學(xué)習(xí)興趣案例：圍住神經(jīng)貓34環(huán)節(jié)5案例：四六級方言考試H5的分類案例展示加強(qiáng)學(xué)生對H5的認(rèn)識激發(fā)學(xué)生對H5的學(xué)習(xí)興趣案例：穿越宇宙邀請函56環(huán)節(jié)5案例：淘寶購物節(jié)H5的分類案例展示加強(qiáng)學(xué)生對H5的認(rèn)識激發(fā)學(xué)生對H5的學(xué)習(xí)興趣案例：星際探索之旅78環(huán)節(jié)5案例：2016廣州車展線上VR展廳H5的分類案例展示加強(qiáng)學(xué)生對H5的認(rèn)識激發(fā)學(xué)生對H5的學(xué)習(xí)興趣案例：杜蕾斯美術(shù)館910環(huán)節(jié)5案例：NIKE：每雙球鞋都有一個故事H5的分類案例展示加強(qiáng)學(xué)生對H5的認(rèn)識激發(fā)學(xué)生對H5的學(xué)習(xí)興趣案例：你敢在辦公室瘦嗎1112環(huán)節(jié)5案例：為最愛的TA倒一杯好奶H5的分類案例展示加強(qiáng)學(xué)生對H5的認(rèn)識激發(fā)學(xué)生對H5的學(xué)習(xí)興趣案例：七夕鵲橋會，愛更多1314案例：LOVESTYLE邀你過七夕環(huán)節(jié)5H5的分類案例展示加強(qiáng)學(xué)生對H5的認(rèn)識激發(fā)學(xué)生對H5的學(xué)習(xí)興趣案例：杜蕾斯勞動節(jié)15環(huán)節(jié)5H5的分類案例展示加強(qiáng)學(xué)生對H5的認(rèn)識激發(fā)學(xué)生對H5的學(xué)習(xí)興趣H5制作平臺網(wǎng)站/APP特點(diǎn)

介紹H5制作平臺和工具了解H5制作平臺和工具培養(yǎng)自主探究和團(tuán)隊(duì)合作精神、溝通能力以小組為單位根據(jù)H5網(wǎng)絡(luò)制作平臺或者APP，填寫下表。12木疙瘩歡慶網(wǎng)易企秀兔展人人秀秀米……環(huán)節(jié)6教師介紹H5制作平臺介紹木疙瘩木疙瘩是一個在線制作和管理H5交互頁面的平臺，是北京樂享云創(chuàng)有限公司在2012年研發(fā)的。在2017年，經(jīng)過5年的發(fā)展，木疙瘩從1.0版本升級到2.0版本。目前使用的2.0版本，除了提供通用H5平臺的頁面制作、發(fā)布和統(tǒng)計(jì)服務(wù)，支持文字、圖片、音視頻、數(shù)據(jù)圖表等全媒體形式，可實(shí)現(xiàn)觸控、定位、投票等交互外，關(guān)鍵還支持類似FLASH時間軸關(guān)鍵幀等專業(yè)交互動畫模式的可視化操作，給初入門或者專業(yè)H5制作者更多自由發(fā)揮的空間，成了視覺與創(chuàng)意具備的專業(yè)H5制作平臺。環(huán)節(jié)1注冊木疙瘩平臺了解平臺賬號注冊規(guī)則掌握平臺賬號的注冊環(huán)節(jié)2登錄木疙瘩網(wǎng)址，注冊木疙瘩平臺賬號。網(wǎng)址/介紹木疙瘩工作臺界面熟悉木疙瘩工作臺的界面分布環(huán)節(jié)3介紹木疙瘩制作界面熟悉制作界面的菜單分布了解常用的工具按鈕環(huán)節(jié)4李江在認(rèn)識、了解木疙瘩H5制作工具時，在木疙瘩官網(wǎng)的工作臺首頁，觀看了大量H5案例和視頻教程，也探究了木疙瘩H5制作界面的工具操作，想制作簡單、初級的H5頁面，體驗(yàn)一下木疙瘩制作H5的奇妙之處。情景設(shè)計(jì)任務(wù)2初級H5頁面制作環(huán)節(jié)1H5頁面元素序號元素123……以小組為單位，瀏覽討論H5案例，概括H5頁面包括的元素。登錄網(wǎng)址/lessonlist.php，學(xué)習(xí)制作教程，歸納制作心得。要素制作心得背景文本圖片音樂視頻形狀動畫環(huán)節(jié)

2H5要素的制作心得

準(zhǔn)備素材

制作H5頁面構(gòu)思H5頁面草圖1環(huán)節(jié)3H5頁面的制作步驟H5頁面的制作步驟23環(huán)節(jié)4制作過程及預(yù)覽二維碼環(huán)節(jié)5歸納制作心得序號制作步驟心得1

2

3

4

5

……

環(huán)節(jié)1知識儲備一、 關(guān)鍵幀關(guān)鍵幀是指物體或者角色變化或者運(yùn)動等關(guān)鍵動作所處的那一幀。二、 關(guān)鍵幀動畫關(guān)鍵幀動畫是指通過設(shè)定一個動畫的起始和結(jié)束兩個關(guān)鍵幀，然后通過軟件自動生成動畫過程的一種形式。任何元素的變化過程都可以通過關(guān)鍵幀動畫來實(shí)現(xiàn)。三、 時間軸木疙瘩的時間軸是制作動畫的關(guān)鍵，時間軸把圖層和圖像幀進(jìn)行組合和播放，形成動畫，功能和flash相似，無需代碼，即可制作交互動畫。時間軸面板由圖層、元素幀以及幀區(qū)間組合而成，包含按鈕有新建圖層，新建圖層夾、刪除圖層、洋蔥皮、關(guān)閉可視化圖層、鎖定圖層、轉(zhuǎn)換為遮罩、添加到遮罩、切換為遮罩顯示、幀數(shù)、當(dāng)前幀、當(dāng)前幀時間等，分別如圖所示。環(huán)節(jié)2H5小動畫的制作步驟進(jìn)入網(wǎng)址/lesson.php?id=5948eb0f9aeb7060c44f03d8學(xué)習(xí)關(guān)于小動畫的網(wǎng)絡(luò)教程，歸納H5小動畫制作步驟和心得。序號制作步驟心得1

2

3

……

環(huán)節(jié)2制作H5小動畫的步驟插入關(guān)鍵幀動畫插入關(guān)鍵幀添加元素添加路徑制作步驟設(shè)置動畫方式環(huán)節(jié)2制作過程及預(yù)覽二維碼環(huán)節(jié)3填寫H5小動畫制作心得序號制作步驟心得1

2

3

4

5

……

經(jīng)過一段時間的學(xué)習(xí)和初級H5頁面的制作，李江的H5制作技術(shù)突飛猛進(jìn)，也對H5頁面的制作產(chǎn)生了濃厚的興趣，特別是H5互動頁面，交互性強(qiáng)，應(yīng)用面廣。因此，李江打算制作H5互動頁面，運(yùn)用在公司的日常工作中。情景設(shè)計(jì)任務(wù)3H5互動頁面制作知識儲備環(huán)節(jié)1以小組為單位搜索完成以下問題，以PP的形式上交并進(jìn)行展示。1.什么是客戶關(guān)懷？2.客戶關(guān)懷對公司有什么作用？3.客戶關(guān)懷的方式有哪些？抽獎活動環(huán)節(jié)2聚星公司借周年慶之際，組織老客戶關(guān)懷活動，凡是現(xiàn)場參加公司周年慶活動的老客戶都能通過掃碼進(jìn)入H5頁面，搖一搖隨機(jī)抽取禮品。通過搖一搖隨機(jī)派發(fā)禮品進(jìn)行客戶關(guān)懷有哪些優(yōu)勢和劣勢？優(yōu)勢劣勢制作步驟環(huán)節(jié)31.制作頁面2.設(shè)置頁面隨機(jī)跳轉(zhuǎn)3.設(shè)置觸發(fā)條件4.設(shè)置禁止翻頁制作步驟制作過程及預(yù)覽二維碼環(huán)節(jié)4填寫H5抽獎頁面制作心得環(huán)節(jié)5序號制作步驟心得1

2

3

4

5

……

知識儲備環(huán)節(jié)1公司活動邀請函基本需要包括活動名稱、活動描述、活動時間、活動地點(diǎn)、聯(lián)系人等基本信息，為了便于邀請對象參加活動，還可以設(shè)置溫馨提示，附上行車路線、定位地圖、停車推薦等信息。而現(xiàn)在流行的H5邀請函，還基本包括信息提交表單，便于統(tǒng)計(jì)參加活動情況。H5邀請函優(yōu)點(diǎn)環(huán)節(jié)2以小組為單位討論H5邀請函的優(yōu)點(diǎn)H5邀請函制作步驟環(huán)節(jié)31.制作頁面2.制作提交表單3.設(shè)置數(shù)據(jù)提交4.設(shè)置頁面滑動5.設(shè)置頁面指定位置跳轉(zhuǎn)步驟制作過程及預(yù)覽二維碼環(huán)節(jié)3制作心得環(huán)節(jié)4制作H5邀請函，歸納制作心得。序號制作步驟心得1

2

3

4

5

……

環(huán)節(jié)1知識儲備服務(wù)態(tài)度打字速度應(yīng)變能力學(xué)習(xí)能力客服人員環(huán)節(jié)2制作步驟頁面制作設(shè)置自動評分設(shè)置翻頁環(huán)節(jié)3制作過程及預(yù)覽二維碼環(huán)節(jié)4制作心得為聚星公司制作一個H5互動知識問答頁面，了解應(yīng)聘者的客服知識儲備情況，并填寫制作心得。序號制作步驟心得1

2

3

4

5

……

項(xiàng)目檢測項(xiàng)目檢測一、判斷題（請?jiān)诶ㄌ栔刑顚憽啊獭被颉啊痢保?、H5可以把一些信息存在客戶端，這使得頁面擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度和更流暢的畫面。（）2、關(guān)鍵幀指的是時間軸把圖層和圖像幀進(jìn)行組合和播放形成動畫，它的功能和Flash相似，無須代碼，即可制作交互動畫。（）3、在制作H5互動頁面時，在沒有插入其他