《移动互联网软件开发技术基础》课程思政优秀微课

浙江万里学院课程思政优秀微课设计书

一、切入课程思政的课程知识点

（一）知识点1：移动互联中的Web应用（1）了解什么是移动互联网；（2）了解2020年中国互联网络发展状况；（3）了解移动互联网的发展史；（4）对比移动端与PC端Web开发的区别。

（二）知识点2：原生JS实现移动端Touch轮播图（1）了解移动Web开发工具；（2）了解网页首页包含的共同元素；（3）编码实践前强调规范编码的重要性；（4）编码实践中出现bug的解决方法。

（三）知识点3：canvas进阶－利用canvas绘制国旗（1）了解中华人民共和国国旗的相关知识；（2）了解国旗中五颗星的位置、尺寸及大小星的比例；（3）利用HTML5中的canvas标签绘制国旗；（4）绘制过程中让学生“真切”体会到小星环拱于大星之右侧的国旗设计。

二、课程思政目标

（一）总体目标

贯彻国家“立德树人”的教育方针，结合学校“应用型人才培养”办学定位。学院的目标是培养具有扎实基础知识和强大能力的计算机类专业人才，以满足企业对人才的需求。具体为：1、培养学生积极进取的人生态度、实现人生价值，坚定理想信念；2、培养学生的中国精神、民族精神以及爱国精神；3、培养学生编码的规范意识；4、培养学生良好的职业道德意识；5、培养学生不断创新、精益求精的工匠精神和社会责任感；6、培养学生的团队合作精神。

（二）具体课程目标

1.针对知识点1（移动互联中的Web应用）的课程思政目标：

（1）了解什么是移动互联网；

（2）了解2020年中国互联网络发展状况；

（3）了解移动互联网的发展史；

（4）对比移动端与PC端Web开发的区别。

2.针对知识点2（原生JS实现移动端Touch轮播图）的课程思政目标：

（1）了解移动Web开发工具；

（2）了解网页首页包含的共同元素；

（3）编码实践前强调规范编码的重要性；

（4）编码实践中出现bug的解决方法。

3.针对知识点3（canvas进阶－利用canvas绘制国旗）的课程思政目标：

（1）了解中华人民共和国国旗的相关知识；

（2）了解国旗中五颗星的位置、尺寸及大小星的比例；

（3）利用HTML5中的canvas标签绘制国旗；

（4）绘制过程中让学生“真切”体会到小星环拱于大星之右侧的国旗设计。

三、知识点与思政教育结合的教学设计

（一）针对知识点1（移动互联中的Web应用）的教学设计

教学内容：（1）了解什么是移动互联网；

教学案例：讲解移动互联网的定义：移动通信和互联网的结合体。就是大家手上的手机、平板电脑等这些可移动的数据终端一旦连上了网络，就能获得海量资讯。

教学延伸：从而引出它的应用：时政新闻类网站、电商类网站、娱乐类网站等等。

教学总结：以时政新闻类网站中的学习强国网站为例，渗透红色精神，红色文化。

教学内容：（2）了解2020年中国互联网络发展状况；

教学案例：通过2021年2月3日中国互联网络信息中心发布的第47次《报告》介绍2020年中国互联网络发展状况：截至2020年12月，我国网民规模达9.89亿，较2020年3月增长8540万，互联网普及率达70.4%。

教学延伸：指出2020年我国互联网行业在抵御新冠肺炎疫情和疫情常态化防控等方面起到的关键作用以及使得我国成为全球唯一实现经济正增长的主要经济体，圆满完成了脱贫攻坚任务。

教学总结：指出2020年我国互联网行业在抵御新冠肺炎疫情和疫情常态化防控等方面起到的关键作用。此外，互联网行业也使得我国成为全球唯一实现经济正增长的主要经济体，圆满完成了脱贫攻坚任务，真正做到了为农民干实事、为农村谋发展。讲解过程中渗透民族精神，让学生意识到国内科技发展的突出实力，增强高校学生对祖国的自信心。

教学内容：（3）了解移动互联网的发展史

教学案例：通过介绍第一代移动通信技术（1G）到第五代移动通信技术（5G）的主要特点、典型代表及不足之处等来使学生了解移动互联网的发展过程。

教学延伸：通过介绍1G到4G的发展过程，总结中国在世界版图的变化：无线标准方面，从美国独大到欧洲和美国两强到中国加入且具有越来越多的话语权。手机制造商方面，从美国的摩托罗拉到欧洲的诺基亚、爱立信到苹果三星和中国的华为、小米、OPPO、VIVO。让学生感受到中国已经实现了从系统到终端的全面突破和占领。在世界通信的版图里，中国已经有了一席之地，从而提升学生的爱国情怀。

教学总结：在介绍第五代移动通信技术的过程中，引出之前的热点事件——中美5G之争。指出中美的5G之争实质上就是中美芯片之争。我国发展芯片迫在眉睫，应用科技救国。而对于我们年轻一代，应练就过硬的专业技能，立志技能报国，为中华民族的崛起尽一份力！以此来提升学生的报国之志。

教学内容：（4）对比移动端与PC端Web开发的区别。

教学案例：分别在iPhone手机上和PC端访问学习强国网站。

教学延伸：通过同一个网站针对不同端的设计对比，反映移动Web浏览器的一些特点。其中指出良好的用户体验是一个合格Web产品的基本要求，需要我们web前端开发工程师多换位思考、为他人着想。

教学总结：加强学生的社会主义核心价值观教育和培养学生为他人着想的道德修养。

（二）针对知识点2（原生JS实现移动端Touch轮播图）的教学设计

教学内容：（1）了解移动Web开发工具；

教学案例：进行移动页面制作需采用便捷的开发工具才能让网页开发更加便捷，本知识点对常见的移动Web开发工具进行介绍。

教学延伸：通过国产软件HBuilderX开发工具的介绍，让学生了解HBuilderX为国产编辑器的曙光，强调中国程序员要有责任和义务去开发国产的编辑器，让中国的编辑器进入世界主流编辑器。

教学总结：提升学生的爱国之心、报国之志。让学生明确学习的重要性，提升专业知识和能力，为祖国的IT事业贡献自己的力量。

教学内容：（2）了解网页首页包含的共同元素；

教学案例：通过让学生关注到移动端网页的首页会有一个共同的元素“轮播图”来指出本课程是关注于网页的设计和实现，立足于互联网。互联网使各种文化的传播缩短了时空距离，使我们能更方便的接触到多元文化，但是人生观、价值观、世界观等方面也易受外界影响。

教学延伸：让学生了解到不仅是轮播图的图片，而且还有网页设计中的文字、视频、图片等都需要前端开发工程师的选取和设计。

教学总结：让学生明白，作为Web前端开发工程师的我们，需要在网页设计与实现的过程中引入理想信念、价值取向、政治信仰、社会责任等方面健康文明的题材和内容。不要为了博取眼球而与正能量背道而驰！以此培养学生的职业道德、提升学生的道德修养。

教学内容：（3）编码实践前强调规范编码的重要性；

教学案例：提出规范编码的重要性：1. 可以促进团队合作；2. 可以减少bug的处理；3. 可以降低维护成本；4. 有助于代码审查；5. 有助于自身的成长。

教学延伸：以华为企业编码规范为标准，学生编码要严格遵守编码规范。

教学总结：渗透华为精神、民族精神。

教学内容：（4）编码实践中出现bug的解决方法。

教学案例：通过让学生关注到移动端网页的首页会有一个共同的元素“轮播图”来指出本课程是关注于网页的设计和实现，立足于互联网。互联网使各种文化的传播缩短了时空距离，使我们能更方便的接触到多元文化，但是人生观、价值观、世界观等方面也易受外界影响。

教学延伸：完成了轮播图中的任务1和任务2的编码实践，让同学们通过谷歌浏览器中的开发者工具打开项目，有些同学会发现有bug。这个时候要引导学生端正心态，有bug是正常的，要积极排查，不气馁。写代码过程中发现不规范的地方要及时改正。此外，也要在不同浏览器中多次测试。

教学总结：培养学生精益求精的工匠精神。

（三）针对知识点3（canvas进阶－利用canvas绘制国旗）的教学设计

教学内容：（1）了解中华人民共和国国旗的相关知识；

教学案例：讲解中华人民共和国国旗的相关知识：中华人民共和国国旗是五星红旗，为中华人民共和国的象征和标志。旗面为红色，长方形，长宽比例为3:2。国旗尺寸分6种规格。旗面左上方缀黄色五角星五颗。一星较大，其外接圆直径为旗高十分之三。四星较小，其外接圆直径为旗高十分之一。

教学延伸：大星代表中国共产党，四颗小星代表工人、农民、小资产阶级、民族资产阶级。四颗小星环拱在一颗大星右面，并各有一个角尖正对大星的中心点，象征共产党领导下的革命大团结。国旗的红色象征革命，黄色五角星象征红色大地上呈现光明。

教学总结：通过让学生走进国旗，了解国旗的寓意，渗透红色精神，红色文化。

教学内容：（2）了解国旗中五颗星的位置、尺寸及大小星的比例；

教学案例：教学过程中以国旗的最左上角为原点(0,0)建立canvas坐标系。设置画布的宽度为w，即旗面的长。因为旗面的长宽比例为3:2，所以画布的高度为画布宽度的三分之二。为便于确定五颗星的位置，则先将旗面以长、宽的一半划分为四个同等大小的长方形。将左上方的长方形上下划分为十等分，左右划分为十五等分。通过计算得到每一等分的长度为画布宽度的三十分之一。

教学延伸：由此可知大五角星中心点的坐标为（五等分，五等分），外接圆半径为三等分，长度是十分之w。四颗小五角星的中心点坐标分别为（十等分，二等分）、（十二等分，四等分）、（十二等分，七等分）、（十等分，九等分）。此外，四颗小五角星的外接圆半径均为一等分，长度是三十分之w。

教学总结：通过对国旗中五颗星的位置、尺寸及大小星比例的讲解，改变学生对“简单绘制国旗中五颗星”的认知。让学生深刻的认识到国旗是一个国家的象征也是民族的象征，不可随意绘制，以此提升学生的爱国情怀。

教学内容：（3）利用HTML5中的canvas标签绘制国旗；

教学案例：讲解canvas标签绘制矩形、绘制线条、绘制路径的基本语法，带领学生一步步思考如何绘制出红色旗面和黄色五角星。通过定义绘制黄色五角星的函数，然后循环调用该函数就能绘制出五颗平行的五角星了。

教学延伸：绘制过程中，学生会遇到问题。这个时候要引导学生端正心态，要积极排查代码的正确性，不气馁。

教学总结：培养学生精益求精的工匠精神。

教学内容：（4）绘制过程中让学生“真切”体会到小星环拱于大星之右侧的国旗设计。

教学案例：绘制出五颗平行的五角星后，很多学生以为国旗绘制完成了。这说明大家没有“真切”地体会到小星环拱于大星之右侧的国旗设计理念。四星环拱而非平行，象征着在中国共产党领导下革命人民大团结。这样的大团结使得我们取得了新中国的胜利，也更将指引着我们实现中华民族的伟大复兴

教学延伸：通过讲解如何对四颗小五角星进行旋转操作，让学生“真切”体会到小星环拱于大星之右侧的国旗设计，也让学生领悟了自觉维护国旗的正确性是每个国民应有的素养。

教学总结：学生在老师的带领下绘制出了正确的国旗，这不仅体现了中国精神也培养了学生精益求精的工匠精神。

四、教学方法与实施

课前：

• 深入研究教材：理解教材的主要观点和理论框架，掌握核心知识点。

• 设计教学计划：根据学生的学习需求和课程目标，制定详细的教学计划。

• 准备教学资源：收集和整理相关的学习资料，如案例、视频、讨论题等。

课中：

• 启发式教学：引导学生主动思考，激发他们的学习兴趣和求知欲。

• 互动式教学：鼓励学生参与课堂讨论，提高他们的交流和合作能力。

• 实践性教学：通过案例分析、角色扮演等方式，让学生将理论知识应用于实际。

课后：

• 布置作业：通过作业，让学生复习课堂内容，巩固所学知识。

（1）    练习1：看看有哪些移动Web开发工具，其中有没有代表中国精神的国产开发工具？

（2）    练习2：利用国产开发工具完成一个小型移动页面的设计，主题应具有公益性质、服务性质。

（3）    练习3：利用HBuilderX 编辑器编码实现无缝轮播图。

（4）    练习4：小组合作完成一个小型移动页面的首页设计，其中包含轮播图，主题为建党100周年。

• 反馈与评价：及时对学生的学习进行反馈和评价。

五、特色及创新（300字左右）

本课程教学采用面向问题、激发学生兴趣和成就感的渐进式项目驱动的教学模式。课程的特色及创新如下：

（1）在教学内容上，课程结合专业人才的培养特点，深入挖掘提炼课程内容所蕴含的思想政治教育元素和教育功能，并与知识传授有机融合，实现知识传授、能力培养、价值塑造相统一；

（2）在教学方法上，建立了引导学生全程参与、自主设计、合作研讨的教学方法。养成学生的科学素养，营造自主的探索氛围，以促进学生的学习兴趣；

（3）在评价方式上，构建了理论、设计、实践、项目报告、研讨、平时表现等全过程、多元化的评价体系。

此外，本课程还形成个性化和持续深入的辅导和跟踪，以增强学生对知识点的掌握。