+7 (812) 703-02-02 info@hse.spbstu.ru
16.08.2022 19:00 День открытых дверей программ профессиональной переподготовки
Онлайн-формат. Для участия нужна регистрация...

Профессиональная вёрстка интерфейсов

Длительность дисциплины: 64 ак.ч.


Аннотация

Язык программирования JavaScript разработан для добавления интерактивности в интерфейс пользователя. Изменение состояние элементов позволяет в полной мере создавать динамические макеты сайтов.

Также язык JavaScript помогает при работе над автоматизацией задач, автоматическому добавлению расширений и готовых решений из сторонних источников. Автоматизация позволяет минимизировать временные затраты на выполнение стандартных задач процесса веб-разработки, позволяет создавать более универсальных код, который компилируется в один или несколько различных релизов. Данный курс предназначен для добавления интерактивности в интерфейс и освоения слушателями основ автоматизации процессов разработки веб-приложений.

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


Знания и умения, полученные в результате изучения

В результате обучения слушатели будут

Знать:

  • логику работы с языком JavaScript;
  • принципы работы с системами контроля версий;
  • приемы работы с git в командной строке;
  • принципы работы с препроцессорами и постпроцессорами;
  • приемы управления автоматизацией часто выполняемых задач;
  • приемы разработки в режиме «непрерывной интеграции».

Уметь:

  • добавлять в интерфейс пользователя интерактивные элементы;
  • менять состояние элементов посредством JavaScript;
  • устанавливать git, npm, bower, gulp;
  • управлять задачами автоматизации;
  • создавать код на языке SassScript;
  • устанавливать модули npm;
  • работать с потоками автоматизации;
  • проектировать цепочку автоматизации рабочего процесса от исходного кода проекта до сборки релиза;
  • создавать условия изменения сборок при изменении критериев проекта.

Содержание дисциплины

Тема 1

Объектная модель документа

  • Реализация DOM в разных браузерах.
  • Элементы документа, их свойства и методы работы с ними.
  • Типы узлов, работа с атрибутами.

Основы JQuery

  • Обзор существующих библиотек.
  • Загрузка и подключение библиотеки JQuery, версии, документация по библиотеке.
  • Структура библиотеки.
  • Обработчик готовности документа.

Выбор элементов документа

  • Базовые селекторы.
  • Селекторы выбора потомков, контейнеров и атрибутов.
  • Селекторы выбора элементов по расположению в дереве DOM.
  • Применение фильтров.

Тема 2

Доступ к атрибутам элементов

  • Добавление, удаление и изменение классов и атрибутов.
  • Изменение сss свойств элемента. Позиционирование и масштабирование элемента.

Работа с содержимым элемента

  • Замена html-разметки или текста.
  • Перемещение, копирование, удаление элементов.

События

  • Основные события, поддерживаемые JQuery.
  • Подключение обработчиков событий. Методы bind(),one(), unbind().
  • Динамические обработчики событий. Методы live(), die().
  • Задание callback-функций, вызываемых при наступлении события.

Тема 3

Базовые эффекты и анимация

  • Скрытие и отображение элементов.
  • Переключение состояния отображения метод toggle.
  • Постепенное скрытие и отображение элементов.
  • Остановка анимационных эффектов.
  • Создание анимационных эффектов: масштабирование, эффект падения.

Тема 4

Пользовательские интерфейсы JQuery

  • Библиотека JQuery UI. Загрузка и использование.
  • Темы оформления JQuery UI.

Эффекты JQuery UI

  • Применение виджетов.
  • Применение готовых и создание собственных стилевых тем. Разработка слайдера. Progressbar.
  • Репозиторий плагинов. Загрузка и подключение плагинов.

Плагины JQuery

  • Взаимодействие JQuery UI с мышью.
  • Перетаскивание элементов мышью.
  • Упорядочивание элементов.
  • Изменение размеров элементов.

Новейшие решения

  • Формы.
  • Меню.
  • Интерактивные галереи.

Тема 5

  • Установка и запуск git.
  • Работа в консоли.
  • Создание локального и внешнего репозитория.
  • Управление коммитами и ветками проекта.

Тема 6

  • Установка компилятора для препроцессоров.
  • Сравнение less, sass и scss.
  • Основы SassScript.
  • Работа с переменными. Область видимости.

Тема 7

  • less, sass и scss типы данных, операции, функции.
  • Автоматизация стилевых описаний для фронтенд разработки.
  • Создание функций.
  • Работа с циклами и условиями.

Тема 8

  • Установка gulp и дополнительных модулей.
  • Проектирование задач автоматизации.
  • Создание файла gulpfile.js.
  • Итеративное улучшение потока задач, работа с pipe.
  • Инкрементальная сборка, watch.

Тема 9

  • Установка менеджеров пакетов.
  • Создание множественных сборок проекта с вариативными частями.
  • Публикация кода в репозитории. Потоковая загрузка файлов на конечный сервер.
  • Тестирование кода. Создание сборки для отладки разработчиком и формирование финального релиза.