Web 2.0程序设计课程教学研究
王青1, 李文军1，刘汇洋1
(1.中山大学软件学院，广东省广州市510006)
摘要：现在的Web 2.0时代，Web技术发展迅速、变化巨大，传统的Web程序设计课程内容已经无法满足要求。本文介绍了中山大学软件学院和Google公司共建的“SE-805 Web 2.0 Programming”开放课程。目前，该课程已全球分享，并获得了“2010 Google Education Award”奖项。同时，基于该课程，中山大学软件学院和Google公司还先后培训了全国67所高校的119名教师。本文详细阐述了该课程的内容设计、教学方法与教学实践。通过SE-805课程的建设和教学探索，证实了以前端技术为核心的现代Web程序设计课程受到高校学生、教师和产业界人士的欢迎，为他们所喜爱。同时，实践还证明在教学中使用基于Web 2.0技术的新工具，能够促进集体学习，提高教学效率。
关键词：Web 2.0；浏览器编程；集体学习；JavaScript；PHP；Ajax
1前言
现代Web程序设计课程十分重要。随着互联网技术的不断发展，Web应用不断增加，Web编程在软件产业中的比重越来越大。自2003年开始，中国的网页规模连续快速增长，2010年网页总量已达600亿个，年增
长率78.6%[20]。与之相伴，软件产业对Web开发人员的需求量也迅猛上升[10, 19]。因此，作为Web开发人员的基本专业课程，Web程序设计课程日益重要，目前全国大部分高校均已经开设Web程序设计课程[26]。
另一方面，从本世纪开始，互联网进入了Web 2.0时代。Web 2.0时代的Web应用更看重用户体验，期望用户能够通过浏览器及时、高效地与Web应用交互，获取需要的信息和服务[3]。因此，Web 2.0 技术更注重前端（客户端）技术，包括HTML、CSS、JavaScript、Ajax、RIA、JavaScript框架与类库、Mashup等等[4]。这些现代Web技术，都是计算机技术的重要发展[1]。掌握好这些Web技术能加深学生对计算机科学与技术的理解，提高学生发现和解决问题的能力。例如：在Web程序设计中贯穿始终的声明式编程范式、函数式语言特点都是现有程序设计课程内容的良好补充[2]。
因此，高质量的Web程序设计课程是时代发展和人才培养的需要，十分重要。然而，现有的Web程序设计课程教学内容却大多与时代脱节，仍然主要以服务器端技术为主，如ASP、PHP、JSP等等，而少有前端（客户端）技术[21-23]，难以满足现代Web应用的需要；有少数课程以JavaScript为主要内容[24]，但是其内容局限于JavaScript语言本身，并没有与其它技术结合起来，形成一个完整的Web前端技术堆栈。总的说来，现有Web程序设计课程已经不能满足Web技术的发展，不能适应产业界的需要，难以培养业界亟需的具备现代Web应用设计开发能力的软件工程师[10]。
此外，现代Web程序设计技术发展迅速、内容庞杂，传统的教学方法和教学环境难以应对。Web技术自20世纪90年代产生后，短短十几年的时间便经历了静态页面、动态页面，到现在的Web 2.0应用几个发展阶段，发展十分迅速[5]。目前各种Web技术更是层出不穷，内容庞杂，单是Web专用的编程语言就有HTML、CSS、JavaScript、JSP、PHP、Servlet、ASP等等；而此外几乎所有的现代主流编程语言都支持Web编程，并有自己标准的Web框架，如J2EE、.NET ASP Framework、Django、Rails等等。各种前端的Web JavaScript框架和类库更是多如过江之鲫，不胜枚举[6]。
这样的情况下，Web编程技术的学习内容庞杂、实践性强，学生在学习中很容易遇到各种棘手难题，很多都可能使得编程学习无法继续进行。这些难题包括开发运行环境配置问题、
框架或类库API使用问题、异常分析与排除等等。传统教学方法由老师驱动教学，老师通过课堂教学讲解主要知识点，并结合实验课引导同学对所学内容进行练习和巩固。显然，这样的方式，老师和学生间的互动局限于课堂，同学间也缺少有效的集体讨论与互相学习，因而难以在遭遇上述各种棘手难题时得到及时有效的帮助。
针对上述问题，中山大学软件学院和Google公司共建了SE-805 Web 2.0 Programming 开放课程（课程资源详情请参考附件一：SE-805课程资源一览表），期望用最新的教学方法讲授最新的Web技术。该课程在Web程序设计课程内容和教学方法上进行了积极有效的探索，自2010年春季起在中山大学开设以来
得到了学生的广泛好评和喜爱。同时，在先后于2010年7月和2011年6月、7月举办的3期Web 2.0程序设计课程教学研讨会和培训班上，该课程也得到了来自北京大学、上海交通大学等67所高校的119名教师的一致赞赏。Google 公司于2010年9月在Google Code University上发布了该课程课件1，与斯坦福大学、普林斯顿大学、华盛顿大学等国际名校的课程一起全球分享。这也是来自中国的大学第一次在Google Code University上发布课程。课程教师团队还因此课程荣获了2010年度的“Google Research Award”奖项。
在SE-805课程的建设和教学探索中，课程教师团队探索和研究了以下问题：
1.如何设计、建设、教学实施以前端技术为核心的现代Web程序设计课程？
2.如何利用Web 2.0技术服务程序设计类课程教学，提高教学效率、改善学习效果？
本文后面部分将详细阐述以上问题。各部分做如下安排：第2部分介绍SE-805课程的内容与知识体系设计；第3部分介绍SE-805课程的教学基础设施和最佳实践；第4部分回顾了SE-805课程的教学效果；第5部分总结了历次基于SE-805的课程推广和师资培训结果；最后，第6部分总结并展望了下一步工作。
2课程设计
前言指出现有Web程序设计课程忽视了客户端技术，难以适应现代Web应用发展。SE-805课程尝试将W
eb程序设计课程的重点从服务端转向客户端，让课程符合Web技术的特点，适合时代发展的需要。
2.1 课程目标
SE-805课程的目标是适应Web技术发展，以客户端技术为起点讲授符合现代技术发展趋势的Web程序设计技术，为Web产业推广技术和培养人才。同时，通过Web技术，引导学生思考计算机科学和软件工程中的原理、规律、模式和最佳实践，逐步培养科学规范的软件开发习惯。
2.2 课程对象及与其它课程关系
SE-805课程目前是中山大学软件学院的一门专业选修课（3个学分，54学时，其中实验18学时），面向软件工程、计算机科学与技术、网络工程、信息安全和其它相关专业学生。课程与软件学院其它课程有较为紧密的联系，参考图1。
1le/intl/zh-CN/edu/ajax/index.html
图  1 课程体系关系图
2.3 课程内容结构
SE-805课程设计把握了现代Web技术的本质脉络，即服务端服务于客户端，客户端技术是服务端技术的基础。课程以客户端技术为中心，辅以简单、必要的服务端技术2，使得学生在学习后能够初步具备现代Web应用前端工程师的基本技术能力。
2.3.1 以客户端为中心的理由
早期Web，以静态页面为主，Web技术比较简单，主要是HTML、CSS等标记语言的使用。中期Web，开始出现动态页面，用程序根据用户的请求动态生成HTML，Web从文档走向应用，成为大量应用、特别是现代分布式应用的表示层。这一阶段，Web技术不断发展，特别是服务端技术，各种动态页面语言和Web应用框架纷纷问世，Web应用也就是常说的浏览器/服务器模式（B/S，Browser/Server），其逻辑集中在服务器端，Browser是典型的瘦客户端（Thin-Client），技术的核心毫无疑问在服务端。此时的客户端，更多的技术内容是用户界面和交互设计，而不是程序设计。
现代Web以Ajax技术的问世为开端，强调Web应用的可用性和用户体验，Web应用的逻辑也因此分离出业务逻辑和表示逻辑，而表示逻辑逐渐从服务端迁移到浏览器端，导致了一场名为Web 2.0的技术革命[
3-4, 11]。至此，Browser不再是瘦客户端，客户端技术（浏览器编程）也不再仅仅是用户界面和交互设计，而有了大量程序设计的内容，JavaScript就是浏览器端程序设计的语言。
经过Web 2.0多年的发展，JavaScript语言的迅猛发展、各种前端框架层出不穷[6, 12-13]，新的编程范式日益显现[14]。时至今日，Web技术的核心不再局限于服务端，而是客户端服务端并重。二者当中，客户端是服务端的基础，服务端的所有技术都是为了输出客户端的代码。如果不能够掌握和理解客户端技术，就很难说真正理解了服务端的代码和技术，难以真正高效使用[10]。
然而，目前大部分高校Web程序设计课程的内容还停留在中期Web时代，强调服务端的技术，而少有涉及客户端技术。这使得学生缺乏对客户端技术的了解，难以参与现代Web 应用开发。例如：现代Web应用常用的各种用户界面控件（UI Widget）常常通过异步请求的方式从服务端获取数据，需要服务端提供相应的Web服务（Web Service）来提供这些的数据。如果不理解前端的控件使用的HTML、CSS和JavaScript语言，不清楚它的工作原理，不知道它如何和服务端通信，不明白它如何发送和解析数据；那么，无论是开发这样的Webweb前端开发技术第三版pdf
2 更多复杂的服务端技术，在“云计算”、“服务计算”、“JEE与中间件”等课程中讲授。
服务，还是调试、维护这样的Web应用都会困难重重。
出于上述考虑，中山大学软件学院和Google公司在多次对SE-805课程内容进行讨论之后，确定了“以客户端技术为中心，辅以简单、必要的服务端技术，使得学生能够具备现代Web应用前端工程师的基本技术能力”的课程建设指导原则。
2.3.2 知识点结构
SE-805课程内容板块间的关系逻辑上与Web技术发展史相对应，由浅入深、由易到难、由基础技术到高级技术，参见图2。
图  2 SE-805知识点结构
2.3.2.1 基础知识
基础知识是整个课程的开端，共计5节，讲解基本的互联网（Internet）和Web知识，以及早期Web技术的核心——静态页面技术，包括：HTML、CSS与简单的Web界面设计。
值得注意的是，静态页面技术本身自早期Web到现在有很大发展，课程的内容以现代的静态页面技术为准，并结合技术演进，深入了解了技术发展和其背后的本质原因。例如：介绍页面布局技术时，讲解了利用div、span进行无表格布局（Tableless Layout）技术，同时回顾了早期利用Table进行布局的技术，对二者进行比较后，引导出软件设计中的重要原则（Separation of Concerns）[28]。
2.3.2.2 服务器编程
服务器编程部分，共计5节，讲解简单的服务器编程，其目的在于能够实现简单的动态网页，为进一步的浏览器编程提供技术基础。
现代Web应用中，服务端的程序有两大功能：实现应用的业务逻辑和生成应用的表示层代码，也就是客户端、浏览器代码，即HTML、CSS和JavaScript等。其中，真正复杂的部分在于实现应用的业务逻辑，这也是各种服务端技术的重点与难点。本课程弱化了这部分内容，因为这部分的内容很多其实与Web并
无直接关系，大多从属于分布式程序设计和企业应用设计的范畴。因此不是本课程的重点，将在其它课程中讲授3。
本课程选用PHP作为服务器端语言，因为其在众多的服务端编程语言中相对较为简单
3在教师培训中，多位老师反映希望本课程能够有更多的服务器端语言选择，以便和学校其它课程配套。目前JSP和ASP的模块正在编写开发中。
易学，有助于同学们快速掌握，把更多精力留给浏览器编程。课程重点讲解了如何编写动态网页程序，根据浏览器请求产生出不同的客户端代码返回，并重点强调对Web服务器和浏览器交互过程的理解。
2.3.2.3 浏览器编程
浏览器编程部分是课程的技术重心，共计8节，着重讲解JavaScript语言、DOM模型、浏览器中网页加载、渲染、交互的过程、原理和机制，并介绍prototype和script.aculo.us JavaScript工具箱。
从技术上说，浏览器编程就是使用JavaScript编程语言操纵浏览器DOM对象。随着Web 发展浏览器不再是瘦客户端，而是承担起了Web应用的表示逻辑。因而，现代Web程序设计中，浏览器编程从语言、框架、工具到范式和早期、中期Web相比有着巨大的变化。一系列原本使用在服务端的软件技术都在浏览器端出现和使用，例如：面向对象技术（Object Oriented Technology）、设计模式（Design Pattern）
、测试驱动的开发（Test Driven Development）、行为驱动的开发（Behavior Driven Development）、构件化开发（Component Based Development）等等。并且，浏览器编程还促进和发展了诸如：声明式程序设计（Declarative Programming），函数式程序设计（Functional Programming）等技术发展。课程这一部分详细讲解了这些技术在浏览器编程中的应用，引导学生熟练掌握现代Web浏览器编程的方法、过程和编程范式。
2.3.2.4 现代Web编程
现代Web编程部分是本课程的重点，共计9节。在前面服务器编程和浏览器编程的基础上，这一部分较为全面的覆盖了现代Web客户端技术，包括：Ajax、RIA、Mashup、Web 服务（客户端）等等。这一部分还对现代Web程序设计中的重点和难点问题进行了深入分析，包括Cookie与Session，以及Web程序安全。此外，对于现代Web客户端技术的最新发展和其它相关技术也做了简要介绍，包括：HTML 5、云计算、语义网、Web 3.0和现代Web应用中的软件工程等等。
2.3.2.5 公共基础
公共基础部分包括正则表达式和XML的内容，这两种共性技术在多种技术中都有应用，因此将其穿插在服务器编程和浏览器编程中进行介绍。
2.3.3 实践环节
程序设计是实践的学科，实践环节对于学生掌握知识点，熟悉技术至关重要[15, 18]。SE-805课程包括9次实验，7次程序设计作业和1个课程设计，其内容涵盖了所有教学知识点4。2.3.3.1 实验
∙Lab 1 Basic HTML and CSS：基本的HTML标签和CSS属性（颜、字体、文本等）。
∙Lab 2 CSS Design and Layout：使用CSS进行tableless布局。
∙Lab 3 PHP：基本的PHP语法和文件读写。
∙Lab 4 Forms and PHP：使用PHP处理HTML表单。
∙Lab 5 JavaScript for Interactive User Interfaces：基本的JavaScript语法和简单JavaScript 事件处理器。
∙Lab 6 JavaScript DOM and Events：综合使用HTML、JavaScript、CSS进行非侵入式（unobtrusive）客户端编程。
4SE-805课程最初的建设目标包括全球分享，因此，最初的课件、实验和作业都是英文版。目前，以上资源均已经有中文版。（课程资源详情请参考附件一：SE-805课程资源一览表）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。