Веб-конструирование

Специальность / Speciality: 6-05-0533-06 Математика / Mathematics

Учебная дисциплина, модуль / Academic discipline, module: Веб-конструирование, модуль «Дополнительные виды обучения» / Web design, module «Additional types of training»

Краткое содержание учебной дисциплины, модуля / Brief summary	Скрипты на стороне клиента. JavaScript и jQuery. Язык JavaScript. Скрипты на клиентской странице. DOM — объектная модель документа. Манипуляции HTML-элементами. Чтение и изменение CSS-свойств, классов и атрибутов. Обход DOM и выборка HTML-элементов. Введение в jQuery. Технология Ajax. Библиотеки и фреймворки, используемые при создании сайтов (на примере Vue, React, Angular). Аудио и видео контент на HTML странице. Форматы мультимедиа. Встраивание аудио и видео контента на страницу с использованием HTML и JavaScript. Использование онлайн видео- и аудио- провайдеров. Графика на HTML-страницах. Использование элемента canvas для рисования 2D- и 3D-графики на лету с помощью JavaScript. Масштабируемая векторная графика SVG как технология рисования с хранением объектов в памяти. Библиотека WebGL как программный интерфейс для создания интерактивной веб-графики. Расширенные возможности CSS3. Каскадные таблицы стилей. Стилизация элементов на основе их расположения в документе. Стилизация элементов на основе атрибута или значения атрибута. Стилизация элементов на основе их состояния. Стилизация части элемента. Псевдоэлементы. Правило разбора составных селекторов. Трансформации. Медиазапросы. Колонки. Объединение и смешивание слоев. Новые возможности CSS3. Библиотеки CSS и дизайн инструменты. Фреймворк Bootstrap. Назначение и особенности применения препроцессоров CSS. Основы проектирования сайтов. Классификация сайтов. Основные этапы проектирования сайтов. Инструменты прототипирования. Навигация по сайту: основные виды, правила построения и влияние на SEO. Понятие UX/UI. Верстка сайта, ее модели, приемы и особенности. Суть и основы верстки сайтов. Основные виды верстки сайтов: фиксированная, резиновая, адаптивная, отзывчивая, мобильная. Их плюсы и минусы. Основные принципы верстки. Особенности SEO-верстки сайта и внутренней поисковой оптимизации. Отзывчивый и адаптивный дизайны сайта, общее и отличия. Универсальные шаблоны. Полезные сервисы и инструменты. Основные типы верстки. Блочная верстка, одно- и многоколоночные макеты. Позиционирование блоков. Резиновый дизайн. Техника адаптивной верстки, подходы к реализации. Технология flexbox: область применения, направления flex-потока, свойства flex-контейнера и его дочерних элементов. Многостраничная организация блоков внутри flex-контейнера. CSS правила для дочерних элементов flex-контейнера (flex-блоков). Grid-разметка: точное и адаптивное позиционирование двумерных макетов. Grid-контейнер и grid-элементы, блочный и строчный grid-контейнер, создание подсетки и ее размеры, grid-области. Системы управления контентом. CMS. Назначение, виды и принцип работы. Примеры CMS.	Client side scripts. JavaScript and jQuery. JavaScript language. Scripts on the client page. DOM is the Document Object Model. Manipulation of HTML elements. Reading and changing CSS properties, classes and attributes. Traversing the DOM and fetching HTML elements. Introduction to jQuery. Ajax technology. Libraries and frameworks used to create websites (for example, Vue, React, Angular). Audio and video content on an HTML page. Multimedia formats. Embedding audio and video content on a page using HTML and JavaScript. Using online video and audio providers. Graphics on HTML pages. Using the canvas element to draw 2D and 3D graphics on the fly using JavaScript. Scalable SVG vector graphics as an in-memory drawing technology. WebGL library as a programming interface for creating interactive web graphics. Advanced CSS3 features. Cascading style sheets. Styling elements based on their location in the document. Styling elements based on an attribute or attribute value. Styling elements based on their state. Styling part of an element. Pseudo-elements. Rule for parsing compound selectors. Transformations. Media queries. Columns. Merging and blending layers. New features of CSS3. CSS libraries and design tools. Bootstrap framework. Purpose and features of using CSS preprocessors. Basics of website design. Classification of sites. Main stages of website design. Prototyping tools. Site navigation: main types, construction rules and impact on SEO. The concept of UX/UI. Website layout, its models, techniques and features. The essence and basics of website layout. The main types of website layout: fixed, fluid, adaptive, responsive, mobile. Their pros and cons. Basic principles of layout. Features of SEO website layout and internal search engine optimization. Responsive and adaptive website designs, common features and differences. Universal templates. Useful services and tools. Basic types of layout. Block layout, single and multi-column layouts. Positioning of blocks. Rubber design. Adaptive layout techniques, approaches to implementation. Flexbox technology: scope, directions of flex flow, properties of a flex container and its child elements. Multi-page organization of blocks inside a flex container. CSS rules for child elements of a flex container (flex blocks). Grid layout: precise and adaptive positioning of 2D layouts. Grid container and grid elements, block and inline grid containers, creating a subgrid and its dimensions, grid areas. Content management systems. CMS. Purpose, types and principle of operation. CMS examples.
Формируемые компетенции / The formed competences	базовые профессиональные компетенции: применять современные компьютерные математические системы для проведения вычислительного (компьютерного) эксперимента; Применять основные понятия информатики, базовые конструкции языков программирования, технологии объектно-ориентированного программирования для реализации алгоритмических прикладных задач и разработки веб-проектов; применять инновационные информационные технологии и современные языки программирования. специализированные компетенции: осуществлять анализ контекста и поставленной проблемы, аргументированно выбирать оптимальный способ ее решения, согласовывать частичные проекты решения в общую согласованную архитектуру, выполнять реализацию проекта с учетом накопленных и поступающих данных.	Basic professional competencies: apply modern computer mathematical systems to conduct computational experiments; apply fundamental computer science concepts, basic programming language constructs, and object-oriented programming technologies to implement algorithmic applied problems and develop web projects; apply innovative information technologies and modern programming languages. Specialized competencies: analyze the context and the problem, reasonably select the optimal solution, coordinate partial solution designs into a coherent overall architecture, and implement the project based on accumulated and incoming data.
Результаты обучения (знать, уметь, владеть) / Learning outcomes (know, can, be able)	В результате освоения учебной дисциплины студент должен *знать:* HTML; CSS; основы языка JavaScript; библиотеки и фреймворки, используемые при создании сайтов; основы проектирования сайтов; различные модели и приемы верстки сайтов; системы управления контентом; современные тенденции и направления развития информационных технологий в области разработки дизайна сайтов; *уметь:* проектировать интерфейс веб-приложений; создавать веб-страницы; создавать и использовать каскадные таблицы стилей CSS; создавать интерактивные элементы на странице средствами JavaScript; проектировать сайты и верстать страницы; *владеть:* навыками практического проектирования сайтов и практического использования современных технологий создания сайтов.	As a result of mastering the academic discipline, the student must *know:* – HTML; – CSS; – basics of the JavaScript language; – libraries and frameworks used to create websites; – basics of website design; – various models and techniques for website layout; – content management systems; – modern trends and directions of development of information technologies in the field of website design development; *be able to:* – design the interface of web applications; – create web pages; – create and use cascading CSS style sheets; – create interactive elements on the page using JavaScript; – design websites and layout pages; *own:* – skills in practical website design and practical use of modern website creation technologies.
Семестр изучения учебной дисциплины, модуля / Semester of study	6	6
Пререквизиты / Prerequisites	Технологии программирования	Programming technologies
Трудоемкость в зачетных единицах (кредитах) / Credit units	3	3
Количество аудиторных часов и часов самостоятельной работы / Academic hour of students’ class work, hours of self-directed learning	Всего 90 часов, из них 34 аудиторных часа и 56 часов самостоятельной работы.	A total of 90 hours, including 34 classroom hours and 56 hours of independent work.
Требования и формы текущей и промежуточной аттестации / Requirements and forms of current and interim certification	Опрос. Отчет по лабораторным работам, домашним заданиям и расчетно-графическим работам. Зачёт.	Survey. Report on lab work, homework, and calculations and graphic work. Credit.