1. System Overview
HTML5 job skills technology is an important core course for computer majors. The course contains a lot of teaching content, is highly practical, and related technologies are updated quickly. The traditional classroom teaching mode is teacher-centered, and students receive it passively, so it is difficult to mobilize students' enthusiasm and initiative in learning. Blended teaching combines online and offline teaching models, is student-centered, changes from passive to active, fully mobilizes students' enthusiasm for learning, and improves the teaching effect of the course.
HTML5 job skills refer to the process of building user interfaces for web applications. It covers aspects of web design, web production, and front-end development of websites. HTML5 job skills are an important job in the field of Internet technology.
As HTML5 technical staff, our main task is to convert the web design drawings provided by designers into web front-end code, and then display it to users through the browser. In this process, we need to use technologies such as HTML, CSS and JavaScript to realize the layout, style and interactive effects of web pages.
In Web front-end development, we also need to master some commonly used front-end frameworks and tools. For example, Bootstrap is a popular front-end framework. It provides a set of responsive web page templates and components, which can quickly build web pages that adapt to different devices. . In addition, there are JavaScript frameworks such as Vue.js and React, which can help us build complex single-page applications.
In addition to the technologies and tools mentioned above, as HTML5 skilled personnel, we also need to understand and apply some Web standards and best practices. For example, responsive design is a design method that enables web pages to be displayed and used well on different devices. In addition, you also need to pay attention to web page performance optimization, including techniques such as reducing HTTP requests, compressing files, and using cache to improve web page loading speed and user experience.
2. Introduction to HTML5 job skills training room
The training goal of the HTML5 job skills training room is to cultivate knowledge and skills such as basic theoretical knowledge of Web front-end, mastering front-end development technology, mastering mobile development technology, mastering Web testing technology and mastering database technology, strong practical ability, and adaptability to various positions. Composite application talents who work, engaged in web front-end development, mobile terminal development, software testing, system maintenance, solution design, etc.
The HTML5 job skills training room is a comprehensive training room designed to provide a practical environment and teaching resources. The goal of the HTML5 job skills training room is to provide students with a real HTML5 job skills environment so that they can learn and practice relevant technologies and methods of HTML5 job skills.
The HTML5 job skills training room construction plan system is a comprehensive training room integrating hardware, software and teaching resources. The construction of the HTML5 job skills training room aims to provide students with a platform for practice and communication, allowing them to pass practical Projects are developed to apply learned knowledge and develop problem-solving and collaborative skills, while also promoting innovation and entrepreneurship. Such a training room can improve students' practical abilities and prepare them for joining the HTML5 job skills industry in the future.
The HTML5 job skills training room is based on the career development and lifelong learning needs of learners in the HTML5 job skills field, and focuses on meeting the different levels of learning needs of four categories of students in vocational colleges, further training teachers, corporate employees, and social self-learners. , unite high-level universities and enterprises across the country to build high-quality professional resources, course resources, certification resources, and competition resources for HTML5 job skills. Corporate resources and other content: Optimize the resource library platform to meet the actual needs of personalized learners for private customization on the basis of "learning and assisting teaching", and improve the operating mechanism of the platform to ensure the continuous update of platform content: Relying on the resource library The platform realizes the evaluation of student learning effects, can issue student ability analysis reports for companies, and guide corporate recruitment and student employment.
3. Composition of HTML5 job skills training room
3.1HTML5 job skills teaching platform
The platform is based on the spring cloud microservice architecture, provides convenient SSO single sign-on, and uses kubernetes for deployment. It can support public cloud, hybrid cloud, and private cloud installation modes. The data layer uses MySQL cluster and MongoDB cluster to realize full-process EdvOps automation. Operation and maintenance has the characteristics of high cohesion, loose coupling, single business, high performance, high concurrency, high possibility, cross-platform, and cross-language. The main modules include course creation tools, cloud disks, shared courses, my courses, cloud preferred courses, cloud video library, and 3D model library.
Course production tools: The platform provides dedicated microservice modules for support, using websocket two-way communication technology, and the underlying storage adopts a three-layer progressive caching method in order to speed up the loading of course resources. Independently develop video transcoding and online video editing functions. It supports direct import from word documents and automatically generates a table of contents based on the title type, which is convenient and fast. At the same time, it supports the insertion of ppt, excel, pictures, hyperlinks, videos, audios, 3D models, chapter tests and other content to realize the same-screen display of multiple hypertext files.
Shared courses: Use the concept of order distribution or campus sharing to share course resources to a greater extent.
My Class: Supports "generating a copy" directly from shared class resources and importing them into My Class, and also supports self-creation. All course resources support the export function and can be exported to local offline files. The exported files are encrypted files with the suffix wz. The course resources can be directly generated by secondary import using the platform to facilitate online dissemination.
Cloud Selected Courses: Learning resources collected and organized on the Internet by senior industry practitioners, including a series of learning videos and knowledge point learning videos for teachers and students to learn independently.
Cloud video library: The platform provides hundreds of micro-lecture videos covering various majors, which can be directly referenced into course resources.
3D model library: using three. js technology to realize online loading of 3D models and provide a more intuitive teaching experience.
Question bank: The question bank supports general questions (single-choice questions, multiple-choice questions, true-false questions, fill-in-the-blank questions, subjective questions) and practical training questions (programming questions, web front-end questions, virtualization questions, etc.); for general questions, excel templates can be used Import in batches, adopt waterfall display method, and can be shared to the school for other teachers to use.
Assignments: Supports two modes of creating assignments: manually building questions and selecting questions from the question bank. It provides an assignment library module. Assignments in the assignment library can be distributed to students multiple times. The assignment platform provides automatic assessment, including single-choice questions and multiple-choice questions. , true or false questions, fill in the blank questions, programming questions, virtualization questions.
Exam: Supports three creation methods: imported test papers, manual creation, and question bank selection. It also supports the system's random test paper function. It provides a test paper library module. Test papers in the test paper library can be distributed to students multiple times, and supports automatic scoring of test papers.
Classroom activities: The platform supports a variety of classroom activities, such as check-ins, topic discussions, questions, group tasks, voting, questionnaires, timers, etc., to make the class more interesting and participatory.
Personal cloud disk: The platform saves the files used by users in lesson preparation, teaching, etc. in the personal cloud disk space. It supports secondary direct use and archiving to realize the storage of cloud files.
3.2HTML5 job skills training platform
The platform adopts a B/S structure and uses spring cloud microservice technology to build multiple stable and efficient service modules, provide SSO single sign-on service, and use unified identity authentication. Based on k8s, the platform implements multiple deployment methods of public cloud, hybrid cloud, and private cloud, provides an online HTML5 job skills operating environment, and has built-in code running result detection, automatic evaluation statistics, and true cloud development, which can be used out of the box. The modules include course creation tools, assignments, activities, cloud disks, shared courses, my courses, and cloud preferred courses.
Convenient experiment production tools: Allow teachers to easily mix and arrange texts, pictures, audios, videos, hyperlinks, etc. in different formats such as pdf, ppt, word, and excel, and automatically generate dynamic experiment catalogs, thereby realizing the simultaneous use of different training resources. screen display.
Intelligent code evaluation to facilitate HTML5 job skills training: The platform supports online evaluation of experimental codes submitted by students, and displays the evaluation results to teachers after statistical analysis to improve teachers' teaching efficiency and facilitate students' learning process.
Submit code for duplication checking to prevent plagiarism: Code duplication checking will be performed on the HTML5 job skills training code submitted by students and passed the assessment to prevent students from plagiarizing each other's codes.
Online Q&A to answer students’ questions in a timely manner: The platform provides online questions about HTML5 job skills training. During the HTML5 job skills training process, students can communicate with teachers in a timely manner through online Q&A to improve learning efficiency.
Experiment notes that can record learning situations: The platform provides users with an experiment note function on the HTML5 job skills training page. Users can record their own notes during the experiment.
Experimental problem solutions to help students master experimental knowledge points: The platform will provide corresponding experimental problem solutions behind each HTML5 job skills training question, and teachers can change whether to display them to students. In this way, students can learn after the experiment is completed and better grasp the knowledge points of the experiment.
Supports high-concurrency evaluation services: The platform uses Kafka message queue to process evaluation requests, and has built-in high-configuration underlying sandbox services to support simultaneous use by high-concurrency users.
Automatic statistics of student evaluation results: The platform counts the evaluation results of users in the classroom and displays them in two dimensions: memory consumption and time consumption, thereby intuitively displaying the overall evaluation data of the experiment.
Supports public resource courses to facilitate teacher teaching: The HTML5 job skills training platform can have built-in complete training resources, including training documents and online resource packages, which users can use directly.
Personal cloud disk, resources will not be lost: The platform will provide users with cloud disk services. All files in the cloud disk will be separated according to different file types, making it easier for users to view and operate.
The platform supports experiments such as Web front-end application development, web enterprise development, and database design.
3.3HTML5 Job Skills Teaching Resource Pack
The HTML5 job skills teaching resource package includes professional basic courses: computer application basics, static web page design and production, C language programming, data structure, HTML5 + CSS3 Web front-end development technology, computer professional English, etc. Professional core courses: HTML5 and JavaSeript programming, UI design foundation, aesthetic foundation, Bootstrap application development, NodeJS application development, Vue application development, Web front-end comprehensive practice, etc.
3.4HTML5 Job Skills Training Resource Pack
Connect with real professional scenarios or work situations, and conduct HTML5 job skills training inside and outside the school. Enable students to master the technology of web design and production, be able to use HTML5, CSS3 and other technologies for web page layout, and cultivate students' practical ability based on the project-based teaching model; enable students to understand the basic syntax of JavaScript and have JavaScript programming skills and programming steps; Master common front-end framework technologies, including JQuery framework, Bootstrap framework, React framework, Vue framework, Angular framework, etc. Utilize database management systems and data mining systems to design data management and data mining application systems that can implement multiple functions such as adding, modifying, deleting, processing, analyzing, understanding, reporting and printing of data in the database; and use application management The system ultimately processes, analyzes and understands data.
Cultivate students with good professional ethics and humanistic qualities, master the knowledge of web front-end and back-end data interaction, responsive development, etc., have the ability to design, develop, debug, and maintain dynamic web pages, and be able to engage in web front-end software programming, software testing, software technical services, and intelligence Intermediate technical skills talents for terminal interface development and other work.
3.5HTML5 post skills training room supporting facilities
The supporting facilities of the HTML5 job skills training room include training room hardware facilities, HTML5 job skills software and tools, etc. The hardware facilities include smart blackboards, teacher podiums, multimedia equipment, student training computers, tables and chairs, servers, switches, and cabinets. And the decoration of the HTML5 job skills training room and the construction of HTML5 job skills culture. HTML5 job skills software and tools should include commonly used HTML5 job skill software and tools. These HTML5 job skill software and tools can help students write, test and debug applications.
4. Construction diagram of HTML5 job skills training room
HTML5 job skills training room construction diagram
5. List of HTML5 job skills training room plans
6. Value of HTML5 job skills training room program
6.1 Professional teaching support
6.2 Joint development of textbooks
Cooperate with professors and experts from various colleges and universities to develop a series of professional teaching materials for HTML5 job skills to provide reference for the development and teaching of professional experimental courses in colleges and universities.
6.3 Industry-university-research support platform
The platform adopts the spring cloud microservice development architecture. Each service module runs independently and provides service interfaces; it can provide stable, fast, and efficient services; the platform as a whole adopts an elastic computing architecture with front-end and back-end separation and distributed microservices. The back-end is mainly based on Java. Spring cloud implementation, front-end vue implementation, etc., have the characteristics of high cohesion, loose coupling, single business, high performance, high concurrency, high possibility, cross-platform, cross-language, etc.
The platform provides SSO single sign-on, unified login for multiple application systems, unified user management, one account can log in to verify all teaching scenarios, and all application module systems such as practical teaching for digital technology professional groups.
The platform adopts kubernetes technology for deployment, supports public cloud, private cloud, and hybrid cloud mode installation; the platform supports multiple data sources to ensure technical consistency; ensures service stability, scalability, and elastic expansion; each independent service supports distributed clusters Deployment can theoretically expand infinitely horizontally, improve system processing capabilities, and support large-scale concurrent teaching in all scenarios and practical application of digital professional group teaching.
Basic virtualization services are selectively supported by two virtualization technologies, docker and kvm, based on the nature of the subject. They can meet different virtualization needs and provide stable and self-configurable virtual machines.
Based on full-process DevOps automated operation and maintenance, it supports continuous integration, analysis, service registration and discovery, system monitoring, performance monitoring, log management, early warning, continuous deployment (docker-based mirror warehouse, Kubernetes container cloud management scheduling platform, online visual management , monitoring, and scheduling containers).
The basic persistence layer supports RDS and NoSQL. It is built by MySQL cluster and MongoDB cluster. It supports distributed transaction processing based on CQRS and automatic data backup. At the same time, it is used in Redis cluster to cache hot data and supports large concurrency; Purely localized data sources.
The basic service layer supports online verification code service, basic file service, message queue service, OSS object storage service, user/authentication service, personal cloud disk service, WebSocket service, etc., to ensure the versatility of the platform. Basic user information management: Configure orders according to business directions, add, modify, delete and configure data permissions for classes, teachers, and students.
6.4 Skills competition support
6.5 1+X authentication service
