《人机交互设计实践》教学大纲.doc

《人机交互设计实践》教学大纲 课程类别： 课程代码： 课程名称：Human Computer Interaction Practice 学时学分：；学分修课程： 适用专业：计算机科学与技术 开课部门：信息学院 一、课程的地位、目标和任务二、与相关课程的联系与分工每名同学配备一台装有的计算机。Visual Web Developer Express开发软件， 以便调试Javascript代码，JQuery软件库。Firefox需要安装上FireBug插件。 项目二：中学数学练习交互界面的设计与实现 【教学内容】设计并实现具有基本应用功能的交互性界面的设计，要求学生设计一个中学几何练习交互界面 。通过本实践的锻炼，使学生体会标记语言的文档格式，标记语言在界面设计时的应用，熟练完成CSS布局、在标记语言中插入脚本代码，实现客户端的动态效果。用文本文件充当数据库，实现简单的数据检索功能。掌握HTML5元素应用的方法，了解一些常用的图形库以及其中一些常用函数调用的方法。 【教学重点及难点】交互界面定位，浮动，大小控制。图形、背景插入与定位。通过脚本代码和JQuery框架实现客户端的动态效果。Ajax的使用，HTML5元素的使用。常用的图形库以及其中一些常用函数调用的方法。数学公式的表示方法，统计图形的表示方法。 【基本要求】界面布局格式为三列布局或多列布局。每列布局可以根据内容适当分块。左列布局要求是导航栏，导航栏的设计要求有动态折叠效果，或弹出式菜单。界面上方要有横向导航栏，横向导航栏与左侧导航栏可以重，也可以不同，只要能够方便导航即可。导航栏可以做成菜单式的，这是可选项，不属于必做部分。界面要使用CSS进行背景、字体、边框、列表、超链接样式的设计，不要使用标记进行样式设计。界面的内容设计是面向中学生的几何或代数习题和计算器，也可是面向中学生的数学手册。要考虑界面与用户的互动性，可以在界面中插入多媒体。在界面设计时必须包含如下控件：按钮、超链接、文本框、单选按钮、复选框、下拉列表框、列表框、表格。可以用CSS改变它们的样式。界面必须包含动态交互内容，动态功能用JavaScript和JQuery框架实现。动态内容必须包含Ajax的实现。Ajax简单实现包括：界面的至少一部分内容源于其他文本数据库文件，并可以根据不同情况（事件）改变其内容。Ajax提高实现包括：界面的部分内容源于其他文本数据库文件，并可以根据不同情况（事件）改变、检索、筛选其内容，即完成简单数据库检索的功能。界面设计要符合美学原则，色彩搭配、插图合理，并与内容相配。 【主要实践教学条件】每名同学配备一台装有的计算机。Visual Web Developer Express开发软件， 以便调试Javascript代码，JQuery软件库。Firefox需要安装上FireBug插件。 四、学时分配 学时分配 小计 课内学时 课外 学时 讲授 ?实践 （一）人机交互界面设计理论介绍 2 2 （二）色彩，字体，图片，背景的设计及使用 2 4 6 （三）人机交互界面的布局设计 2 4 6 （四）交互控件的使用 2 4 6 （五）Javascript语言、DOM模型和Ajax技术在界面设计中的应用 2 8 10 （六）Jquery框架的应用 2 8 10 （七）HTML5在界面设计中的应用 2 6 8 合 计 48 五、《》指导书《》《》Kris Jamsa, Konrad King, Andy Anderson主编，机械工业出版社出版社，2008年第1版； 3．《》Nicholas C.Zakas主编，人民邮电出版社出版社，2012年第3版； 4．《》Peter Lubbers主编，人民邮电出版社出版社，2012年第2版； （三）参考资料 1．《》 2. 《》《》《》刘西杰，柳林《》Chuck Hudson编著，人民邮电出版社出版社，2013年第1版 6．《》Cesar Otero主编，清华大学出版社出版社，2013年第1版； 六、要求同学按照课堂上教师教授的内容完成相应技术文档的撰写教学方法采用多功能机房授课，突出动手环节，通过综合性任务要求，培养学生实际技能