Файл: Лекции (ак ч) Содержание лекций Практ занятия (ак ч.).docx

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 22.11.2023

Просмотров: 16

Скачиваний: 2

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

Наименование темы

Лекции

(ак.ч)

Содержание лекций

Практ.

занятия (ак.ч.)

Содержание практических занятий

Самост.

работа (ак.ч.)

Содержание

самостоятельной работы

Тема 1. Как работает интернет?

2

Интернет. HTTP. Браузер. Доменные имена. Хостинг. DNS. Основы алгоритмизации: алгоритмы ветвления и циклы.

 

 

 

 

Тема 2. HTML-документ: структура, разметка текста

1

Язык гипертекстовой разметки. Структура HTML-документа.

1

Создание HTML-файла. Разметка текста.

-

 

Тема 3. Изображения на веб-странице

1

Тег и его атрибуты. Форматы веб-графики. Карта изображения с активными областями (теги , ).

1

Вставка изображения ( , , )

-

 

Тема 4. Среда разработки или веб-редактор

1

Типы веб-редакторов. Сравнительная характеристика популярных веб-редакторов.

1

Инструменты веб­редактора. Подбор веб­редактора.

 

 

Тема 5. Списки на веб­странице

1

Неупорядоченные списки. Упорядоченные списки. Вложенные списки. Списки определений.

1

Создание списков в HTML.

 

 

Тема 6. Спецсимволы HTML

1

Полезные знаки и символы. Знаки пунктуации. Стрелки. Правила применения.

1

Вставка специальных символов при помощи HTML.

-

 

Тема 7. Создание таблиц

1

Таблицы в HTML. Строки. Ячейки. Понятие табличной вёрстки и её недостатки.

1

Создание таблицы в HTML.

-

 

Тема 8. Гиперссылки

1

Гипертекст. Гиперссылки. Тег и его атрибуты.

1

Вставка гипертекста и создание гиперссылки.

-

 

Тема 9. Что такое CSS. Основные свойства CSS и их значения

1

Что такое CSS. Виды селекторов CSS. Основные свойства CSS и их значения. Боксовая модель в CSS.

1

Подключение CSS к веб­странице.

 

 

Темы 10. Позиционирование и интересные CSS- эффекты

2

Позиционирование. Псевдокласс :hover. Контекстные селекторы. Свойство display.

2

Применить CSS-эффекты (тени и скруглённые углы).

 

 

Тема 11. Блочная модель 

1

Блочные и строчные элементы HTML. Свойства CSS, использующиеся для блочной вёрстки.

1

Применить блочные и строчные элементы HTML.

-




Тема 12. Приёмы и шаблоны вёрстки

2

Типы макетов веб-страниц. Шаблоны вёрстки для распространенных типов макетов.

3

Применить приёмы и шаблоны вёрстки («резиновая» и фиксированная вёрстка).

3

Самостоятельная работа направлена на повторение пройденного материала.

Аттестация по итогам модуля 1.

 

 

 

 

4

Тест на знание HTML и CSS. Практическое задание: создание веб-страницы по образцу.

Тема 1. Проектирование сайта

1

«Силуэт» сайта. Модульная сетка сайта. Элементы веб­страницы.

1

Проектирование дизайна сайта.

-

 

Тема 2. Основы веб­дизайна

2

Что такое веб-дизайн. Основные принципы веб­дизайна. Базовые элементы дизайна. Принципы создания композиции. Стили веб-дизайна. Особенности веб-графики.

 

 

 

 

Тема 3. Разработка дизайна сайта

2

Инструменты для создания макетов сайта. Работа со стоками изображений и графическими редакторами.

2

Разработка дизайн-макета сайта. Экспорт графических элементов.

 

 

Тема 4. Вёрстка сайта по дизайн-макету

2

Фоновые изображения CSS. Управление слоями. Таблица веб-цветов.

2

«Нарезка» дизайн-макета.

-

 

Тема 5. Семантическая вёрстка

1

Почему семантика важна. Семантические теги HTML.

1

Создание семантической разметки по макету.

-

 

Тема 6. Система контроля версий Git

-

 

4

Установка Git. Создание репозитория. Внесение и

-

 

 

 

 

 

индексация изменений. Коммит изменений. Работа с репозиториями. Расшаривание репозиториев.

 

 

Тема 7. Размещение веб­сайта в сети

1

GitHub Pages. Создание сайта. Настройка источника публикации. Управление собственным доменом. Отмена публикации.

1

Практическая работа, направленная на создание сайта

 

 

Тема 8. Адаптивный дизайн

1

Понятие адаптивного макета. Фактор юзабилити. Адаптивная вёрстка и мобильная версия.

1

Практическая работа по созданию адаптивного макета сайта

 

 

Тема 9. Анимации CSS

1

Простые анимации CSS. CSS-переходы. Конфигурация анимации.

1

Практическая работа по созданию простой анимации в CSS

2

Самостоятельная работа направлена на повторение пройденного материала.

Аттестация по итогам модуля 2.

 

 

 

 

10

Проектирование и разработка небольшого сайта.

Тема 1. Введение в JavaScript

1

Что такое JavaScript. Особенности JavaScript. Подключение JavaScript к веб-странице.

 

 

 

 

Тема 2. Переменные и типы данных

-

 

1

Структура кода. Переменные. Типы данных. Преобразование типов.

-

 

Тема 3. Базовые операторы

-

 

1

Математические операторы. Операторы сравнения. Логические операторы.

-

 

Тема 4. Условное ветвление

 

 

2

Условный оператор if-else. Условное ветвление. Тернарный условный оператор.

 

 

Тема 5. Конструкция switch

-

 

1

Оператор switch. Группировка case. Сравнение с if.

-

 

Тема 6. Циклы

 

 

2

Цикл while. Цикл do-while. Цикл for. Прерывание циклов. Переход к следующей итерации.

 

 

Тема 7. Функции

 

 

4

Объявление функции. Параметры функции. Возврат значения. Локальные и глобальные переменные.

 

 

Тема 8. Качество кода

-

 

4

Отладка в браузере. Стиль кода. Комментарии.

-

 

Тема 9. Объекты: основы

 

 

4

Объекты. Методы объектов, this. Конструкторы, создание объектов. Сборка мусора.

 

 

Тема 10. Структуры данных

-

 

3

Массивы. Перебираемые объекты. Сложные структуры данных.

3

Самостоятельная работа направлена на повторение пройденного материала.

Тема 11. Работа с DOM

 

 

4

DOM-дерево. Навигация по DOM-элементам. Атрибуты и свойства. Способы взаимодействия с пользователем. События. Динамическое изменение документа

 

 

Аттестация по итогам модуля 3.

 

 

 

 

6

Реализация работоспособного веб­-приложения.

Тема 1. Веб-безопасность

2

Преимущества HTTPS перед HTTP. Основные виды атак веб-приложений. Межсайтовый скриптинг. Политика безопасности содержимого. Проверка входящих данных.

 

 

 

 

Тема 2. Препроцессоры CSS

 

 

8

Что такое препроцессоры. Переменные. Вложенность. Миксины. Наследование селекторов.

 

 

Тема 3. Шаблонизаторы HTML

 

 

4

Создание шаблонов. Создание компонентов. Работа с данными. Интерактивность: условные выражения и циклические конструкции.

 

 

Тема 4. Пакетные менеджеры и бандлеры

 

 

2

Обзор менеджеров пакетов и сборщиков для приложений на JavaScript. Установка и настройка. Базовые понятия.

 

 

Тема 5. Изучение фреймворка

 

 

8

Выбор фреймворка. Библиотека. Компоненты. События. Управление состоянием. Формы. API- вызовы. Маршрутизация.

8

Самостоятельная работа направлена на повторение пройденного материала.

Аттестация по итогам модуля 4.

-

 

-

 

4

Модульные, интеграционные и функциональные тесты.

Итоговая аттестация

-

 

-

 

16

Итоговая аттестация