Modular Teaching Didactic Foundations To Responsive Web Design And User Experience Design

Abstract

The article discusses a model of modular adaptive learning that combines the principles of computer pedagogy and frontal form of teaching the basics of user interaction design and web design through a two-dimensional layout technique in cascading style sheets. The value of the spatial-oriented approach to the formalization of the results of the design of spatial interfaces is substantiated. Much attention is paid to creating a holistic image of the perception of the processing of created and programmed blocks and containers. The author's methodology for creating semantic blocks of web pages in adaptive design and didactics of integrated learning to bring information to the basis of the semantic web are presented. The proposed teaching methodology must present a criterion for the presence of coherence and semantic significance, calculated experimentally or based on a large number of metrics worked out on the HTML attribute-tag system. The visually-oriented approach plays an important role in Scratch solutions used in device programming.

Keywords: Information technology teaching didactics, modular learning, responsive web design, semantic search, visual programming

Introduction

The possibilities of implementing educational programs of advanced development are associated with the organization of the educational process. The classical approach to the organization of studies, is reduced to the definition of the instrument of personal education and the acquisition of competencies of the professional component plays a decisive role in solving the most significant issues of didactics and heuristics of education.

The decisive role in this approach is solved by a range of issues identified by proportionality with the concept of awareness. The subject of education implements a program for removing information uncertainty for one issue or another, delegating the role of practice-oriented and semantically meaningful activity to the "knowledgeable": student, master program student, graduate student.

Of course, such an approach takes place in the humanities and, in part, natural sciences and branches of knowledge of a fundamental theoretical nature.

Combinational logic practically does not work there, and if it is expressed, it is only through the theoretical nature of research and inferences. However, this does not mean that there is a fundamental differentiation between the methodological features in certain sciences.

Problem Statement

The peculiarities are only in the essence of subjects, and fundamental differences are expressed only by people in the form of certain, local traditions of teaching. In addition, most of the gained skills and knowledge are not obtained through the development of any academic programs. Why is it so?

Firstly, the nature of most classical programs and courses, including those of an abstract nature (hobbies: cooking; sports: football, hockey, foreign languages: linguistics, speech) are based on the principle of composition. The folding elements of perception on the part of the student are always reflected in the delayed reaction on the part of the teacher, tutor. But more often they imply the absence of a specific person. Moreover, the formation of a set of objective competences does not necessarily lead to the emergence of a coordinated ability to perform a complex task at a high level of skill. It can be that already stated knowledge reflected in retrospect are not absorbed in one-time or adequately by all groups of persons.

In addition, the super additive nature of collective or group education, invested in lecture or seminar work, is annihilated. After all, they express (as competencies) a meta-latent nature, and are manifested only in the learning process, thus, the result has a different, but emphasized and certain delayed character of manifestation in activities after graduation. The advanced learning mentioned at the beginning of the article (in the most general manifestations - development) solves the issue of the retrograde component of the didactic orientation: presenting an unusual type of integrated load.

The concept of the primacy of knowledge is combined with the principles of primacy, offering the student a development perspective for a certain period. The motivational component has a more pronounced role, but it does not solve the main thing - the problem of the perception process (Karpennko & Chmikhova, 2016).

The adaptive learning model is the most relevant from all modern principles. Elements of adaptive learning are used today as a methodology for creation of lifelong learning courses. At the same time, adaptation expressions can be different in function, since they largely depend on the content of the application of didactic solutions.

In addition, there are regional and age-specific features of the educational process, where they will be encapsulated. In secondary vocational and higher education (as well as in the peculiarities of postgraduate and doctoral studies), the actual availability of adaptive education today is small, since their application means conducting of educational reform.

In many ways, the reform is stalled due to insufficient explanation of the model of differentiation of the educational process (of the module in particular).

In the proposed applied teaching didactics, the principles of constructing a dynamic line of development (trajectory) are considered through the formalization of the modular load calculation.

Indeed, any form of education shall not only combine and declare certainty of value, possess roles and features, but also possess cybernetic capacity, in other words it shall be at least the final product of activity, with a substantive basis delimited by criteria. In addition, the basis shall be normalized by the current realities of the service provision market.

The main idea of the proposed didactics is to build an optimal trajectory for a student to study course modules.

A module is a logically complete minimum unit of information in the genesis of teaching (learning), which reveals certain semantics within a topic and is in a targeted relationship with other units.

Building a trajectory from modules is a multi-criteria optimization problem. However, taking into account the specifics of the university curricula, namely the fact that the time allotted for studying the course is limited, the “optimal” requirement can be considered as obtaining the absolute value of the maximum level of knowledge at the end of the course with the minimum time for studying the course modules.

With the massive use of computer (digital) technology in laboratory, practical work, as well as in current realities, in the conditions of the need for a distance learning format, it is also necessary to limit the time due to the individual characteristics of the manifestation of behaviorism in reference groups of students (Karpenko, 2017; Lagunov & Podorojnyak, 2017; Soboleva & Perevozchikova, 2019).

Research Questions

Applied problems in the field of studying digital technologies, in particular, the basics of programming and web design, boil down to the following reasons:

• Labour intensity. Knowledge is formed rather slowly, the cumulative effect is unambiguously violated by the singularity of a delimiting nature: only one topic is considered, there are almost no integrated software packages that implement a training function that combines several related disciplines.
• Poorly pronounced decomposition in didactics. During studying of a complexly structured component (a programming language, development environment, web design, etc.) it is difficult for a student to decompose the perception process into steps. The virtual environment does not have the same parameters as things from the real world. This is about the peculiarities of the spatial perception of reality by human.
• Intellectual congestion. In the practice of conducting of laboratory class in schools or universities, the cycling logic is often used (it includes homework and a practical module in class). Everything is performed with a delay at a certain time, which, in fact, shall solve the aspectology of the problem of emotional stress, but due to the fact that the learning tool and mediator (computer, mobile device) "at home" and "at school" can be striking differ in a number of technical parameters (even the size of the monitor affects), the cognitive abilities of an individual subject are weakly correlated with the changing realities of the learning environment and reflect a higher likelihood of fatigue (Frain, 2015; Marcotte, 2014).

Purpose of the Study

To solve such aspects, the following solution which allows to eliminate this problem is proposed. It consists of:

• Web-based design of learning environments and work results representation. The advantages over desktop and mobile applications are that it is easier to develop a web page (application), and the overwhelming number of modern browsers (browsers) display all sites in the W3C (WWW) consortium decision paradigm declaratively in the same way. In many ways, this became possible due to the monopolization of the market at the expense of Chromium solutions and WebKit.

Such universality is absolutely impossible in executable files (programs), since they require constant support from the developers and cross-platform approach to design (there are a lot of operating systems). In addition, there are questions about standardization and security. Moreover, the Web itself is a learning framework. It is taught in computer science classes, in information technology courses, it takes first or second place, competing only with computer design. There is a judgment prescribed by society that: "A better understanding of the object of study arises from fundamental knowledge of the learning environment." This is the basis of the principles of organizing of general technical and pedagogical disciplines, architecture, and most educational courses for children. We came to the conclusion that from the organizational side, at the moment the most relevant approach to the design of information and communication means of interaction through the architecture of a web application (see Figure 1).

See Full Size >

The architecture of Web technologies as a whole is determined by the direct relationship between the data source and its recipient. Inquiry network system has analogues in the real world (postal, transport, interpersonal communication). The concepts "server" and "client" have a high level of recognition among different age groups.

Research Methods

The developed didactics consists in a conscious perception of the device of global telecommunication networks (WorldWideWeb) and the principles of working in the network through training in web technologies: HTML/CSS/JavaScript. It expresses:

• Spatially oriented nature is a didactic process of perceiving the integrity of the image of an object-oriented interface device (the most important concept between the system and the environment). The acquaintance with the world of all digital systems begins and ends with it (Azcona et al., 2018; Brusilovsky & Peylo, 2003; Dmitriev et al., 2020).
• Direct, inclusive immersion in interface theory in a practice-oriented component. It is necessary to learn to consolidate the representation of acquired skills and knowledge in electronic form. The concept of a "thesaurus" within the framework of overall digitalization.
• Didactics of "containerization" of forms of information presentation: obtaining direct skills in structuring data when jointly studying the main topic of study (foreign language, literature, mathematics), the student is introduced to the possibilities of maintaining a "digital footprint" and a copy of residual knowledge at the moment of a study (in dynamics) and after a certain period (in the format of abstracts, video materials, drawings). The intermodal nature of the web neutralizes the psychological effect of the “reflexive mind of a dabbler” due to the openness of the data for everyone.
• The controlled nature of homework and a complicated memorization chain. It is necessary not only to learn certain information, but to collect it and publish it. Moreover, the author is given all the possibilities: the usable space of an empty HTML page.
• The implementation of the design methodology for didactic purposes comes down to the use of CSSGrid (the native equivalent of organization of the workspace in reality) The primary knowledge of spatial orientation on paper, obtained in childhood, is reflected in the principle of HTML-page layout using a formal language for describing the appearance of the document. The layout is simple (Figure 2). It consists in creation of a grid of the working page: columns, rows and cells. Worldwide acceptance is proven by the adoption of this methodology by the W3C in 2017 for most web browsers (Riakhovskiǐ et al., 2000).

See Full Size >

Use of CSSGrid in didactics allows to reveal the possibilities of encapsulation of self-learning mechanisms due to use of existing analogies with visual programming. The predicative role of the information structuring skills learned in the lesson in the form of web pages plays a critical role with the principles of organization of interfaces and with the ability to create flexible, modular components (Yumashev et al., 2018; Zhang et al., 2020).

Findings

The cluster approach to the implementation of "knowledge diaries" and combinational reference books can reveal the possibilities of introduction into SemanticWeb (a publicly accessible global semantic network formed on the basis of the World Wide Web by standardizing the presentation of information in a form suitable for machine processing).

It is necessary not only to teach a wide number of referents (from children to adults) to correctly design a web page, but also to allow to perform a sensible assessments of the information that is generated by them (it implies the fact of their processing). This is due to the onset of the Web 3.0 paradigm, and the further development of the information-communication and scientific-heuristic culture of communication.

Fostering a culture of related and semantic elaborated pages and “knowledge stores” adaptive to perception from various devices comes down to three rules:

• Data tagging;
• Collective analysis or self-review; as well as the rule “as it is” and “as it is convenient for my friends”. They reflect the ability to present data in a convenient and consistent way.
• The principle of "uniqueness" is the elimination of refrains by searching and ranking on the topic of research and work in order to gain empirical experience of familiarization with the works (projects) of other participants and finding their own semantic core (Zhukovskyy et al., 2019).

Formalization of the multicriteria task of optimizing the educational process by building a trajectory from modules is as follows. Meaning the differentiation of the didactics of the proposed course in the form of implementation from various organizations and services, namely that the chronological period allotted for studying a lesson or course is still determined by a numerical value. The multi-criteria criterion of optimality can be considered as obtaining the maximum level of knowledge at the time of completion with a minimum time for studying the course modules in computer terms (1):

F(PTcon) = $\frac{\mathrm{T}\mathrm{M}}{\mathrm{R}\left(\mathrm{T}\mathrm{c}\mathrm{o}\mathrm{n}\mathrm{s}\mathrm{t}\right)\mathrm{}}$ → min.(1)

where P is the order of studying the atomic block, TM is the sum of the time spent for modules studying, R is the level of residual knowledge. Since the end time of the course Tconst is a constant, it can be omitted during writing the objective function (Vlasyuk et al., 2020).

Conclusion

Thus, the paper considers and provides the author's proposals concerning the role of adaptive, advanced and modular learning for various groups of students. The form of presentation and representation of the acquired and reproduced knowledge is generalized, the principles of technical and pedagogical education are formalized, ideas for the formalization of the multicriteria tasks of considered didactic methodologies are given.

References

• Azcona, D., Hsiao, I. H., & Smeaton, A. F. (2018). Personalizing computer science education by leveraging multimodal learning analytics, IEEE Frontiers in Education Conference (FIE), 1-9.

• Brusilovsky, P., & Peylo, C. (2003). Adaptive and Intelligent Web-based Educational Systems, International Journal of Artificial Intelligence in Education, 13, 156-169.

• Dmitriev, Y. A., Chistyakov, M. S., Lachinina, T. A., & Chirkov, M. A. (2020). The platform format of technological development as a manifestation of NBIC convergence configuration. Lecture Notes in Networks and Systems. In book: Industry Competitiveness: Digitalization, Management, and Integration, 115, 139-148. DOI:

  Google Scholar

  Crossref

• Frain, B. (2015). Responsive Web Design with HTML5 and CSS3. Packt Publishing.

• Karpenko, M. P. (2017). Distance education. Part 1. Didactic and process environment: monography. Publishing house of the Modern University for the Humanities.

• Karpennko, M. P., & Chmikhova, E. V. (2016). Attitude development in the educational process of university that implements the e-learning. Current problems of implementation of e-learning and distance educational technologies. Scientific readings. Book 2. Publishing house of the Modern University for the Humanities.

• Lagunov, A., & Podorojnyak, N. (2017). Quest like form of MOOC organizing. 16th International Conference on Information Technology Based Higher Education and Training (ITHET) https://doi.org/

  Google Scholar

  Crossref

• Marcotte, E. (2014). Responsive Web Design (Brief Books for People Who Make Websites). A Book Apart.

• Riakhovskiǐ, A. N., Zheltov, S. I., Kniaz', V. A., & Iumashev, A. V. (2000). A hardware and software complex for producing 3D models of the teeth [Apparatno-programmnyi kompleks polucheniia 3D-modelei zubov], Stomatologiya, 79(3), 41-45. [in Russ].

• Soboleva, E. V., & Perevozchikova, M. S. (2019). Features of training future teachers to develop and use mobile gaming applications with educational content. Prospectives of science and education, 5(41), 428-440. DOI:

  Google Scholar

  Crossref

• Vlasyuk, A. P., Zhukovska, N. A., & Zhukovskyy, V. V. (2020). Mathematics and computer modeling of cohesion effect forces on spatial deformation processes of soil massif. Mathematical Modeling and Computing, 7(1), 196-205. DOI:

  Google Scholar

  Crossref

• Yumashev, A. V., Utyuzh, A. S., Admakin, O. I., Doroshina, V. Y., & Volchkova, I. R. (2018). Effect of mesodiencephalic stimulation on adaptation to stress and academic performance of students. International Journal of Learning and Change, 10(4), 359-367.

• Zhang, T., Shaikh, Z. A., Yumashev, A. V., & Chłąd, M. (2020). Applied Model of E-Learning in the Framework of Education for Sustainable Development. Sustainability, 12, 6420.

• Zhukovskyy, V., Zhukovska, N., Vlasyuk, A., & Safonyk, A. (2019). Method of Forensic Analysis for Compromising Carrier-lock Algorithm on 3G Modem Firmware," IEEE 2nd Ukraine Conference on Electrical and Computer Engineering (UKRCON), 1179-1182. DOI:

  Google Scholar

  Crossref