多角度提高 HTML5 课程的教学质量

2019-09-10 06:52陈徐
学生之友 2019年2期
关键词:教学效果

陈徐

摘 要:HTML5作为一种优化后的编程语言描述方式,在网站的编写和应用上有十分良好的移植性和可用性,这种技术可以大大改善网页的显示效果,由于重在强调用户体验,因此它非常适合各种客户端程序和游戏软件的开发工作。在具体的教学中,如何让学生爱上这门技术、掌握这门技术是教学重点,而如何提高这门技术的教学质量就变成了当下教师最关心的问题。

关键词:渲染气氛;工程世界;教学效果

八年的努力,HTML5标准终于一锤定音,在制定完成后的多年岁月里,各大浏览器最先扛起了支持的大旗,接踵而至的是各种移动开发商,都急迫地想要在自家产品中整合这门技术。据前几年的调查显示,应用了HTML5技术的手机浏览器已经突破了10亿,而对于这门技术整合开发的“一线人员”,即工程师来说,人数也已经突破了200万,有专家称这一趋势还在逐年上涨,从这里可以看到HTML5 的前景十分光明、道路十分广阔,这一原因不仅是HTML5的性能较之前更加良好、完备,还在于入门相对简单,具有“可读性”体验。因而在教育领域中,这种新技术也变成了教学重点之一。那么在教学中,我们该如何去提高HTML5的教学质量呢?以下结合笔者的个人实践,从“渲染气氛,了解工程世界”、“利用媒体,提高教学效果”、“适当练习,強化所学知识”三个方面进行阐述。

一、渲染气氛,了解工程世界

气氛课堂的影响尤为重要,一个良好的气氛可以让学生更好地激发学习兴趣,在教学中,教师应该积极地营造气氛,让学生更好地了解到关于此技术的“工程世界”,让其看到了技术的未来,这也是为学生的学习提供了方向。

比如我在课上带来了安卓手机、苹果手机、iPad、以及笔记本等设备,用这些设备同时打开百度或淘宝首页,由于这类网站比起其他网站来说,更重视用户的观看体验,以此来引出前端知识是十分有效的,而后学生便发现了这几款设备打开的页面都不一样,他们问道:“为什么拥有同样域名的网站,在不同客户端中展示的也不尽相同呢?”我告之学生:“ HTML5 要先识别各种客户端,而后再由独特的编译工具进行优化,这个过程不仅能够提升页面的加载性能,即优化模式化框架,还能够资源定位,实现搜索功能”,这么一来,让学生明白这些网站最为看重的就是网页的“脸面”,即“前端世界”。此外,我还给他们演示了一个由 HTML5 做的游戏场景,这个场景十分逼真,由于此技术是取代flash的新工具,所以很多工程师都以此为职业,而这些基础知识都来自于前端教材,学好这些知识才能进入工程师的世界。总之,教师要利用有效的手段营造气氛,让学生理解到工程世界虽然无比精彩夺目,但是也并非简简单单写出来的,每个工程师都要根据自身的经验,经过着无数的推敲琢磨环节,这种方式可以让学生看到光明的前景,为前端知识的学习创造动力。

二、利用媒体,提高教学效果

多媒体作为一种优秀的辅学工具,它能够用最少的资源、最丰富的声色效果来为学生带来更良好的观看体验,换言之,较之过去单拿着课本教学的模式来说,这种利用多媒体教学的模式能够简化教学的步骤,让学生直接看到课程重点,提高了教学效果。

比如在教学 HTML5 优势的时候,我用多媒体讲解了一次关于 HTML5 对于HTML的新特性,先打开两个展示效果相似的网页,一个是由新的 HTML5 语言编写的,另一个是由HTML编写的,然后用两个页面的代码差异来引出 HTML5 的优势,如: HTML5 会在第一行文档中声明了:“<! DOCTYPE html>”;,<small>被用来定义小字等等。从差异对比中可以让学生掌握关于 HTML5 的新特性。总之,利用教学媒体,可以在课堂上向学生形象地展现教学的内容,并与传统的 HTML 实例形成鲜明对比,而让学生在比较的过程中,能够更好地理解 HTML5 的新特性。

三、适当练习,强化所学知识

就信息技术而言,只看得懂不算学会,不上手就永远无法熟练地掌握,俗话说:“站在岸上学不会游泳”,说的就是这么一个道理。只有经过适当地练习,学生才会懂得应该为达到什么效果而使用哪些代码;也只有适当地练习,学生才会缩短时间,提高编码效率。

比如:在练习图像标记的时候,我们利用了一款很好用的工具,那就是W3cschool,学生在网站中把示例<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" >换成了<img src="p/row.jpg "  alt="草原 " />,然后用记事本以网页形式打开就会看到一个草原的图片显示在眼前。在练习完之后学生要进行截图,方便总结不同代码能够带来什么不同的效果。而且,使用W3cshcool的好处就是,不但方便了教学的演示过程,也降低了教师投入的精力,还能够在很大程度上促进学生的巩固复习,强化所学知识。

综上所述,HTML5是网页前端开发工作中最基本也是最重要的技术,就像是一个组织的框架,这门技术的教学是一项公开技术,由国际上多家互联网巨头共同酝酿出来的,因此是绝对免费的,这一点也给学习带来了很多福音,即学生在练习的时候,不仅可以使用课本上的知识,还可以在兴趣之余,从课外搜索大量免费的代码扩充知识面。此外,这项技术不仅支持跨平台使用,还拥有自适应网页设计等功能,强大的功能也是学生学习的目的。总之,基于HTMl5技术的网页或者应用拥有很好的实用性和移植性,由于其前景十分良好,所以教师应该致力于探索多种教学手段,助力于学生的学习。

参考文献:

[1]于薇.HTML5前端开发课程教学改革实践探讨[J].数字通信世界,2019(07):244+96.

[2]王古森.探索HTML5在高职院校信息化教学中的应用[J].电脑知识与技术,2018,14(33):142-143.

猜你喜欢
教学效果
生物化学线上线下混合式教学效果分析
掌握“函数的表示”提高高中数学教学效果
用信息技术增强初中篮球教学效果
好的板书是提高语文课堂教学效果的重要途径
关于提高开放电大“统计学原理”教学效果的探讨
巧用电教优势,促进语文教学效果
提高病理学教学效果的几点体会
加强焊接教学质量提高焊接教学效果的探讨
如何提高中职Flash动画教学效果
抓好课的结束部分 深化体育教学效果