《信息交互界面設(shè)計(jì)與編程》課程教學(xué)大綱（中英文）

1、- 8 -信息交互界面設(shè)計(jì)與編程教學(xué)大綱課程代碼074101221課程名稱信息交互界面設(shè)計(jì)與編程英文名稱Information interactive interface design and programming課程類別學(xué)科基礎(chǔ)課課程性質(zhì)必修學(xué)時(shí)總學(xué)時(shí)：64上機(jī)實(shí)驗(yàn)學(xué)時(shí)：16實(shí)驗(yàn)學(xué)時(shí)：0實(shí)踐學(xué)時(shí)：0實(shí)創(chuàng)學(xué)時(shí)：0學(xué)分4開課學(xué)期第四學(xué)期開課單位設(shè)計(jì)學(xué)院適用專業(yè)交互設(shè)計(jì)、工業(yè)設(shè)計(jì)、產(chǎn)品設(shè)計(jì)授課語(yǔ)言中文授課先修課程工業(yè)設(shè)計(jì)概論、工程訓(xùn)練畢業(yè)要求（專業(yè)培養(yǎng)能力）本課程對(duì)學(xué)生達(dá)到如下畢業(yè)要求有如下貢獻(xiàn)：1.工程知識(shí)：掌握扎實(shí)的基礎(chǔ)知識(shí)、專業(yè)基本原理、方法和手段，能夠?qū)?shù)學(xué)、自然科學(xué)、本專業(yè)基礎(chǔ)知識(shí)和專

2、業(yè)知識(shí)用于解決復(fù)雜工程問題，并接觸和掌握造型材料、表面技術(shù)、成形工藝和數(shù)字化知識(shí)，為解決企業(yè)機(jī)械工程實(shí)際復(fù)雜問題打下知識(shí)基礎(chǔ)。2.問題分析：能夠應(yīng)用數(shù)學(xué)、自然科學(xué)、本專業(yè)基本原理、方法和手段和工業(yè)設(shè)計(jì)知識(shí)，識(shí)別、表達(dá)、并通過文獻(xiàn)研究分析工業(yè)產(chǎn)品制造性中的復(fù)雜問題，以獲得有效結(jié)論。3.設(shè)計(jì)/開發(fā)解決方案：能夠設(shè)計(jì)針對(duì)工業(yè)產(chǎn)品復(fù)雜問題的解決方案，設(shè)計(jì)滿足特定需求的造型材料、表面技術(shù)或工藝流程，并能夠在設(shè)計(jì)環(huán)節(jié)中體現(xiàn)創(chuàng)新意識(shí)，考慮社會(huì)、健康、安全、法律、文化以及環(huán)境等因素。4.研究：能夠基于科學(xué)原理并采用科學(xué)方法對(duì)工業(yè)產(chǎn)品復(fù)雜問題進(jìn)行研究，包括設(shè)計(jì)實(shí)驗(yàn)、分析與解釋數(shù)據(jù)、并通過信息綜合得到合理有效的結(jié)

3、論。5.使用現(xiàn)代工具：能夠針對(duì)工業(yè)產(chǎn)品復(fù)雜問題，開發(fā)、選擇與使用恰當(dāng)?shù)募夹g(shù)、資源、現(xiàn)代工程工具和信息技術(shù)工具，包括對(duì)工業(yè)產(chǎn)品復(fù)雜問題的預(yù)測(cè)與模擬，并能夠理解其局限性。課程培養(yǎng)學(xué)生的能力（教學(xué)目標(biāo)）完成課程后，學(xué)生將具備以下能力：（1）掌握信息交互界面設(shè)計(jì)的基本原理和基本知識(shí)，培養(yǎng)學(xué)生發(fā)現(xiàn)問題、解決問題的基本能力。1、2（2掌握信息交互界面編程概念，并逐步在設(shè)計(jì)過程中應(yīng)用這些先進(jìn)技術(shù)，從而能將精力集中于創(chuàng)意和構(gòu)思，高效地開展創(chuàng)新活動(dòng)。3、5課程簡(jiǎn)介課程是工業(yè)設(shè)計(jì)的專業(yè)基礎(chǔ)課，也是交互設(shè)計(jì)專業(yè)學(xué)生的一門必修課，通過本課程學(xué)習(xí)，使學(xué)生具備PC網(wǎng)站和手機(jī)端網(wǎng)站整體策劃、建設(shè)、維護(hù)和管理的基本知識(shí)，能熟

4、練運(yùn)用網(wǎng)頁(yè)制作軟件和編程語(yǔ)言進(jìn)行網(wǎng)站的創(chuàng)建、布局和編輯，熟悉網(wǎng)站美工創(chuàng)作、動(dòng)畫設(shè)計(jì)與制作，能夠根據(jù)相關(guān)主題進(jìn)行網(wǎng)站設(shè)計(jì)和制作。教學(xué)內(nèi)容與學(xué)時(shí)分配（一）緒論：明確本課程的任務(wù)、要求、內(nèi)容和學(xué)習(xí)方法 4學(xué)時(shí)（1）思政教學(xué)1學(xué)時(shí)十八大互聯(lián)網(wǎng)+發(fā)展的理解新工科人才發(fā)展的理解（2）課程導(dǎo)論 3學(xué)時(shí)1.課程概述2. 開發(fā)工具介紹（二）界面原型設(shè)計(jì) 4學(xué)時(shí)1. 界面原型設(shè)計(jì)流程2. 界面原型設(shè)計(jì)工具（三）HTML5文字與圖像4學(xué)時(shí)1. 文字與排版2. 超鏈接3. 嵌入圖片（四）HTML5列表表格表單4學(xué)時(shí)1. 列表2. 表格3. 表單（五）層疊樣式表CSS選擇器4學(xué)時(shí)1.CSS基本概念2.CSS選擇器3.C

5、SS選擇器優(yōu)先級(jí)（六）層疊樣式表CSS布局 4學(xué)時(shí)1. 盒子模型2. 定位（七）層疊樣式表CSS3 4學(xué)時(shí)1. CSS3簡(jiǎn)介2. CSS3新增選擇器3. CSS3文本、字體4. CSS3轉(zhuǎn)換、過渡、動(dòng)畫（八）響應(yīng)式Web設(shè)計(jì)4學(xué)時(shí)1. 響應(yīng)式Web設(shè)計(jì)簡(jiǎn)介2. 視窗- Viewport3. 媒體查詢與斷點(diǎn)4. 彈性框Flexbox（九）響應(yīng)式圖片與表格4學(xué)時(shí)1. 響應(yīng)式圖片2. 響應(yīng)式表格（十）腳本JavaScript簡(jiǎn)介4學(xué)時(shí)1. JavaScript簡(jiǎn)介2. JavaScript循環(huán)3. JavaScript函數(shù)（十一）HTML5 Video與Audio4學(xué)時(shí)1.HTML5 Video2.

6、 HTML5 Audio（十二）Web前端框架Bootstrap4學(xué)時(shí)1. Bootstrap簡(jiǎn)介2. Bootstrap 網(wǎng)格系統(tǒng)3.Bootstrap 布局組件（十三）Web前端框架jQuery4學(xué)時(shí)1.jQuery簡(jiǎn)介2. jQuery DOM 操作3.jQuery 遍歷（十四）移動(dòng)端界面設(shè)計(jì)4學(xué)時(shí)1.移動(dòng)頁(yè)面構(gòu)成2.組件3. 輸入與輸出（十五）Web前端移動(dòng)端框架jQuery mobile4學(xué)時(shí)1. jQuery mobile簡(jiǎn)介2. jQuerymobile組件（十六）Wechat小程序開發(fā)簡(jiǎn)介4學(xué)時(shí)1.Wechat小程序簡(jiǎn)介2. Wechat小程序開發(fā)工具2. Wechat小程序開

7、發(fā)示例實(shí)驗(yàn)教學(xué)（包括上機(jī)學(xué)時(shí)、實(shí)驗(yàn)學(xué)時(shí)、實(shí)踐學(xué)時(shí)、實(shí)創(chuàng)學(xué)時(shí)）實(shí)驗(yàn)16學(xué)時(shí),實(shí)踐0學(xué)時(shí)，實(shí)創(chuàng)學(xué)時(shí)：0教學(xué)方法課程教學(xué)以課堂教學(xué)、課外作業(yè)、綜合討論、網(wǎng)絡(luò)以及授課教師的科研項(xiàng)目于積累等共同實(shí)施?？己朔绞狡綍r(shí)作業(yè)和課堂表現(xiàn)：30%，課程設(shè)計(jì)占70%。教材及參考書主要參考資料：1HTML5+CSS3+jQuery Mobile輕松構(gòu)造APP與移動(dòng)網(wǎng)站陳婉凌著，清華大學(xué)出版社，2014年2HTML5程序設(shè)計(jì)Peter Lubbers 等著；柳靖等譯，人民郵電出版社，2012年3移動(dòng)應(yīng)用界面設(shè)計(jì)Steven Hoober, Eric Berkman等著；柳敏等譯，機(jī)械工業(yè)出版社，2013年4JavaScr

8、ipt寶典 Danny Goodman（美），電子工業(yè)出版社，2009年5移動(dòng)Web開發(fā)從入門到精通. 王翠萍. 中國(guó)鐵道出版社. 2016Information Interactive Interface Design and Programming SyllabusCourse Code074101221Course TitleInformation Interactive Interface Design and ProgrammingEnglish TitleInformationInteractive Interface Design and ProgrammingCourse Ca

9、tegoryBasic coursesCourse NatureCompulsorycoursesCredit HoursTotal: 64 Computer: 0 Experiment: 0 Practice: 0 Practical innovation: 16Credit4SemesterFourth SemesterInstituteSchool of DesignProgram OrientedInteraction design, industrial design and product designTeaching LanguageTeaching in ChinesePrer

10、equisitesConcept of industrial design and engineering training IStudent Outcomes (Special Training Ability)This course contributes to student outcomes as follows: 1. Engineering knowledge: master the basic knowledge, professional basic principles, methods and means to be able to apply mathematics, n

11、atural science, basic knowledge and expertise of this major to solve complicatedly engineering problems, and contact and master the modelling materials, surface technology, formation process and digital knowledge to lay knowledge foundation for solving actual complex problems of machinery project of

12、 enterprise.(2) Problem analysis: apply the basic principles, methods and means of the mathematics, natural science and the major as well as knowledge related to the industrial design to identify, express and obtain effective solutions through complicated problems in the literature research and anal

13、ysis design product.3. Design/development solution: capable of designing the solution aiming at the complex problems of industrial products, designing the modeling materials, surface technology or process flow meeting the specific demands, embodying innovation awareness in the design link, and consi

14、dering society, health, safety, law, culture, environment, etc.4. Research: research the complex problems of the industrial products based on the scientific principle and scientific method, including design experiment, analysis and interpretation data, obtaining rational and effective conclusion by

15、comprehensive information.5. Use modern tools: capable of developing, selecting and using proper technology, resource, modern project tool and information technology tool aiming at the complex problems of the industrial product, including predicating and simulating the complex problems of the indust

16、rial product as well as understanding the boundedness.Course for Students Ability Development (Teaching Objectives)After the courses, students will have the following capabilities:(1) Master the basic principles and knowledge of information interactive interface design, and cultivate the basic capab

17、ility for students to find out and solve problems. 1、2(2 Master the concept of information interactive interface programming and apply the advanced technologies in the design process gradually , concentrate the energy in the creation and concept so as to develop the innovation activity effectively.

18、3、5Course DescriptionThe course is a specialized core course of industrial design and a compulsory course for students of interactive design major. Through this course, students will enjoy the basic knowledge of overall planning, building, maintenance and management of PC website and mobile phone we

19、bsite. Students can be familiar with the use of website to develop software and programming language for creation, layout and editing of the website, as well as the site art designing creation, animation design and production so that they can carry out the website design and production in accordance

20、 with relevant themes.Distribution of Teaching Contents and Class Hours(1) Introduction: Define the tasks, requirements, contents and learning methods of the course4 class hours1) Ideological and political education 1 class hourUnderstanding of Internet + development of the 18th CPC national congres

21、sUnderstanding of new engineering talent development2) Course introduction 3 class hour1. Course overview2. Introduction of Development Tools(2) Interface prototype design4 class hours1. Interface prototype design process2. Interface prototype design tools(3) HTML5 Text and Image4 class hours1. Text

22、 and Typesetting2. Hyperlinks3. Embedded Pictures(4) HTML5 List , Table and Form4 class hours1. List2. Table3. Form(5) Cascading Style Sheet- CSS Selector 4 class hours1. Basic concepts of CSS2. CSS selector3. CSS selector priority(6) Cascading Style Sheet CSS Layout4 class hours1. Box model2. posit

23、ioning(7) Cascading Style Sheet CSS3 4 class hours1. Introduction to CSS32. Additional selectors for CSS33. CSS3 Text and Font4. CSS3 Transition, Animation(8) Responsive Web Design 4 class hours1. A Brief Introduction to Responsive Web Design2. Viewport3. Media queries and breakpoints4. Flexbox with

24、 elastic frame(9) Responsive Pictures and Forms4 class hours1. Responsive pictures2. Response Form(10) Introduction to script JavaScript 4 class hours1. Introduction to JavaScript2. JavaScript loops3. JavaScript functions(11) HTML5 Video and Audio 4 class hours1. HTML5 Video2. HTML5 Audio(12) Bootst

25、rap of Web Front-end Framework4 class hours1. Introduction to Bootstrap2. Bootstrap grid system3. Bootstrap layout component(13) jQuery of Web Front-end Framework4 class hours1. Introduction to jQuery2. jQuery DOM operation3. jQuery traversal(14) mobile interface design4 class hours1. Mobile Page Co

26、mposition2. components3. Input and output(15) jQuery Mobile ofWeb Front-end Mobile Framework4 class hours1. Introduction to jQuery Mobile2. jQuery mobile component(16) Introduction to Wechat Small Program Development4 class hours1. Introduction to Wechat applet2. Wechat applet development tool2. Examples of Wechat applet development Experimental teaching (including computer class hours, experimental class hours, practice class hours, practical innovation class hours)Experiment