Web-программирование занимает существенную часть в мире современной разработки. Многие студенты делают Web-приложения в рамках НИР или занимаются этим на первой работе.
Web-приложения, создаваемые в рамках НИР, чаще всего нетиповые приложения. На работе студенты работают с современными технологиями веб-разработки: SPA приложениями, JS фреймворками, используют самые разные языки на серверной части.
Цели курса: изучить Web-программирование в теоретической части от базового фундамента до современных подходов, а также получить практические навыки как в традиционной, так и современной Web-разработке.
1. Практический курс с вниманием к теории.
Главное в курсе - получение практических навыков разработки. Но курс университетский и большое внимание уделяется изучению концепций, подходов и систематизации знаний.
2. Больше о клиентской части, чем о серверной.
Серверная часть веб-приложения ближе к "обычному" приложению. Студенты изучают работу с БД на курсе "БД и СУБД", сетевое взаимодействие, разработку веб-сервисов и распределённых приложений на курсе "Технологии разработки распределённых приложений". Важно научиться разрабатывать приложение для веб-браузера и понимать, как применять навыки, полученные на других курсах, в разработке серверной части веб-приложения.
3. Вёрстка - только основы.
Вёрстка - большая тема. Её сложно изучить за небольшое число занятий и требуется много практики. В то же время в университете студентам важнее быстрая разработка работающего прототипа, а не реализация уникального дизайна.
4. Изучение как традиционных, так и современных подходов, и их сравнение.
Изучение традиционных подходов важно для понимания основ, а современных - для решения актуальных практических задач. Решение одних и тех же задач разными подходами поможет лучше понять разницу между ними.
5. Изучать конкретные языки или фреймворки не так важно.
Курс не посвящён разработке сайтов на фреймворке A для языка B. У студентов разные предпочтения, они работают на разных технологических стеках как самостоятельно, так и на работе. Важно понимать основные концепции, и систематизировать знания. Тем не менее, примеры показываются на определённых (но простых) технологиях.
6. Простые задачи на минимальную оценку, сложные на максимальную.
Не всем интересна и нужна веб-разработка. Курс должен быть как можно полезнее для заинтересованных, но не становиться ночным кошмаром для тех, для кого это "просто ещё один курс, который надо сдать". Для получения проходного балла достаточно сдать простые лабораторные работы.
| Лекции | Практики |
|---|---|
| 1. Введение: о курсе, история web, основные понятия | 1. HTML (лекция + практика) |
| 2. JavaScript: основы языка | 2. CSS. Блочная модель (лекция + практика) |
| 3. JavaScript: DOM, BOM, jQuery | 3. Flex. Вёрстка (лекция + практика вёрстки) |
| 4. Введение в серверную часть: основные компоненты, формы | 4. Сдача лабораторных: 1, 2 |
| 5. Аутентификация, сессия | 5. UI фреймворки (лекция + практика с примером) |
| 6. AJAX; API | 6. Практика по традиционной серверной части |
| 7. JS-Фреймворки (c примерами на Vue.js) | 7. CMS и конструкторы сайтов (лекция + практика по AJAX) |
| 8. Современный Front-End: Node.js, инструменты разработки | 8. Сдача лабораторных: 3, 4 |
| 9. SPA | 9. Практика: Современный JS |
| 10. Доклады: Vue, Angular | 10. Практика: SPA |
| 11. Инфраструктура современного веб-приложения; Аутентификация-2 | 11. Практика: аутентификация в SPA |
| 12. Доклады: React, Go, Node.js, PHP, dotnet | 12. Сдача лабораторных: 5, 6 |
| 13. Развёртывание: On-Premise, IaaS, PaaS, SaaS, FaaS | 13. Практика: пример развёртывания; Досдача лабораторных |
| 14. Бонус: что ещё есть в веб-разработке | 14. Экзамен |
Материалы находиться в директории > materials.
Список лабораторных можно открыть в директории > labs.
| Лабораторная работа | КТ | Условие | ПМИ-1 | ПМИ-3,4 | ФИТ |
|---|---|---|---|---|---|
| 0. Входной контроль: работа с БД | 1 | html, PDF | link | same | same |
| 1. HTML, CSS: вёрстка страницы проекта по эскизу | 2 | html, PDF | link | link | link |
| 3. Традиционное Web-приложение | 4 | html, PDF | - | link | - |
| 4. AJAX | 3 | html, PDF | - | link | - |
| 5. API | 3 | html, PDF | - | link | - |
| 6. SPA | 4 | html, PDF | - | link | - |
| Альтернатива лабораторным работам 5-6 | 3-4 | html, PDF | - | - | - |
Контрольные точки собираются следующим образом:
- КТ1
10 б.= Входной контроль10 б. - КТ2
20 б.= ЛР1 (HTML, CSS)20 б.+ ЛР2 (JS)0 б. - КТ3
20 б.= ЛР4 (AJAX)10 б.+ ЛР5 (API)10 б. - КТ4
20 б.= ЛР3 (Server)10 б.+ ЛР6 (SPA)10 б. - КТ5
40 б.= (ЛР1 + ЛР2 + ЛР3 + ЛР4 + ЛР5 + ЛР6) / 320 б.+ Тест20 б.
Это открытый курс, выложенный на GitHub репозитории. Вы можете помочь сделать его лучше и внести в него вклад!
- Есть предложения по улучшению плана?
- Знаете, как сделать задания полезнее и интереснее?
- Нет идей, как сделать лучше, но знаете, что не нравится в текущем курсе?
- Нашли фактическую ошибку в материалах?
- Нашли опечатку?
- Или просто хотите высказать своё мнение?
Помогите сделать этот курс лучше для вас или будущих студентов!
Подробности в разделе > CONTRIBUTING.
Техническая информация о разработке курса (сборка презентаций, преобразование в HTML и PDF файлы) в разделе > DEVELOPMENT