(c) Larry Ewing, Simon Budig, Garrett LeSage
с 1994 г.

Кафедра Информатики и Математического Обеспечения

ПетрГУ | ИМиИТ | О кафедре | Проекты | Лаборатория ИТС | Семинары НФИ/AMICT
Сотрудники | Учебный процесс | Табель-календарь | Курсовые и выпускные работы
Вычислительные ресурсы | Публикации | Архив новостей | Контактная информация

Курс посвящен созданию современных приложений на основе компонентов платформы Веб.

В первом семестре курса рассматривается архитектура данной платформы в целом, технические вопросы реализации ее основных компонентов (большое внимание уделяется работе протокола HTTP и его современному состоянию), а также существующие архитектурные принципы, инструментальные средства и каркасы приложений (фреймворки) для разработки серверной части (back-end) веб-приложений.

Вторая часть курса посвящена изучению возможностей современных веб-обозревателей для разработки веб-приложений и получение навыков программирование клиентской стороны насыщенных веб-приложений (RIA) с использованием современных стандартов HTML5 и JavaScript.

Архитектурные шаблоны веб-клиентов

2020/21 учебный год, Институт математики и информационных технологий, весенний семестр.

Специальности:

  • 01.04.02 Прикладная математика и информатика. Математическое моделирование и информационно-коммуникационные технологии (магистр, 1 год обучения)

Лектор: К. А. Кулаков

Руководители практик: К. А. Кулаков

Лекции

Задания

Выполнение заданий не требует программирования на стороне сервера, все может быть сделано в виде статических html-файлов с включением кода на JavaScript.
  1. Работа с объектной моделью документа (DOM) В среде JSFiddle: форма из поля ввода и кнопки, при подтверждении формы (нажатием на кнопку или на ввод) текст из поля ввода копируется на страницу под формой. То же с использованием библиотеки JQuery для работы с DOM. Оформить в виде отдельного html-файла (без jsfiddle) с подключением JQuery. Список задач: при подтверждении формы текст из поля ввода добавляется в список. Рядом с каждым элементом две кнопки — «пометить» (изменяет внешний вид задачи) и «удалить».
  2. Сохранение состояния в браузере Добавить в список задач сохранение состояния в LocalStorage. После повторного открытия страницы состояние (наличие и порядок задач в списке, какие отмечены) должно полностью восстановиться.
  3. Мультимедиа Аудиоплеер с возможностью добавлять локальные файлы в список воспроизведения. См. элемент <audio> и метод createObjectURL для доступа к локальным файлам, которые выбрал пользователь.
  4. Асинхронная загрузка и управление историей браузера Одностраничное приложение: панель навигации из нескольких ссылок, при нажатии на которые вся страница не перезагружается, но заменяется основная ее часть. При этом добавляется запись в историю браузера, так что переход отображается в адресной строке и работают кнопки «назад» и «вперед». См. XMLHttpRequest, history.pushState, window.onpopstate.
  5. Одноранговая сеть Продемонстрировать установку прямого сетевого соединения и обмен текстовыми сообщениями между двумя экземплярами веб-приложения, которые могут работать в различных браузерах на разных компьютерах. Обмен установочной информацией можно производить без сервера путем копирования сгенерированного приложением описания соединения в текстовое поле другого экземпляра. См. WebRTC, RTCPeerConnection, RTCDataChannel.

Ссылки