-
Notifications
You must be signed in to change notification settings - Fork 10
/
README.html
358 lines (312 loc) · 16.4 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css"><style type="text/css">/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
}
.hljs-comment,
.hljs-quote {
color: #998;
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: #008080;
}
.hljs-string,
.hljs-doctag {
color: #d14;
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
color: #900;
font-weight: bold;
}
.hljs-subst {
font-weight: normal;
}
.hljs-type,
.hljs-class .hljs-title {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #000080;
font-weight: normal;
}
.hljs-regexp,
.hljs-link {
color: #009926;
}
.hljs-symbol,
.hljs-bullet {
color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
color: #0086b3;
}
.hljs-meta {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
/*# sourceURL=C:\Projects\web-development-course\node_modules\md-to-pdf\node_modules\highlight.js\styles\github.css*/</style><style type="text/css">body { max-width: 186mm; margin: 0 auto; }
.page-break { page-break-after: always; }
/* .markdown-body { font-size: 11px; } */
.markdown-body pre > code { white-space: pre-wrap; }</style></head>
<body class="markdown-body">
<h1 id="курс-web-программирование--пгниу">Курс "Web-программирование" | ПГНИУ</h1>
<h1 id="курс-обновляется-до-2021"><strong>КУРС ОБНОВЛЯЕТСЯ ДО 2021</strong></h1>
<!-- toc -->
<ul>
<li><a href="#%D0%BE-%D0%BA%D1%83%D1%80%D1%81%D0%B5">О курсе</a><ul>
<li><a href="#%D1%86%D0%B5%D0%BB%D1%8C-%D0%BA%D1%83%D1%80%D1%81%D0%B0">Цель курса</a></li>
<li><a href="#%D1%82%D0%B5%D0%B7%D0%B8%D1%81%D1%8B">Тезисы</a></li>
</ul>
</li>
<li><a href="#%D0%BF%D0%BB%D0%B0%D0%BD">План</a></li>
<li><a href="#%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D1%8B">Материалы</a></li>
<li><a href="#%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D0%B0">Практика</a><ul>
<li><a href="#%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82">Проект</a></li>
<li><a href="#%D0%BB%D0%B0%D0%B1%D0%BE%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%BD%D1%8B%D0%B5-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Лабораторные работы</a></li>
</ul>
</li>
<li><a href="#%D1%8D%D0%BA%D0%B7%D0%B0%D0%BC%D0%B5%D0%BD">Экзамен</a></li>
<li><a href="#%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4-%D0%B2-%D0%BA%D1%83%D1%80%D1%81">Вклад в курс</a></li>
<li><a href="#%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0-%D0%BA%D1%83%D1%80%D1%81%D0%B0">Разработка курса</a></li>
</ul>
<!-- tocstop -->
<h2 id="о-курсе">О курсе</h2>
<h3 id="цель-курса">Цель курса</h3>
<p>Web-программирование занимает существенную часть в мире современной разработки. Многие студенты делают Web-приложения в рамках НИР или занимаются этим на первой работе.</p>
<p>Web-приложения, создаваемые в рамках НИР, чаще всего нетиповые приложения. На работе студенты работают с современными технологиями веб-разработки: SPA приложениями, JS фреймворками, используют самые разные языки на серверной части.</p>
<p><strong>Цели курса:</strong> изучить Web-программирование в теоретической части от базового фундамента до современных подходов, а также получить практические навыки как в традиционной, так и современной Web-разработке.</p>
<h3 id="тезисы">Тезисы</h3>
<details>
<summary>1. Практический курс с вниманием к теории.</summary>
<p>Главное в курсе - получение практических навыков разработки. Но курс университетский и большое внимание уделяется изучению концепций, подходов и систематизации знаний.</p>
</details>
<details>
<summary>2. Больше о клиентской части, чем о серверной.</summary>
<p>Серверная часть веб-приложения ближе к "обычному" приложению. Студенты изучают работу с БД на курсе "БД и СУБД", сетевое взаимодействие, разработку веб-сервисов и распределённых приложений на курсе "Технологии разработки распределённых приложений". Важно научиться разрабатывать приложение для веб-браузера и понимать, как применять навыки, полученные на других курсах, в разработке серверной части веб-приложения. </p>
</details>
<details><summary>3. Вёрстка - только основы.</summary>
<p>Вёрстка - большая тема. Её сложно изучить за небольшое число занятий и требуется много практики. В то же время в университете студентам важнее быстрая разработка работающего прототипа, а не реализация уникального дизайна.</p>
</details>
<details>
<summary>4. Изучение как традиционных, так и современных подходов, и их сравнение.</summary>
<p>Изучение традиционных подходов важно для понимания основ, а современных - для решения актуальных практических задач. Решение одних и тех же задач разными подходами поможет лучше понять разницу между ними. </p>
</details>
<details>
<summary>5. Изучать конкретные языки или фреймворки не так важно.</summary>
<p>Курс не посвящён разработке сайтов на фреймворке A для языка B. У студентов разные предпочтения, они работают на разных технологических стеках как самостоятельно, так и на работе. Важно понимать основные концепции, и систематизировать знания. Тем не менее, примеры показываются на определённых (но простых) технологиях. </p>
</details>
<details>
<summary>6. Простые задачи на минимальную оценку, сложные на максимальную.</summary>
<p>Не всем интересна и нужна веб-разработка. Курс должен быть как можно полезнее для заинтересованных, но не становиться ночным кошмаром для тех, для кого это "просто ещё один курс, который надо сдать". Для получения проходного балла достаточно сдать простые лабораторные работы.</p>
</details>
<h2 id="план">План</h2>
<p><strong><a href="./Plan.md">> Подробный план</a></strong></p>
<table>
<thead>
<tr>
<th>Лекции</th>
<th>Практики</th>
</tr>
</thead>
<tbody><tr>
<td>1. Введение: о курсе, история web, основные понятия</td>
<td>1. HTML (лекция + практика)</td>
</tr>
<tr>
<td>2. JavaScript: основы языка</td>
<td>2. CSS. Блочная модель (лекция + практика)</td>
</tr>
<tr>
<td>3. JavaScript: DOM, BOM, jQuery</td>
<td>3. Flex. Вёрстка (лекция + практика вёрстки)</td>
</tr>
<tr>
<td>4. Введение в серверную часть: основные компоненты, формы</td>
<td>4. Сдача лабораторных: 1, 2</td>
</tr>
<tr>
<td>5. Аутентификация, сессия</td>
<td>5. UI фреймворки (лекция + практика с примером)</td>
</tr>
<tr>
<td>6. AJAX; API</td>
<td>6. Практика по традиционной серверной части</td>
</tr>
<tr>
<td>7. JS-Фреймворки (c примерами на Vue.js)</td>
<td>7. CMS и конструкторы сайтов (лекция + практика по AJAX)</td>
</tr>
<tr>
<td>8. Современный Front-End: Node.js, инструменты разработки</td>
<td>8. Сдача лабораторных: 3, 4</td>
</tr>
<tr>
<td>9. SPA</td>
<td>9. Практика: Современный JS</td>
</tr>
<tr>
<td>10. Доклады: Vue, Angular</td>
<td>10. Практика: SPA</td>
</tr>
<tr>
<td>11. Инфраструктура современного веб-приложения; Аутентификация-2</td>
<td>11. Практика: аутентификация в SPA</td>
</tr>
<tr>
<td>12. Доклады: React, Go, Node.js, PHP, dotnet</td>
<td>12. Сдача лабораторных: 5, 6</td>
</tr>
<tr>
<td>13. Развёртывание: On-Premise, IaaS, PaaS, SaaS, FaaS</td>
<td>13. Практика: пример развёртывания; Досдача лабораторных</td>
</tr>
<tr>
<td>14. Бонус: что ещё есть в веб-разработке</td>
<td>14. Экзамен</td>
</tr>
</tbody></table>
<h2 id="материалы">Материалы</h2>
<p>Материалы находиться в директории <strong><a href="materials">> materials</a></strong>.</p>
<h2 id="практика">Практика</h2>
<!--
Лабораторные работы реализуют часть проекта - ToDo-шки.
### Проект
Зарегистрированные пользователь может создавать задачи, имеющие заголовок и описание, просматривать их, удалять, редактировать, отменять выполненными. У каждой задачи есть своя страница.
~~Лабораторные работы реализуют части проекта - Мини-почту.~~
~~### Проект~~
~~Мини-почта - реализация простой почты.~~
~~Зарегистрированный пользователь может отправить "письмо" другому зарегистрированному пользователю по его имени. Каждый пользователь видит список всех своих сообщений: исходящих и входящих. Письмо может находиться в состоянии "прочитано" и "не прочитано". Непрочитанные письма можно удалять.~~
-->
<h3 id="лабораторные-работы">Лабораторные работы</h3>
<p>Список лабораторных можно открыть в директории <strong><a href="labs">> labs</a></strong>.</p>
<table>
<thead>
<tr>
<th>Лабораторная работа</th>
<th>КТ</th>
<th>Условие</th>
<th>ПМИ-1</th>
<th>ПМИ-3,4</th>
<th>ФИТ</th>
</tr>
</thead>
<tbody><tr>
<td>0. <strong>Входной контроль:</strong> работа с БД</td>
<td>1</td>
<td><a href="labs/0-Incoming-control/0-Incoming-control.md">html</a>, <a href="labs/0-Incoming-control/0-Incoming-control.pdf">PDF</a></td>
<td><a href="https://classroom.github.com/a/Jh5po0tZ">link</a></td>
<td>same</td>
<td>same</td>
</tr>
<tr>
<td>1. <strong>HTML, CSS:</strong> вёрстка страницы проекта по эскизу</td>
<td>2</td>
<td><a href="labs/1-HTML-CSS/1-HTML-CSS.md">html</a>, <a href="labs/1-HTML-CSS/1-HTML-CSS.pdf">PDF</a></td>
<td><a href="https://classroom.github.com/a/tA9HXI5v">link</a></td>
<td><a href="https://classroom.github.com/a/vbec8prw">link</a></td>
<td><a href="https://classroom.github.com/a/xQDrK0mg">link</a></td>
</tr>
<tr>
<td>3. <strong>Традиционное Web-приложение</strong></td>
<td>4</td>
<td><a href="labs/3-Server/3-Server.md">html</a>, <a href="labs/3-Server/3-Server.pdf">PDF</a></td>
<td>-</td>
<td><a href="https://classroom.github.com/a/eH9Gzt9m">link</a></td>
<td>-</td>
</tr>
<tr>
<td>4. <strong>AJAX</strong></td>
<td>3</td>
<td><a href="labs/4-AJAX/4-AJAX.md">html</a>, <a href="labs/4-AJAX/4-AJAX.pdf">PDF</a></td>
<td>-</td>
<td><a href="https://classroom.github.com/a/iJmJJDvu">link</a></td>
<td>-</td>
</tr>
<tr>
<td>5. <strong>API</strong></td>
<td>3</td>
<td><a href="labs/5-API/5-API.md">html</a>, <a href="labs/5-API/5-API.pdf">PDF</a></td>
<td>-</td>
<td><a href="https://classroom.github.com/a/CPhXK-v1">link</a></td>
<td>-</td>
</tr>
<tr>
<td>6. <strong>SPA</strong></td>
<td>4</td>
<td><a href="labs/6-SPA/6-SPA.md">html</a>, <a href="labs/6-SPA/6-SPA.pdf">PDF</a></td>
<td>-</td>
<td><a href="https://classroom.github.com/a/RnapdxnO">link</a></td>
<td>-</td>
</tr>
<tr>
<td>Альтернатива лабораторным работам 5-6</td>
<td>3-4</td>
<td><a href="labs/Alternative/Alternative.md">html</a>, <a href="labs/Alternative/Alternative.pdf">PDF</a></td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody></table>
<!--
## Экзамен
Информация об экзамене и вопросах к экзамену на странице **[> Экзамен](./Exam.md)**
-->
<h2 id="контрольные-точки">Контрольные точки</h2>
<p>Контрольные точки собираются следующим образом:</p>
<ul>
<li>КТ1 <code>10 б.</code> = Входной контроль <code>10 б.</code></li>
<li>КТ2 <code>20 б.</code> = ЛР1 (HTML, CSS) <code>20 б.</code> + ЛР2 (JS) <code>0 б.</code></li>
<li>КТ3 <code>20 б.</code> = ЛР4 (AJAX) <code>10 б.</code> + ЛР5 (API) <code>10 б.</code></li>
<li>КТ4 <code>20 б.</code> = ЛР3 (Server) <code>10 б.</code> + ЛР6 (SPA) <code>10 б.</code></li>
<li>КТ5 <code>40 б.</code> = (ЛР1 + ЛР2 + ЛР3 + ЛР4 + ЛР5 + ЛР6) / 3 <code>20 б.</code> + Тест <code>20 б.</code></li>
</ul>
<hr>
<h2 id="вклад-в-курс">Вклад в курс</h2>
<p>Это открытый курс, выложенный на <a href="https://github.com/movs-psu/web-development-course">GitHub репозитории</a>. Вы можете помочь сделать его лучше и внести в него вклад!</p>
<ul>
<li>Есть предложения по улучшению плана?</li>
<li>Знаете, как сделать задания полезнее и интереснее?</li>
<li>Нет идей, как сделать лучше, но знаете, что не нравится в текущем курсе? </li>
<li>Нашли фактическую ошибку в материалах?</li>
<li>Нашли опечатку?</li>
<li>Или просто хотите высказать своё мнение?</li>
</ul>
<p>Помогите сделать этот курс лучше для вас или будущих студентов!</p>
<p>Подробности в разделе <strong><a href="./CONTRIBUTING.md">> CONTRIBUTING</a></strong>.</p>
<h2 id="разработка-курса">Разработка курса</h2>
<p>Техническая информация о разработке курса (сборка презентаций, преобразование в HTML и PDF файлы) в разделе <strong><a href="./DEVELOPMENT.md">> DEVELOPMENT</a></strong></p>
</body></html>