Введение в веб-программирование

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

Интернет. Основные понятия.

Цель, содержание и особенности курса. Интернет. Основные понятия представления, организации и передачи информации в Интернете. Протоколы. Адресация. Система доменных имен. Клиенты и серверы. Веб-сайт. Фронтенд, бэкенд. Необходимые инструменты разработки. Виды сайтов. Планирование в сайтостроении. Веб-обозреватели. Современные тенденции и направления развития информационных технологий в области разработки дизайна сайтов. Веб-редакторы. Adobe Dreamweaver. Инструменты разработчика (Developer tools).

Язык разметки гипертекста HTML.

История возникновения. Стандарт W3C. Основные понятия. Поддержка браузерами последней версии HTML. Нормализация стилей. Валидация кода. Основные правила синтаксиса. Структура документа. Информация об используемой версии языка. Секция заголовка. Основные теги. Глобальные атрибуты и атрибуты событий. Перетаскивание объектов Drag and Drop. Ссылки. Интернет-графика и её форматы. Вставка графического элемента, задание его параметров. Создание изображений-гиперссылок, активных изображений, карт-изображений, семантических изображений. Фоновые изображения. Форматирование текста. Списки. Таблицы. Блочные теги для структурирования контента. Семантические теги. Генераторы шаблонного текста. Плавающий фрейм. Внедрение Google карт. Формы. Элементы интерактивного интерфейса. 

Каскадные таблицы стилей CSS.

Спецификация, версии языка. Объединение стилей. Типы таблиц стилей. Каскадность. Специфичность. Наследование. Работа со стилями css в Инструментах разработчика браузера. Синтаксические правила. Селекторы. Браузерные префиксы. Стандартная и альтернативная блочные модели. Свойства блока и особенности суммирования отступов. Использование каскадных таблиц стилей CSS при верстке веб-страниц с использованием контейнеров. Свойства фона и цвета, шрифта и текста, списков и таблиц. Псевдоклассы гипертекстовых ссылок. Псевдоэлементы. Оптимизации веб-страницы для пользователей с ограниченными возможностями.

Основы JavaScript.

Возможности и ограничения JavaScript в браузере. Размещение JavaScript кода на веб-странице. VS Code. Консоль JavaScript в Инструментах разработчика (Developer tools). Лексическая структура языка. Типы данных и переменные. Операторы. Преобразования типов данных. Управляющие конструкции javascript. Объекты и массивы. Функции. Классы. События и обработка событий. 

Internet. Basic Concepts.

Course Objective, Content, and Features. Internet. Basic concepts of presenting, organizing, and transmitting information on the Internet. Protocols. Addressing. Domain Name System. Clients and Servers. Website. Frontend, Backend. Essential Development Tools. Types of Websites. Website Planning. Web Browsers. Current Trends and Directions in Information Technology Development in Website Design. Web Editors. Adobe Dreamweaver. Developer Tools.

HTML (Hypertext Markup Language).

History. W3C Standard. Basic Concepts. Browser Support for the Latest Version of HTML. Style Normalization. Code Validation. Basic Syntax Rules. Document Structure. Information about the Language Version Used. Header Section. Basic Tags. Global Attributes and Event Attributes. Drag and Drop. Links. Internet Graphics and Their Formats. Inserting a Graphic Element, Setting Its Parameters. Creating Hyperlinked Images, Active Images, Image Maps, and Semantic Images. Background images. Text formatting. Lists. Tables. Block tags for structuring content. Semantic tags. Template text generators. Illuminated frame. Google maps implementation. Forms. Interactive interface elements.

Cascading Style Sheets (CSS).

Specification, language versions. Combining styles. Style sheet types. Cascading. Specificity. Inheritance. Working with CSS styles in the browser’s Developer Tools. Syntax rules. Selectors. Browser prefixes. Standard and alternative box models. Block properties and indentation stacking features. Using Cascading Style Sheets (CSS) when laying out web pages using containers. Background and color properties, font and text properties, lists and tables. Hypertext link pseudo-classes. Pseudo-elements. Optimizing web pages for users with disabilities.

JavaScript Basics.

JavaScript capabilities and limitations in the browser. Placing JavaScript code on a web page. VS Code. The JavaScript console in Developer Tools. Lexical structure of the language. Data types and variables. Operators. Data type conversions. JavaScript control structures. Objects and arrays. Functions. Classes. Events and event handling.

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

базовые профессиональные компетенции: применять современные компьютерные математические системы для проведения вычислительного (компьютерного) эксперимента; применять основные понятия информатики, базовые конструкции языков программирования, технологии объектно-ориентированного программирования для реализации алгоритмических прикладных задач и разработки веб-проектов; применять инновационные информационные технологии и современные языки программирования.

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

Basic professional competencies: apply modern computer mathematical systems to conduct computational (computer) 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;

проверять сайты на соответствие стандартам W3C и кроссбраузерность;

владеть:

навыками практического проектирования сайтов и практического использования современных технологий создания сайтов.

Upon completion of this course, students should understand:

the basic concepts of presenting, organizing, and transmitting information on the Internet;

current trends and directions in the development of information technology in website design;

the basic principles of web design;

HTML;

the basic capabilities of CSS;

the basics of JavaScript;

be able to:

design web application interfaces;

create web pages;

create and use cascading style sheets (CSS);

create interactive elements on a page using JavaScript;

check websites for compliance with W3C standards and cross-browser compatibility;

possess:

skills in practical website design and the practical use of modern website creation technologies.

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

5

5

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

Технологии программирования

Programming technologies

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

0

0

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

hours of self-directed learning

Всего 90 часов, из них 36 аудиторных часов и 54 часа самостоятельной работы.

A total of 90 hours, including 36 classroom hours and 54 hours of independent work.

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

Опрос. Отчет по лабораторным работам, домашним заданиям и расчетно-графическим работам. Зачет.

Survey. Report on lab work, homework, and calculations and graphic work. Credit.