Web程序设计课程教学改革与实践

李 亚，王 青

（ 1. 广州大学 计算机与教育软件学院，广东 广州510006；2. 中山大学 数据科学与计算机学院，广东 广州 510006）

Web程序设计课程教学改革与实践

李 亚1，王 青2

（ 1. 广州大学 计算机与教育软件学院，广东 广州510006；2. 中山大学 数据科学与计算机学院，广东 广州 510006）

Web技术发展迅速，传统的Web程序设计课程已经无法满足时代要求。文章分析目前Web程序设计课程教学存在的主要问题，从教学内容、教学实践、课程考评机制等多方面阐述课程改革的主要过程，并说明改革成果。

Web程序设计；浏览器编程；集体学习；JavaScript；PHP；Ajax

0 引 言

截至2016年12月，我国网站数量为482万个，网民规模达7.31亿，互联网普及率达53.2%[1]。一方面，随着互联网技术不断发展，Web应用不断增加，Web编程在软件产业中的比重越来越大，软件产业对Web开发人员的需求量迅猛上升，作为Web开发人员基本专业课程的Web程序设计课程日益重要；另一方面，Web 2.0时代的Web应用更看重用户体验，用户期望能够通过浏览器及时高效地与Web应用交互，获取需要的信息与服务，因此，现代Web更注重前端（客户端）技术，如HTML、CSS、JavaScript、Ajax、RIA、JavaScript框架与类库、Mashup等。了解Web重要性和掌握这些Web技术能够加深学生对计算机科学与技术的理解，提高学生发现和解决问题的能力。

1 目前课程教学存在的问题

1.1 课程教学内容知识结构不合理

现有Web程序设计课程教学内容大部分仍然以服务器端技术为主，如ASP、ASP.NET、PHP、JSP等，少有前端技术，难以满足现代Web应用的需要。少数院校以JavaScript为主要教学内容，但局限于JavaScript语言本身，没有与其他技术结合起来形成一个完整的Web前端技术堆栈。总的说来，现有Web程序设计课程已经不能满足Web技术的发展，不能适应产业发展的需要，难以培养业界亟须的具备现代Web应用设计开发能力的软件工程师。

1.2 教师主导的灌输式教学方法陈旧

现代Web程序设计技术发展迅速且内容庞杂，传统的教学方法和教学环境难以应对实际需求。Web专用的编程语言包括HTML、CSS、JavaScript、JSP、PHP、Servlet、ASP等，且几乎所有的现代主流编程语言都支持Web编程，并有各自标准的Web框架，如J2EE、.NET ASP Framework、Django、Rails等，各种前端的Web JavaScript框架和类库更是有如过江之鲫，不胜枚举。传统教学方法由教师驱动教学，教师通过课堂教学讲解主要知识点，并结合实验引导学生对所学内容进行巩固练习，师生间的互动局限于课堂，学生之间缺少有效的集体讨论与互相学习，学生碰到各种棘手难题时难以得到及时有效的帮助。

1.3 考核方式简单、僵化

课程考核一般采用期末考试70%、平时表现30%的方式，这种考核方式轻实践、重理论，轻过程、重结果，不能客观、公平、全面地评价学生对课程知识的掌握程度，也不能激发学生的学习积极性[2]。Web技术实践性强、工程化思想突出，课程要求学生应具备较强的实践动手能力，课程考核应注重考查学生的平时成绩和实际动手能力。

2 教学内容改革

现代Web以Ajax技术的问世为开端，强调Web应用的可用性和用户体验，Web应用的逻辑也由此分离出业务逻辑和表示逻辑，且表示逻辑逐渐从服务端迁移到浏览器端。浏览器不再是瘦客户端(Thin Client)，客户端技术（浏览器编程）也不再仅仅是用户界面和交互设计，还具有程序设计的内容。当前Web技术的核心不再局限于服务端，而是客户端和服务端并重，客户端是服务端的基础，服务端的所有技术都是为了输出客户端代码，如果不能掌握和理解客户端技术，就很难说真正理解服务端的代码和技术，也难以真正高效使用。以客户端技术为起点讲授符合现代技术发展趋势的Web程序设计技术；同时，通过Web技术引导学生思考计算机科学中的原理、规律、模式和最佳实践，可以逐步培养学生科学规范的软件开发习惯。

2.1 知识点构成

课程内容板块间的关系与Web技术发展史的逻辑相对应，由浅入深、由易到难、由基础技术到高级技术，知识点结构如图1所示。

2.1.1 基础知识

图1 Web程序设计课程知识点结构

基础知识讲解基本的互联网、Web知识和静态页面技术，包括HTML、CSS与简单的Web界面设计，共6个课时。值得注意的是，静态页面技术已经取得较大发展，课程内容以现代静态页面技术为准，并结合技术演进，深入介绍技术发展及其背后的本质原因，如介绍页面布局技术时，讲解利用div和span进行无表格布局技术，通过和早期利用表格进行布局的技术对比，引导出软件设计中重要的关注分离原则[3]。

2.1.2 服务器编程

该部分讲解简单的服务器编程，其目的在于实现简单动态网页，为浏览器编程提供技术基础，共6个课时。现代Web应用中，服务端程序有两大功能：实现应用的业务逻辑和生成应用的表示层代码，也就是客户端和浏览器代码，即HTML、CSS、JavaScript等。真正复杂的部分在于实现应用的业务逻辑，由于这些内容很多与Web并无直接关系，大多属于分布式程序设计和企业应用设计的范畴，会在其他课程中讲授，所以本课程弱化了这部分内容。本课程选用PHP作为服务器端语言，因为在众多服务端编程语言中，PHP相对较为简单易学，有助于学生快速掌握，把更多精力留给浏览器编程；重点讲解如何编写动态网页程序，根据浏览器请求产生出不同的客户端代码返回，并重点强调对Web服务器和浏览器交互过程的理解。

2.1.3 浏览器编程

浏览器编程是课程的技术重心，共8个课时，着重讲解JavaScript语言、DOM模型以及浏览器中网页加载、渲染、交互的过程、原理和机制，并介绍prototype和script.aculo.us JavaScript工具箱。从技术上说，浏览器编程就是使用JavaScript编程语言操纵浏览器DOM对象。现代Web程序设计中，浏览器编程从语言、框架、工具到范式都和以前的Web有着巨大差异。浏览器不再是瘦客户端，而是承担Web应用的表示逻辑，一系列原本在服务端使用的软件技术都在浏览器端出现和使用，如面向对象技术、设计模式、测试驱动的开发、行为驱动的开发、构件化开发等。此外，浏览器编程还推动其他技术的发展，如声明式程序设计、函数式程序设计等。该部分课程内容详细讲解这些技术在浏览器编程中的应用，引导学生熟练掌握现代Web浏览器编程的方法、过程和编程范式。

2.1.4 现代Web编程

现代Web编程是本课程的重点，共12个课时。在前面服务器编程和浏览器编程的基础上，该部分内容较为全面地覆盖了现代Web客户端技术（如Ajax、RIA、Mashup、Web服务（客户端）等），还对现代Web程序设计中的重点和难点问题进行深入分析（包括Cookie、SessionWeb程序安全）。此外，对于现代Web客户端技术的最新发展和其他相关技术也做出介绍，如HTML 5、云计算、语义网、Web 3.0、现代Web应用中的软件工程等。

2.1.5 公共基础

公共基础部分包括正则表达式和XML的内容，这两种共性技术在多种技术中都有应用，因此将其穿插在服务器编程和浏览器编程中进行介绍。

2.2 实践环节

实践环节通过8次实验、7次程序设计作业和1个课程设计，对教学知识点内容进行全方位的巩固加强，提高学生的实际动手能力。

2.2.1 实 验

8次实验总共16学时，每两周一次，实验内容与教学内容紧密结合，由浅入深。实验1是基础HTML和CSS，包括基本的HTML标签和CSS属性（颜色、字体、文本等）的使用；实验2是 CSS设计和布局，使用CSS进行无表化布局；实验3是基本的PHP使用，练习基本的PHP语法和文件读写；实验4是表单和PHP，使用PHP处理HTML表单；实验5 是基于JavaScript的交互式用户界面，包括基本的JavaScript语法和简单JavaScript事件处理器；实验6是 JavaScript DOM和事件，综合使用HTML、JavaScript和CSS进行非侵入式客户端编程；实验7是基本的Ajax编程；实验8是旅行日志，实现多来源文本、地图与图片信息的聚合。

2.2.2 程序设计作业

作业大致每2周一次，要求学生课后独立完成，其工作量和难度均超过实验。布置作业的目的在于深化和巩固所学知识，将课程知识进一步转化为“活”的知识。作业1是菜谱制作，用简单的静态网页展示菜谱信息，要有CSS修饰；作业2是电影评论静态网页，实现带有复杂布局的静态网页；作业3是电影评论动态网页，将作业2中的网页变成动态网页，要求用PHP读写文件；作业4是速配网站，用PHP处理HTML表单；作业5是ASCII字符动画，用简单JavaScript编程实现；作业6是拼图游戏，用JavaScript操纵DOM实现；作业7是备忘录，通过Ajax消费Web服务。

2.2.3 课程设计

为了让学生能对各章节知识点和技术实现融会贯通，笔者在课程后半学期安排课程设计，要求学生开发一个完整的学生作业管理系统。课程设计有9项必选的核心需求和3项可选的扩展需求，并且鼓励学生创新，自行添加新的合理需求。课程设计引导学生综合利用各种Web技术，完成真实的Web 2.0应用，帮助他们进一步梳理和巩固所学知识和技术。

3 教学实践探索

课程教学中以案例为驱动，同时结合实验、作业及课程设计，着重培养学生的动手实践能力。让学生通过实践掌握和理解课程知识点，并加以融会贯通，学到“活”的知识。此外，课程基于自组织学习理论[4]和Learning 2.0技术[5]，设计课程教学环境，构建教学基础设施。

3.1 案例驱动式教学

课程中各部分内容都结合相应案例进行教学。首先通过案例提出问题，然后引导学生思索解决方案，再进一步引出具体的Web技术。课程使用一个贯穿始终的案例，其发展路线如图2所示。

3.2 配置教学基础设施

课程教学特别重视自组织学习与集体学习，笔者利用现代Web技术建设教学基础设施，并在此基础上实施用户创造内容、集体学习、反馈控制、可视化数据呈现等Learning 2.0的最佳实践。

3.2.1 教学基础设施

课程基础设施由Wiki、自主开发的作业管理系统——MyWeb 2.0、服务端课程作业项目管理与运行环境等工具和应用组成。Wiki是知识管理工具，不仅汇集课程教材、幻灯片讲义、在线讲义、实验规格说明、作业规格说明和课程设计规格说明，还包括师生对这些内容的讨论等协同创造的内容。MyWeb 2.0是自主开发的开源作业管理系统，学生可以提交和管理自己的作业（项目），并用可视化技术展示课程成果。服务端课程作业项目管理与运行环境包括FTP服务器、Subversion版本管理服务器和Apache Web服务器（含PHP运行环境），用以管理学生作业源代码与测试部署学生作业。

3.2.2 用户创造内容

课程内容不仅来源于任课教师，师生对课程内容的讨论结果也会汇集到相关知识点所在的Wiki页面，形成新的教学内容，使得课程内容在教学中不断完善、与时俱进。用户创造内容还能调动学生主动参与课程、参与集体学习的积极性。此外，Wiki和用户创造内容本身就是Web 2.0技术的应用之一，对技术应用的亲身体会更能激发学生学习的兴趣。

3.2.3 集体学习

图2 教学案例路线图

得益于课程基础设计提供的便捷沟通方式和知识分享渠道，课程学习过程中的拓扑结构不再是以教师为中心的星型，而是由学生、助教和老师共同构成的网状。学生补充并创造大量的课程内容，还通过教学基础设施提供的平台，快捷高效地互相学习、互相帮助。如学生在完成作业时遇到难题不能解决时，就可以在该作业所在的Wiki页面上提问，其他已经知道解决方案的学生可以为其解答。这种及时沟通的方式，快速有效地解决了学生在学习和编程实践中遇到的技术细节问题，形成集体学习的氛围。这种基于Wiki的集体学习还有两大优势：①明确的上下文，使得对话精炼高效，如上述问答本身就在发现问题的作业页面上，所以不用额外描述问题产生的场景，使得表达精炼、清晰、高效；②讨论结果成为课程内容的补充，能够在所有学习者之间共享，这样附着于相应课程内容的讨论，不仅为学生提供集体学习和快速解决问题的途径，更能补充丰富当前Wiki页面的内容，能够为所有学生借鉴参考。

3.3 改革考核机制

课程考核是对学生学习行为、过程和成果是否达到既定的课程学习目标进行测评与度量，是学生学习效果最直接的反映。目前，多数高校仍侧重于期末考试这一终结性评价方式，这种评价方式重结果、轻过程，容易造成临时抱佛脚、突击学习应付考试等不良现象[6]。对此，我们引入形成性评价方法，注重学生平时实验和作业的表现，及时给出阶段性成绩，帮助学生养成良好的学习习惯，逐步形成为提高能力而学的主动学习态度；重视学生反馈，持续收集学生对课程内容、教学进度、教学方法、作业安排、实验难度等多方面的反馈意见，并在每周的教学内容中有针对性地及时做出调整。

Web程序设计的课程考核分阶段、多元化进行，注重平时成绩，注重实际动手能力。课程考核分为5部分：理论课参与、实验课参与、平时作业、课程设计和期末考试，其权重分别是0.05、0.05、0.3、0.2和0.4。平时作业的成绩是7次作业成绩的综合，学生通过MyWeb 2.0作业管理系统上传作业，由MyWeb 2.0检查及部署，以可视化的方式展示学生历次作业的运行截图、分数和小组排名/全班排名，并给出作业源码和在线运行实例的链接。此外，MyWeb 2.0还用折线图的方式表示学生历次作业的分数与排名情况的变化。通过这种方式，学生的学习成果和学习成长经历不再是枯燥的代码和冷冰冰的数字，而是形象的可交互的图表和应用。这样的管理评价方式能促使学生更加关注学习的过程，调动学生学习的积极性，使其从被动地“要我学”变成主动地“我要学”，最终促进教学质量的提高。

4 结 语

经过教学内容、授课方式、考评机制等方面的变革和探索，课程在教学实践中取得良好的教学效果。学生普遍喜爱该课程，积极主动地参与教学活动，认真完成实验、作业、课程设计等实践任务，其中有不少作品体现出较高地Web编程水平，期末考试和课程总评成绩显示大部分学生达到课程教学大纲的要求，较好地掌握了现代Web前端程序设计的基本知识和技能。今后笔者在完善课程内容的同时，还将从以下两方面积极探索：①在课程建设和教学实践中加强与产业界联系，及时获取来自产业界的技术发展信息；②探索课程和人工智能技术的契合点，提高课程的学术深度。

[1] 中国互联网络信息中心(CNNIC). 第39次中国互联网络发展状况统计报告[EB/OL].（2017-01-22）[2017-06-23]. http://www.cnnic.cn/gywm/xwzx/rdxw/20172017/201701/t20170122_66448.htm.

[2] 储久良. Web前端开发技术课程教学改革与实践[J]. 计算机教育, 2014(14): 12-15.

[3] Wikipedia. Separation of Concerns[EB/OL]. [2017-6-26]. https://en.wikipedia.org/wiki/Separation_of_concerns.

[4] Thomas L, Harri-Augstein E. Augstein：Self-organised learning: Foundations of a conversational science for psychology[M].Oxford: Routledge, 1985.

[5] 杜世纯, 傅泽田. 混合式学习探究[J]. 中国高教研究, 2016(10): 52-55.

[6] 曹国刚, 蓝星, 李文举, 等. 形成性评价在软件工程专业课程中的实践研究[J]. 计算机教育, 2017(6): 40-44.

1672-5913(2017)11-0065-05

G642

李亚，女，讲师，研究方向为计算机视觉、模式识别，liya@gzhu.edu.cn；

王青（通信作者），男，副教授，研究方向为人机交互、机器学习，wangq79@mail.sysu.edu.cn。

（编辑：史志伟）