The article discusses the experience of developing and using the electronic educational resource "Internet programming" based on the Moodle educational platform. The concept of “electronic learning resource” is defined, three sections of the course are described: HTML, CSS, and JavaScript and a brief description of their contents. The article presents the organizational structure of the training resource and a list of typical materials for each topic, provides examples of some training materials.
Currently, the requirements for the use of electronic information and educational resources are included in the Federal Law of the Russian Federation “On Education in the Russian Federation” and in the requirements of the Federal State Educational Standards in all areas of training specialists in higher education.
The concept of "electronic learning resource" includes a wide range of information
resources, presented in various forms and using various technologies for this
presentation [
The use of EIEE in the educational process can improve the quality of training of
modern specialists, which at present cannot be achieved only by traditional forms,
methods, and teaching aids [
The main task of the scientific and methodological training center for distance
education in the Humanities and Education Science Academy (branch) of V. I. Vernadsky
*
Crimean Federal University in Yalta is the introduction of electronic learning resources
into the educational process [
Consider the experience of creating and using an electronic learning resource in the
course "Internet programming". The course "Internet programming" is studied by
students in the direction of preparation 09.03.03 "Applied Informatics" in the third year.
This electronic learning resource is certified by an expert commission and is included
in the register of the electronic educational resources of V. I. Vernadsky Crimean
Federal University. In periodicals, one can often find a description of the experience of
using online courses in various academic courses [
HTML and CSS as basic tools for creating web resources The course consists of 10 sections corresponding to 10 topics. The introductory part of the course contains all the formal data following the requirements for such training resources: metadata of the electronic educational resource, the glossary of the course, the work program of the course, links to the information support of the course, guidelines for organizing independent work.
The course material is divided into three sections (modules), each of which includes several topics.
The first section is devoted to the basics of Internet programming - the markup language for hypertext documents - HTML. This section examines the basic tag constructions that originally existed and defined the layout of a web document: font formatting tags, paragraph formatting tags, tags for creating and managing hyperlinks on the page, designed to go to other pages of the site and inside the same page, tags for placing graphics and creating tables and forms. We study not only tags but also their attributes using specific examples. The materials in this section also introduce new tags that have been introduced in the latest version of the markup language - HTML5. This includes information about semantic tags that define the logical layout of a web page or its structural elements, such as <section>, <header>, <nav>, <footer>, <hgroup>, <figure>, <article>, <aside> and others, as well as tags for including multimedia resources in web documents: <audio> and <video> and the <canvas> tag, which defines the area with the ability to draw using scripts.
The training material discusses all the additional features that are included in the functionality and appearance of such a web page object as a form - the main element of user interaction with an Internet resource.
These are elements such as fields for selecting a date and its elements, fields for selecting and setting time, widgets for choosing colors, input fields for phone numbers, and email addresses. Such an attribute of form objects as "placeholder" allows you to specify the text of a hint about the purpose of the input field, the attribute "required" defines the form field as required. In this way, students are introduced to the basic web page layout tools that are available in HTML5.
In the second section of the Internet programming course, which is studied over several topics, students get acquainted with the formal language for the appearance of a web page - CSS (Cascading Style Sheets) and the features that its latest version of CSS3 provides. CSS is a formal language based on finding a specific element of a web page and setting its properties to specific values. So-called selectors are used to searching for page elements. The selector tells the browser which page element to apply the style to. Any HTML tag can act as a selector, for example, <h1>, <p>, <ul>, etc. There are selectors for the attribute “class”, which is set when marking up the page element, for example, <p class = ”par”>, or by identifier, for example, <div id = ”block1”>. Some universal selectors access all elements of a web page, contextual, child, and attribute selectors. Pseudo-class selectors are used to selecting page elements that are difficult or impossible to access with the help of other selectors. Examples of such selectors can be hyperlinks (:link) or elements that are currently under the mouse cursor (:hover), as well as children of other selectors, for example, a specific table cell or list line.
After assigning the selector to which you want to apply to format, the parameters and their values are set. Selector formatting rules can include properties such as color, background, borders, size, and other options for displaying an element in the browser.
The course includes training materials on the properties and rules of CSS, which became available in CSS3, which provides a modern level of development of the style of web pages. These include such features as displaying rounded corners of page elements, creating gradient fills, transparency, and shadows for both blocks and text. A mandatory requirement for a modern site is its adaptability, i.e. adequate display on screens with any available resolution, ranging from typical smartphones, tablets, and ending with widescreen desktop computers (desktop personal computers). The @media rule is responsible for this. This rule allows you to specify the media type and those changes to CSS properties that should be applied to page elements when displayed on different devices.
The materials presented in the electronic training resource not only provide theoretical information but also give practical examples of using both the markup language and CSS, analyze typical typesetting techniques using both the block model and other modern web programming tools.
The following are examples of CSS training material for implementing a flexible layout.
The flexExample.html file contains the following code: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Flex template</title> <link rel="Stylesheet" href="css/styleFlex.css"> </head> <body> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contacts</a></li> </ul> </nav> <main class="main-content"> <div class="main-left">Contents 1</div> <div class="main-right">Contents 2</div> </main> <footer class="main-footer">Copyright©</footer> </body> </html> The contents of the styleFlex.css file: The view of the web page in the browser window is shown in Fig. 1.
The third module of the “Internet Programming” course is devoted to the study of the
JavaScript programming language [
The electronic educational resource includes topics such as the basics of programming in JavaScript. The basic syntax of the language is based on the programming language C and C ++. Students study the technology of working with variables, basic arithmetic operations, the use of a library with mathematical functions, the basic algorithmic design: if..else statement., switches, and loops. Also, they get acquainted with the predefined language objects: Object, Array, Boolean, Date, Function, Math, Number - and methods for using them.
A separate topic in this section is devoted to the object model of the JavaScript programming language. It is called the DOM (Document Object Model) and provides an application programming interface or application programming interface (API) for HTML and XML documents. It defines the logical structure of web documents and how to interact with them. The entire model of the web page is included in the object model: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <style> #slide {
box-shadow: rgb(150, 150, 150) 10px 10px
} </style> <title>Button Slide Show</title> </head> <body> <div align='center'> <h3>Slide Show</h3> <img id="slide" src="img/crimea1.jpg" width="600" height="400"> <p> <button onclick="show(-1);">
</button> <button onclick="show(+1);"> </button> </p> </div> <script>
var URLs = new Array('img/crimea3.jpg', 'img/crimea4.jpg',
'img/crimea5.jpg', 'img/crimea6.jpg', 'img/crimea8.jpg',
'img/crimea9.jpg', 'img/crimea10.jpg', 'img/crimea11.jpg', 'img/crimea1.jpg'); var currentImage = 0; function show(direction) { currentImage += direction; if (currentImage == URLs.length)
currentImage = 0; if (currentImage == -1)
currentImage = URLs.length - 1; document.getElementById('slide').setAttribute('src', URLs[currentImage]);
} </script> </body> </html> This module includes the topic of considering algorithms and solutions to typical web programming tasks: placing a running clock, calendar, programming an online calculator, creating and processing a cascading menu on a page. Below is the text of the script that creates the table on the page. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>JavaScript Table</title> </head> <body> <div id="wrapper"> <script> var str = '<table border="1px" width="30%">'; for (var i = 1; i < 10; i++) { str += '<tr>'; for (var j = 1; j < 10; j++) { str += '<td>'; str += i * j; str += '</td>'; } } str += '</tr>'; str += '</table>'; var el = document.getElementById('wrapper'); el.innerHTML = el.innerHTML + str; </script> Currently, a large number of JavaScript libraries have been created. One of the most popular is the jQuery library. The study of techniques for working with this library, namely: connection and application are also considered in the framework of this learning resource. 4
The organizational structure of electronic educational resource Typical content for each topic includes the following sections: - a description of the topic, including a summary of the main issues, addressed in it; - A glossary or dictionary of highly specialized terms that are first introduced to teaching people when studying this topic. The terms and their interpretation are given, including, if required, translation into a foreign language and examples; - a lecture on the topic, including theoretical information, syntactic rules, and semantic interpretation of the constructions of the markup language HTML or CSS, the programming language JavaScript, examples of their use.
- laboratory work, in which students are invited to complete a practical task on a particular topic of the course; consolidate the received theoretical information and practice practical skills; - a list of literary sources or links to Internet resources on the topic; - questions for self-testing and independent work An example of the presentation of training material is shown in Fig. 2.
The system for setting up training materials allows you to place them in various
formats: lectures, assignments, pdf documents, presentations, videos, and graphics [
The course "Internet programming" provides a course project and an exam. Typical topics of course projects and guidelines for its implementation are also included in the electronic educational resource. The assessment fund also includes questions for exam preparation. In the final part of the course, students are invited to undergo final testing. The final test consists of 25 questions in all sections of the course. The data of the test results of all tests and especially the final one are taken into account in the final assessment of the student in the exam and significantly affect the assessment of the course.
The presentation of electronic educational resources in the Moodle system has another
significant advantage - it allows you to quickly maintain the course information in an
up-to-date form, which is very important for such a dynamically developing field of
programming as web programming [
In conclusion, I would like to note that the new educational standards of higher education in the Russian Federation expand the scope of an educational institution towards the formation of electronic information and the educational environment. Thus, the teacher gets additional opportunities for a creative approach to the organization of the educational process, which contributes to the development of the professional competencies of modern specialists.