Web design

Краткое содержание учебной дисциплины, модуля / Brief summary

Язык разметки HTML и CSS. Основные отличия HTML4 и HTML5 – новые теги и атрибуты, исключенные и изменившие семантику теги. Семантичность кода страницы, уровни семантики. Валидация HTML-документов.

Стилевое описание документа. Селекторы потомков, дочерних элементов, элементов одного уровня, простые селекторы, псевдоклассы, псевдоэлементы, селекторы атрибутов.

Базовое наследование, каскадирование, валидация CSS.

Язык разметки XML и схемы данных.

Расширяемые языки разметки и языки преобразований: назначение, применение, преимущества. Визуализация XML-документа.

Схемы данных, элементы и атрибуты. Создание и применение схем данных. Пользовательские, встроенные, сложные и простые типы данных для схем.

Разработка графики для веб-страниц. Векторные изображения, инструментарий их создания и редактирования. Отрисовка и редактирование, заливка. Создание gif-анимации. Трансформации объектов. Одно-, двух- и трехточечные перспективные изображения. API векторных графики систем графического дизайна.

Основы проектирования сайтов.

Виды навигации на сайте. Важнейшие принципы формирования информационной архитектуры и Usability веб-ресурсов.

Верстка сайта, ее модели, приемы и особенности.

Техники адаптивной верстки и подходы к реализации (стратегии).

Технология flexbox: область применения, направления flex-потока, свойства flex-контейнера и его дочерних элементов. Grid-разметка: точное и адаптивное позиционирование двумерных макетов. Grid-контейнер и grid-элементы, блочный и строчный grid-контейнер, создание подсетки и ее размеры, grid-области.

Системы управления контентом и фреймворки.

Классификация систем управления контентом (CMS). Особенности интерфейса и установка темы. Создание главной страницы сайта. Создание внутренних страниц сайта, шапки и подвала. Внедрение сверстанной страницы в CMS. Применение темы в CMS. Создание своей темы на основе готовой верстки. Реализация меню в шапке сайта. Создание виджетов. Создание и вывод информационных секций (экранов) лендинга. Создание формы обратной связи.

Реализация адаптивной верстки средствами фреймворка.

Hypertext markup languages

The main differences between HTML4 and HTML5 are new tags and attributes, excluded tags and tags that have changed the semantics. Semantics of the page code, levels of semantics. Validation of HTML documents.

Style description of the document.

Selectors for descendants, child elements, sibling elements, simple selectors, pseudo-classes, pseudo-elements, attribute selectors.

Basic inheritance, cascading, CSS validation.

XML markup language and data schemas.

Extensible markup languages ​​and transformation languages: purpose, application, advantages. Visualization of an XML document.

Data schemas, elements and attributes. Creating and applying data schemas. Custom, built-in, complex, and simple data types for schemas.

Creation graphics for web pages.

Vector images, tools for their creation and editing. Drawing and editing, filling. Creation of gif animation. Transformations of objects. One-, two- and three-point perspective images. Vector graphics API for graphic design systems.

Website Design Basics

Types of navigation on the site. The most important principles for the formation of information architecture and Usability of web resources.

Website layout, its models, techniques and features

Adaptive layout techniques and approaches to implementation (strategies).

Flexbox technology: scope, directions of flex flow, properties of flex content and its child elements. 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 and frameworks.

Classification of content management systems (CMS). Interface features and theme installation. Creating the main page of the site. Creation of internal website pages, header and footer. Implementation of a layout page in a CMS. Applying a theme to a CMS. Creating your own theme based on a ready-made layout. Implementation of a menu in the site header. Creation of widgets. Creation and display of information sections (screens) of the landing page. Creating a feedback form.

Implementation of adaptive layout using framework tools.

Формируемые компетенции / The formed competences

Базовые профессиональные компетенции.

Осуществлять поиск и анализ данных по изучаемой проблеме в научной литературе, составлять аналитические обзоры, готовить научные статьи, сообщения, рефераты, доклады и материалы к презентациям.

Применять современные технологии и базовые конструкции языков программирования для реализации алгоритмических прикладных задач и разработки веб-проектов.

Cпециализированные компетенции:

Осуществлять анализ контекста и поставленной проблемы, аргументированно выбирать оптимальный способ ее решения, согласовывать частичные проектные решения в общую согласованную архитектуру, выполнять реализацию проекта с учетом оценки накопленных и поступающих данных

Basic professional competencies.

Search and analyze data on the problem under study in the scientific literature, compose analytical reviews, prepare scientific articles, communications, abstracts, reports and materials for presentations.

Apply modern technologies and basic programming language designs to implement algorithmic applied problems and develop web projects.

Specialized competencies:

Analyze the context and the problem posed, reasonably select the optimal way to solve it, coordinate partial design solutions into an overall consistent architecture, implement the project taking into account the assessment of accumulated and incoming data.

Результаты обучения (знать, уметь, владеть) / Learning outcomes (know, can, be able)

В результате освоения учебной дисциплины студент должен:

знать:

•        современные методы верстки сайтов;

•        схемы описания данных, встроенные, простые и сложные типы данных;

•        структуру и возможности современных систем управления контентом (CMS) различного назначения;

уметь:

•        разрабатывать адаптивный дизайн сайтов;

•        создавать сайт с помощью CMS;

владеть:

навыками применения технологии flexbox и grid-разметки для создания веб-страницы;

•        создания схем данных для расширяемых языков разметки;

•        разработки web-ресурсов с помощью CMS.

As a result of mastering the academic discipline, the student must:

know:

• modern methods of website layout;

• data description schemes, built-in, simple and complex data types;

• structure and capabilities of modern content management systems (CMS) for various purposes;

be able to:

• develop adaptive website design;

• create a website using CMS;

own:

• skills in using flexbox and grid markup technology to create a web page;

• creating data schemas for extensible markup languages;

• development of web resources using CMS.

Семестр изучения учебной дисциплины, модуля / Semester of study

2

2

Пререквизиты / Prerequisites

Дисциплина является первой из ряда курсов по информационным технологиям и опирается на знания, полученные на основе среднего образования, по информатике и математике.

– Методы программирования;

– Введение в специальность.

The discipline is the first of a number of courses in information technology and is based on the knowledge gained from secondary education in computer science and mathematics.

– Programming Methods;

– Introduction to the specialty.

Трудоемкость в зачетных единицах (кредитах) / Credit units

3 зачетные единицы

3 credits units

Количество аудиторных часов и часов самостоятельной работы / Academic hour of students’ class work,

hours of self-directed learning

Количество аудиторных часов – 34, часов самостоятельной работы – 40

Academic hour of students’ class work – 34, hours of self-directed learning – 40

Требования и формы текущей и промежуточной аттестации / Requirements and forms of current and interim certification

Экспресс-опрос на лабораторных занятиях. Защита индивидуальных заданий. Коллоквиум в форме компьютерного тестирования. Экзамен.

Express survey during laboratory classes. Protection of individual assignments. Colloquium in the form of computer testing. Exam.