基于H5网页前端开发的项目启发式教学探究

2021-12-15 13:38伍尚君

科技视界 2021年33期

伍尚君

（东莞市经济贸易学校，广东东莞 523000）

0 引言

随着互联网技术的飞速发展，对高素质的网页前端工程师的要求越来越高。因此，H5网页前端工程师作为网页前端工程师的技术专业课程越来越受到重视。在民办中等职业院校、高职本科院校计算机专业，应该采用哪种方式进行课堂教学是一个需要解决的问题。网站前端，也叫前端开发，运行在PC、手机等电脑浏览器上，显示客户浏览过的网页。随着云计算技术的发展，HTML5、CSS3的使用，前端框架应用组件化响应式网站网页设计可以融合各种分辨率、极致动画特效设计方案，为用户带来极高的体验。

1 H5网页前端

H5大家可能都听说过，但是H5前端开发的实际工作并不是很了解。随着前端工程师行业的日益普及，越来越多的人选择做前端工程师。

HTML5是HTML的新标准，是Web开发的关键下HTML使用的第五次重大变化，这是一项推荐标准，CSS3和HTML5虽然是两种语言表达方式，但一般来说，HTML5也包含CSS3，因为它们经常结合使用。从技术分析来看，目前部分网页制作、WApp、网页开发设计和网页游戏全部采用HTML5标准完成。虽然开发的应用其实还是以JS为主，但是因为HTML5的定义很流行，所以微网站开发、Web、App或是微网站等应用都会使用HTML5开发。

随着HTML5“前端H5工程师”的出现，HTML5工程师成为前端开发中的主力，使得Web前端的使用更加灵活，移动应用也更火爆。随着该领域的快速发展，互联网公司在Web前端技术的前端开发方面要具备大量的知识。当今流行的互联网技术网站要创造一流的用户交互体验。随着互联网技术的发展，这些人员在现阶段的人力市场中非常罕见，所有互联网公司都在高薪招聘技术人才。

优秀的前端开发是新时代文明世界的布道者、奠基人。因为只有有足够完善的知识体系，内容深度和广度，才能做一些更有意义的工作，而不是只作为一名普普通通的为别人实现定制内容的乙方，这也说明了前端开发的必要性。在当前互联网时代的发展中，Web前端的发展已经占据了非常重要的位置，且据Web前端开发，HTML5已经迅速兴起。

2 HTML和Web的区别

HTML5实际上是一种技术的组合，其中包括HTML5、CSS3、JS等技术，Web前端是一种职业，中国从2005年开始逐渐形成一种趋势，从网站设计师演变而来。

通过教学，学生应该在一定程度上能够独立完成软件开发和设计方案的能力，不同的公司对Web前端开发有不同的技术标准。在传统规则的实际意义上，URL分为前端和后端。前端是大家别名的网页和大家经常看到的各种展示实际效果，后台管理的关键是指管理方式、升级、网站建设和维护的后台管理。百科是这样定义的：工作职责是使（X）HTML/CSS/Java/Flash等各种Web技术来开发和设计移动用户端产品。进行用户端软件（即计算机浏览器端）的开发设计，进行Java及其Flash控制模块的开发设计，同时集成后台开发技术模拟整体实际效果，通过Web开发设计丰富多彩的互联网技术，基于技术提升用户体验。

一般来说，在实际意义上，Web前端工程师不仅需要开发设计技能，还需要进行移动应用程序开发。也就是说，大家在学习Web的同时，也要学习HTML5技术。据统计，公司现在的招聘标准包括HTML5开发和设计。

3 课程现状及问题

3.1 课程现状

Web业务流程智能管理系统的日益完善推动了Web技术的快速发展。许多迭代开发技术加快了新Web应用程序的项目进度，互联网表达方式和客户体验也发生了巨大的变化。Web前端工程师是高校软件专业开发的专业技能教学内容。学习中比较困难的代码。由于提升新项目层次和实践活动的机构有限，学生的学习和训练只停留在对专业知识的掌握环节，但由于专业性强，覆盖面广，专业技能和实践量大，学生个体差异大，传统课堂教学的核心理念和教学方法无法满足如今的教学需求。

3.2 存在的问题

学生一般都是在课堂上完成Web前端工程学习，包括实训中的专业知识、实验学习中很难测试的代码。由于学习和培训新项目层次和实践活动的机构很少，学生的学习和培训只停留在对专业知识关键环节的掌握上，很少有新的工作经验积累。

4 课堂教学设计方案

为了更好地塑造学生的编程爱好，完成学生自主学习的总体目标，选择新项目作为实训指导。讲授网站开发专业知识要点，让学员更清晰地掌握学习和培训的目的，将枯燥的序列号数据信息可视化。下面以H5 Web前端工程师的HTML5方法为例，对新项目的教学情境设计进行研究。

4.1 创设课堂教学情境

教师先详细讲解，这个控制模块会进行2个新项目。新增项目1：移动登陆页面。项目描述：这个新项目必须有一个移动客户登录页面，包括一个登录名文本框、一个账户密码文本框和一个登录按钮。其中，“登录名”和“账户登录密码”为提示文本，只存储客户输入的文本，焦点所在的输入框颜色才会发生变化。新增项目2：会员注册网页。会员注册是指向Web服务器提交相关客户信息的全过程。未申请注册的客户无权使用本站部分功能。某个输入框聚焦后，会增大，无法正常填充。该信息为红色，包含警告标志。

4.2 建立学习目标项目

项目1学习目标：（1）规定学生掌握报告的应用；（2）规定学生掌握HTML5的应用；（3）规定学生明确执行本项目的实际效果和网页结构；（4）要求学生掌握本项目的重点及相关知识点的应用。项目2、学习目标：（1）要求学生掌握、、