-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathchapter4.html
More file actions
511 lines (503 loc) · 55.3 KB
/
Copy pathchapter4.html
File metadata and controls
511 lines (503 loc) · 55.3 KB
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
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles/chapter4.css">
<link rel="stylesheet" href="styles/content.css">
<link rel="stylesheet" href="styles/next-chapter.css">
<link rel="stylesheet" href="styles/common.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<title>Глава 4</title>
</head>
<body>
<header class="header">
<div class="design">
<h2 class="page-name"><a href="/">Гибкий веб-дизайн</a></h2>
</div>
</header>
<main class="main">
<div class="main-countainer">
<div class="chapter-name">
<span class="chapter-number">Глава 4:</span>
<span class="chapter-title">Языки</span>
</div>
<ul class="part-one">
<li class="first text"><b class="big-letter">Д</b>жон <b class="big-letter">П</b>остел был одним из
инженеров, работавших на <abbr class="small-caps">ARPANET</abbr>, предшественнике Интернета.
Он хотел быть уверенным, что пакеты, или «датаграммы», курсирующие по сети, передаются наиболее
эффективным образом. Он осознал, что либеральное отношение к ошибкам было ключом для эффективной
коммутации пакетов.
</li>
<figure>
<picture>
<source media="all and (min-width: 75em)" srcset="img/large/jon-postel.jpg">
<source media="all and (min-width: 50em)"
srcset="img/medium/jon-postel.jpg, img/large/jon-postel.jpg 1.5x">
<img src="img/small/jon-postel.jpg"
alt="Jon Postel standing by a hand‐drawn diagram of the early internet."
srcset="img/medium/jon-postel.jpg 2x, img/large/jon-postel.jpg 3x">
</picture>
<figcaption>
Джон Постел. <small>Фотография Ирен Фертик, USC News Service.</small><small>Копирайт 1994, <abbr
class="small-caps">USC</abbr></small>
</figcaption>
</figure>
<li class="text">Если узел сети получает датаграмму с ошибками, но по-прежнему может ее распознать, то
такой пакет все равно должен быть обработан.
В то же время каждый узел сети должен стараться отправлять правильно сформированные пакеты. Эта
логика была закреплена в Принципе надежности, также известном как Закон Постела:
</li>
<blockquote class="italic">
<p>Будьте консервативны в том, что вы отправляете; будьте либеральны в том, что принимаете.</p>
</blockquote>
<li class="text">Если это звучит знакомо, то потому, что именно так браузеры поступают с <abbr
class="small-caps">HTML</abbr> и <abbr class="small-caps">CSS</abbr>.
Даже если <abbr class="small-caps">HTML</abbr> и <abbr class="small-caps">CSS</abbr>, содержат
ошибки, браузер все равно будет пытаться обработать информацию, игнорируя любые куски, которые он не
может разобрать.
</li>
</ul>
<ul class="part-two">
<h2 class="sub-title">Декларация</h2>
<li class="text"><abbr class="small-caps">HTML</abbr> и <abbr class="small-caps">CSS</abbr> являются
примерами декларативных языков.
Автор, пишущий на декларативном языке, описывает желаемый результат, не давая пошаговой инструкции
обрабатывающему файл компьютеру.
С помощью <abbr class="small-caps">HTML</abbr>, можно описать суть содержимого страницы — параграфы,
заголовки, поля форм и тд. — без необходимости объяснять браузеру, что с ними делать.
С помощью <abbr class="small-caps">CSS</abbr>, вы можете описать желаемый внешний вид страницы —
цвета, размеры и тд. — без необходимости писать программу для применения этих стилей.
</li>
<li class="text">Большинство языков программирования являются императивными, а не декларативными. Perl,
Java, C++ — все это примеры императивных языков.
Если вы пишете на одном из них, то должны дать компьютеру точные инструкции для интерпретации кода.
</li>
<li class="text">Императивные языки дают вам больше возможностей и четкости, чем декларативные. Но у
этого есть своя цена. Как правило, они сложнее в изучении.
И к ним сложнее применить Закон Постела. Если вы сделаете хоть одну ошибку — пропустите запятую или
точку с запятой — вся программа может полететь.
Неправильно написанный <abbr class="small-caps">HTML</abbr>-тег или пропущенная фигурная скобка в
<abbr class="small-caps">CSS</abbr> тоже могут вызвать головную боль, но императивные программы
должны быть целиком безупречны, иначе они не смогут выполняться.
</li>
<li class="text">Императивные языки, такие как <abbr class="small-caps">PHP</abbr>, Ruby, и Python можно
найти на серверах, обслуживающих интернет.
Они управляют базами данных, обрабатывают инпуты из веб-форм и обеспечивают работу комплексных
алгоритмов. Для написания серверного кода подойдет абсолютно любой язык программирования.
В отличие от ситуации неизвестности с браузером пользователя, серверные возможности легко
контролировать.
</li>
<li class="text">Если вы хотите писать императивный код, который бы работал в веб-браузере, то есть
только один вариант: JavaScript.</li>
</ul>
<ul class="part-three">
<h2 class="sub-title">Скрипты</h2>
<li class="text">Идея выполнять программу изнутри веб-страницы стара как и сам веб. Вот один из ранних
имейлов из форума, посвященного <abbr class="small-caps">WWW:</abbr></li>
<blockquote class="italic">
<p>Я бы хотел узнать, расширял ли кто-нибудь веб настолько, чтобы было возможно запускать
произвольные программы по нажатию кнопки в браузере</p>
</blockquote>
<li class="text">Создатель Всемирной паутины Тим Бернерс-Ли ответил так:</li>
<blockquote class="italic">
<p>Отличный вопрос. Вся проблема в языке программирования. Нужно что-то мощное, но в то же время
распространенное. Помните, что главный аспект веба — это универсальность.
Не существует универсального интерпретируемого языка программирования.
</p>
</blockquote>
<li class="text">Это был 1992 год. Универсальный интерпретируемый язык наконец-таки появится в 1996. Он
будет написан программистом компании Netscape Бренданом Эйхом за 10 дней.</li>
<li class="text">Название языка менялось несколько раз. Сперва его назвали Mocha. Затем он был
официально запущен под именем LiveScript.
А после того, как подключился отдел маркетинга, его переименовали в JavaScript, в надежде урвать
волну славы появившегося в тот момент Java.
На деле эти языки имеют мало общего — как «кот» и «котелок».
</li>
</ul>
<ul class="part-four">
<h2 class="sub-title">Паттерны прогресса</h2>
<li class="text">JavaScript дал дизайнерам возможность вносить изменения в страницы даже после их
загрузки. Вскоре появились два главных способа применения: интерактивные кнопки и валидация форм.
</li>
<li class="text">Замена одного изображения кнопки на другое при наведении курсора может показаться не
самым разумным применением нового языка, но в 90-е не было другого способа делать ховер-эффекты.
</li>
<li class="text">До прихода JavaScript форму нужно было отправлять на сервер перед тем, как убедиться,
что все обязательные поля заполнены или, что введенная информация соответствует ожидаемому формату.
</li>
<li class="text">Оба юзкейса все еще существуют, но сейчас нет необходимости в JavaScript. Ховер-эффект
можно создать, используя псевдо-класс :hover в <abbr class="small-caps">CSS</abbr>. А подтверждать
данные формы можно с помощью атрибутов
<abbr class="small-caps">REQUIRED</abbr> и <abbr class="small-caps">TYPE</abbr> в
<abbr class="small-caps">HTML</abbr>.
</li>
<li class="text">Этот паттерн повторяется снова и снова: решение создается с помощью императивного языка
и, если оно пользуется спросом, со временем мигрирует в декларативный.
С этого момента вариант решения, написанный с помощью декларативного языка, становится не только
более простым, но и более надежным.
</li>
<li class="text">Либеральное отношение к ошибкам в <abbr class="small-caps">HTML</abbr> и <abbr
class="small-caps">CSS</abbr> подразумевает, что оплошности разработки и ограничения поддержки
браузера будут изящно обходиться — браузер проигнорирует все непонятное без сбоев.
Как правило, этого бывает достаточно. В то же время, если предоставить браузеру содержащий ошибки
JavaScript или попытаться использовать неподдерживаемый синтаксис, программа не только выдаст
ошибку, но и перестанет считывать скрипт с этого момента, отказываясь двигаться дальше.
</li>
</ul>
<ul class="part-five">
<h2 class="sub-title">Ответственность</h2>
<li class="text">JavaScript дал дизайнерам возможность создавать более стильные, шустрые и интерактивные
сайты. Но и он же дал возможность делать сайты более тормозные, тяжеловесные и сложные в
использовании.</li>
<li class="text">Один из первых примеров злоупотребления JavaScript продемонстрировала рекламная
индустрия (что неудивительно), бизнес, чей смысл существования довольно часто идет наперекор желанию
людей достичь цели как можно скорее.
JavaScript дал возможность открывать новые окна браузера без разрешения пользователя. Молодому
разработчику Итану Цукерману пришла идея использовать их для рекламы. Это позволило компаниям
размещать свою рекламу поверх открытых пользователями веб-сайтов.
Более того, JavaScript позволял открывать сразу несколько новых окон: одни были видны сразу, а
остальные были спрятаны за открытым ранее окном. Бесчеловечная идея!
</li>
<li class="text">Спустя 20 лет Цукерман признается:</li>
<blockquote class="italic">
<p>Это я написал код для рекламы в новом окне. Каюсь</p>
</blockquote>
<li class="text">Попапы и попандеры стали до такой степени невыносимыми, что браузерам пришлось дать
пользователям возможность их блокировать.</li>
<li class="text">Позже рекламная индустрия нашла другой способ злоупотребления JavaScript. Существующие
за счет рекламы онлайн-издания внедряли громоздкий и неэффективный JavaScript на свои страницы,
замедляя тем самым скорость загрузки.
Также JavaScript использовался для отслеживания перемещений между сайтами. Как следствие,
пользователи начали массово устанавливать адблоки. Со временем они были встроены в браузеры и
операционные системы, чтобы помочь нам дать отпор навязчивому JavaScript.
</li>
<li class="text">Веб-дизайнерам был преподан урок, который проигнорировала рекламная индустрия: в вебе
последнее слово всегда остается за пользователем.</li>
</ul>
<ul class="part-six">
<h2 class="sub-title">2.0</h2>
<li class="text">В 2005 году взлет JavaScript спровоцировала статья Джеймса Гэрретта <b
class="italic">Ajax: новый подход к веб-приложениям</b> Статья дала имя набиравшей популярность
технологии.
С помощью определенных ухищрений JavaScript позволял избежать перезагрузки всей страницы при
отправке и получении браузером данных от сервера. Сайты, использующие такой прием, подняли планку
пользовательского опыта на новую высоту.
</li>
<li class="text">Термин Ajax был введен в то же самое время, когда набирал популярность еще один
неологизм. Тим О’Райли использовал выражение «Веб <abbr class="small-caps">2.0</abbr>» для описания
волны новых веб-продуктов и веб-сервисов.
В отличие от Ajax, «Веб <abbr class="small-caps">2.0</abbr>» не поддавался точному определению. Для
бизнеса «Веб <abbr class="small-caps">2.0</abbr>» означал новые бизнес-модели. Для дизайнеров —
закругленные углы и градиенты. Для разработчиков — JavaScript и Ajax.
</li>
<li class="text">Что бы это ни значило на самом деле, термин «Веб <abbr class="small-caps">2.0</abbr>»
запечатлел настроение и ощущение момента. «Теперь все будет иначе» говорил он.
Прежние подходы к веб-строительству отправлялись в отставку. Веб больше не воспринимался как
бесконечная подшивка перелинкованных документов. Наступала эпоха веб-приложений.
</li>
</ul>
<ul class="part-seven">
<h2 class="sub-title">Эйфория</h2>
<li class="text">В судебном деле «Джейкобеллис против Огайо» 1964 года судья Поттер Стюарт дал следующее
определение непристойности:</li>
<blockquote class="italic">
<p>Я это понимаю, когда я это вижу.</p>
</blockquote>
<li>То же самое можно сказать про «Веб <abbr class="small-caps">2.0</abbr>» или про термин
«веб-приложение». Мы все можем привести примеры веб-приложений, но дать определение гораздо сложнее.
Они позволяют создавать, редактировать и удалять контент. Но подобные задачи были распространены
задолго до веб-приложений. Люди могли заполнять формы и отправлять их для обработки веб-сервером.
Ajax позволил обойтись без ненужного челночного бега до сервера.
</li>
<li class="text">Возможно определение веб-приложения требует такой круговой аргументации:</li>
<ul class="dotted">
<li class="text">JavaScript необходим для веб-приложения</li>
<li class="text">а веб-приложение является веб-сайтом, которому для работы необходим JavaScript.
</li>
</ul>
<li class="text">Получается, создание веб-приложений зиждется на фундаментальном допущении: JavaScript
должен быть доступен и должен быть надежен. Но ввиду своей императивной природы, он более капризен,
чем <abbr class="small-caps">HTML</abbr>.
и другие декларативные языки. Полностью полагаться на JavaScript довольно рискованно.
</li>
</ul>
<ul class="part-eight">
<h2 class="sub-title">Непрощенные</h2>
<li class="text">Снисходительное отношение к ошибкам позволило <abbr class="small-caps">HTML</abbr> со
временем стать еще мощнее. Это же обстоятельство делало <abbr class="small-caps">HTML</abbr> простым
в освоении.
Даже если вы допускали ошибку, браузер, согласно Закону Постела, все равно гарантировал вам
результат. Как ни странно, была и попытка лишить <abbr class="small-caps">HTML</abbr> его
суперспособности.
</li>
<li class="text">После стандартизации четвертой версии <abbr class="small-caps">HTML</abbr> в 1999 году
Консорциум Всемирной паутины <abbr class="small-caps">W3C</abbr> выпустил <abbr
class="small-caps">XHTML 1.0</abbr>. Это был <abbr class="small-caps">HTML</abbr>,
переформулированный в соответствии с требованиями формата данных <abbr
class="small-caps">XML</abbr>.
В то время как <abbr class="small-caps">HTML</abbr> позволяет писать теги и атрибуты
заглавными и строчными символами, <abbr class="small-caps">XTML</abbr> требует использовать только
строчные. Были и другие различия: все атрибуты должны быть в кавычках, а все самостоятельные
элементы типа <abbr class="small-caps">IMG</abbr> или <abbr class="small-caps">BR</abbr> должны
иметь закрывающий слеш.
</li>
<li class="text"><abbr class="small-caps">XHTML 1.0</abbr> не добавил языку новых возможностей. Это был
просто более строгий способ написания разметки. <abbr class="small-caps">XHTML 2.0</abbr> же
предлагал совершенно иное. Он не только исключал устоявшиеся элементы типа <abbr
class="small-caps">IMG</abbr>, но и внедрял драконовскую модель обработки ошибок <abbr
class="small-caps">XML</abbr>.
Если в <abbr class="small-caps">XML</abbr>-документе присутствует ошибка — атрибут не заключен в
кавычки или пропущен закрывающий слеш — парсер немедленно прекращает работу и отказывается
отображать что-либо.
</li>
<li class="text"><abbr class="small-caps">XHTML 2.0</abbr> погиб на корню. Его теоретическая чистота
была всецело отвергнута людьми, зарабатывавшими созданием веб-сайтов.
Дизайнеры вполне обоснованно отказывались публиковаться в формате, который полностью выйдет из
строя, вместо того, чтобы попытаться обойти ошибку.
</li>
<li class="text">Странно, что годами позже, веб-дизайнеры начали запросто создавать целые сайты с
помощью JavaScript, языка, разделявшего не прощающую ошибок модель <abbr
class="small-caps">XML</abbr>. Они даже не называли их веб-сайтами. Они называли их
веб-приложениями.
Это разграничение было слабым утешением для тех, кто не смог воспользоваться сайтом из-за того, что
он был полностью завязан на JavaScript.
</li>
<li class="text">Несмотря на хрупкую модель обработки ошибок в JavaScript, веб-дизайнеры со временем
стали доверять ему все больше. В 2015 году <abbr class="small-caps">NASA</abbr> перезапустили свой
веб-сайт в формате веб-приложения. Если вы хотели ознакомиться с последними достижениями агентства в
области освоения космоса,
сначала вам приходилось смотреть на черную страницу в ожидании, пока загрузятся и выполнятся 3
мегабайта JavaScript-кода. Этот контент — изображения и текст — мог быть представлен и с помощью
<abbr class="small-caps">HTML</abbr>, но разработчики решили использовать Ajax для запроса данных.
Возможно это было сделано специально для демонстрации бескрайней пустоты и одиночества космоса.
</li>
<figure>
<picture>
<source media="all and (min-width: 75em)" srcset="img/large/nasa.png">
<source media="all and (min-width: 50em)"
srcset="img/medium/nasa.png, img/large/nasa.png 1.5x">
<img src="img/small/nasa.png" alt="A web browser showing a black screen."
srcset="img/medium/nasa.png 2x, img/large/nasa.png 3x">
</picture>
<figcaption>Версия вебсайта nasa.gov 2015 года с неподгруженным JavaScript</figcaption>
</figure>
<li class="text">Это подчеркивает еще одно различие между <abbr class="small-caps">HTML</abbr> и
JavaScript. Если <abbr class="small-caps">HTML</abbr> может начать отображаться по мере подгрузки,
то JavaScript должен быть загружен полностью, перед тем как быть выполненным.
Может показаться, что лишь у малой доли посетителей сайта отключен JavaScript, но по факту он
«отключен» у всех, пока не загрузится …если загрузится вообще. Нестабильность соединений,
вмешательства провайдеров и непредсказуемость программ-блокировщиков только повышают вероятность
недоступности JavaScript.
</li>
<li class="text">Проблема не в том, что пользователи умышленно блокируют JavaScript у себя в браузере.
Хотя данный юзкейс и не стоит списывать со счетов, это не самая распространенная причина сбоев
JavaScript.
Стюарт Лэнгридж собрал в один список все возможные причины под заголовком <b class="italic">«У всех
есть JavaScript, так ведь?»</b>
</li>
<blockquote class="italic">
<p>Пользователь запрашивает ваше веб-приложение. Страница уже загрузилась? <abbr
class="small-caps">HTTP</abbr>-запрос для JavaScript отправлен? <abbr
class="small-caps">HTTP</abbr>-запрос для JavaScript завершен? Их корпоративный файрвол не
блокирует JavaScript?
Их провайдер или мобильный оператор не мешают загрузке JavaScript? Они не отключили JavaScript?
У них нет установленных расширений и плагинов, внедряющих свои скрипты или изменяющих <abbr
class="small-caps">DOM</abbr> непредвиденным для вас образом? Не упала ли сеть доставки
контента <abbr class="small-caps">(CDN)</abbr>?
Поддерживает ли их браузер написанный вами JavaScript?
</p>
</blockquote>
<li class="text">Такие же проблемы могут возникнуть с файлами <abbr class="small-caps">HTML</abbr> и
<abbr class="small-caps">CSS</abbr>. Но благодаря Закону Постела они с легкостью обходятся.</li>
<li class="text">Это не значит, что веб-дизайнеры не должны использовать JavaScript. Но это значит, что
они не должны полагаться на него, когда есть более простые решения.</li>
</ul>
<ul class="part-nine">
<h2 class="sub-title">Платформа</h2>
<li class="text">Дизайнеры, проигнорировавшие месседж Джона Элсоппа в «Дао веб-дизайна», допустили
ошибку, отнесясь к вебу как к печати.
История печати предлагает богатое наследие — иерархия, типографика, теория цвета — но веб
принципиально иное медиа. История развития программного обеспечения также скопила ценный багаж —
архитектура, тестирование, процессы — но опять же, веб остается отдельной стихией.
</li>
<li class="text">Велик соблазн применить знания и наработки из других сфер к вебу. Но с точки зрения
структуры, более честно будет раскрыть его собственные сильные и слабые стороны.
</li>
<li class="text">Используемый нами язык может подспудно влиять на наш образ мыслей. В своей книге <b
class="italic">«Метафоры, по которым мы живем»</b> Джордж Лакофф обращает внимание на угрозу
политического языка.
Одни из очевидных примеров — это «дружественный огонь» и «побочный ущерб», но, пожалуй, самым
коварным стало «налоговое послабление» — еще до того, как начались дебаты, налогооблажение было
обозначено как что-то, чему нужно послабление.
</li>
<li class="text">На первый взгляд понятие «веб-платформа» вполне безобидно. Описание веба как платформы
приравнивает его к любой другой программной среде. Flash был платформой. Android — это платформа.
i<abbr class="small-caps">OS</abbr> — тоже платформа. Но веб — не платформа. Вся суть веба в
кросс-платформенности.</li>
<li class="text">Платформа предоставляет контролируемую рабочую среду для программного обеспечения. Пока
у пользователя есть эта рабочая среда, вы можете быть уверены, что он увидит именно то, что вы
создали. Если вы разработали приложение для i<abbr class="small-caps">OS</abbr> и кто-то использует
i<abbr class="small-caps">OS</abbr>-устройство, будьте уверены, что он получит 100% вашего продукта.
Но если вы разработали приложение для i<abbr class="small-caps">OS</abbr>, а кто-то использует
устройство с Android, он получит 0%. Вы не можете установить i<abbr class="small-caps">OS</abbr> на
Android-устройство. Тут уж либо все, либо ничего.
</li>
<li class="text">В этом отношении веб не такой бинарный. Если вы создали что-то, используя определенные
веб-технологии, вы не можете знать, какая часть этих технологий будет поддерживаться тем браузером,
на котором откроют ваш сайт. Скорее всего, это не будет 100%.
Но точно и не 0%. Кто-то зайдет с i<abbr class="small-caps">OS</abbr>. Кто-то с Android. Кто-то
увидит 80% или 90% от задуманного вами. Другие лишь 20%, 30%, или 50%. Веб — не платформа. Это
континуум.
</li>
<li class="text">Считать веб платформой — ошибка категоризации. Такие платформы как Flash, i<abbr
class="small-caps">OS</abbr> и Android обеспечивают надежность и уверенность, но в рамках четко
определенных условий — ваша программа должна запускаться на совместимом с платформой устройстве.
Веб не дает никаких гарантий, но вместе с тем и не ограничивает круг потенциальных устройств.
</li>
<li class="text">Платформы поддаются контролю и предсказуемы. Всемирная паутина хаотична и
непредсказуема.</li>
<li class="text">Веб — настоящий бедлам.</li>
</ul>
<h2 class="sub-title">Ссылки:</h2>
<ul class="last-part">
<li class="references">
<a target="blank" href="https://tools.ietf.org/html/rfc761#section-2.10">
<p class="links">RFC 761:<span class="italic">Transmission Control Protocol</span></p>
</a>
<p class="names">Джон Постел</p>
</li>
<li class="references">
<a target="blank" href="https://lists.w3.org/Archives/Public/www-talk/1992MayJun/0006.html">
<p class="links italic">«Программные ссылки в WWW»</p>
</a>
<p class="names">Тим Бернерс-Ли</p>
</li>
<li class="references">
<a target="blank"
href="http://www.theatlantic.com/technology/archive/2014/08/advertising-is-the-internets-original-sin/376041/">
<p class="links italic"> «Первородный грех Интернета»</p>
</a>
<p class="names">Итан Цукерман</p>
</li>
<li class="references">
<a target="blank"
href="https://web.archive.org/web/20150910072359/http://adaptivepath.org/ideas/ajax-new-approach-web-applications/">
<p class="links italic">«Ajax: новый подход к веб-приложениям»</p>
</a>
<p class="names">Джесси Джеймс Гарретт</p>
</li>
<li class="references">
<a target="blank" href="https://kryogenix.org/code/browser/everyonehasjs.html">
<p class="links italic">«У всех есть JavaScript, так ведь?»</p>
</a>
<p class="names">Стюарт Лэнгридж</p>
</li>
</ul>
</div>
</main>
<a class="next-chapter inactive">
<div class="line"><span class="chapter-no">Глава 5:</span>Слои</div>
</a>
<nav class="content-nav">
<ol>
<li>
<a class="content-link" href="introduction">
<p class="content-p-left">Введение</p>
</a>
</li>
<li>
<a class="content-link" href="chapter1">
<p class="content-p">
<span class="chapter">Глава 1</span>Основы
</p>
</a>
</li>
<li>
<a class="content-link" href="chapter2">
<p class="content-p">
<span class="chapter">Глава 2</span>Материалы
</p>
</a>
</li>
<li>
<a class="content-link" href="chapter3">
<p class="content-p">
<span class="chapter">Глава 3</span>Видения
</p>
</a>
</li>
<li>
<a class="content-link" href="chapter4">
<p class="content-p">
<span class="chapter">Глава 4</span>Языки
</p>
</a>
</li>
<li>
<div class="content-link inactive">
<p class="content-p">
<span class="chapter">Глава 5 (Ждёт перевода)</span>Слои
</p>
</div>
</li>
<li>
<div class="content-link inactive">
<p class="content-p">
<span class="chapter">Глава 6 (Ждёт перевода)</span>Этапы
</p>
</div>
</li>
<li>
<div class="content-link inactive">
<p class="content-p">
<span class="chapter">Глава 7 (Ждёт перевода)</span>Сложности
</p>
</div>
</li>
<!-- <li>
<div class="content-link inactive">
<p class="content-p-left author">Об авторе (Ждёт перевода)
</p>
</div>
</li>
<li>
<div class="content-link inactive">
<p class="content-p-left">Указатель (Выйдет в ноябре)</p>
</div>
</li> -->
</ol>
</nav>
<footer class="footer">
<div class="footer-container">
<p class="producer"><b class="italic">Гибкий веб-дизайн</b> написана и издана <a href="https://adactio.com"
rel="me"><span class="red">Джереми Китом</span></a>.
</p>
<p class="license">Лицензировано с использованием <a rel="license"
href="https://creativecommons.org/licenses/by-sa/4.0/"><span class="red">Международной лицензии
Creative Commons Attribution‐ShareAlike 4.0.</span></a>
</p>
<p class="license">Перевод книги на русский язык:<span class="red">
Дмитрий Коновалов.
</span></a>
<p class="license">Русская версия сайта создана <a target="blank" href="https://moscoding.ru/"><span
class="red">Moscow Coding School</span></a> при участии: <span class="red">
Виктора Хардзюка, Арслана Жазыкпаева, Кристины Асирян, Анастасии Агарковой, Ивана Волошина,
Елизаветы Чуйко, Елены Алексеевой.
</span></a>
</p>
<a class="footer-logo" target="blank" href="https://moscoding.ru/">
<svg width="282" height="27" fill="none" class="styles-module--logo--1x0tv">
<path
d="M8.785 6.636h1.7v15h-1.52v-11.09l-2.417 7.09h-1.61l-2.417-7.09v11.181H1v-15h1.7l3.132 9.091 2.953-9.182zM23.103 17.546c0 3.272-2.237 4.363-4.295 4.363-2.059 0-4.296-1.09-4.296-4.363v-2.91c0-3.272 2.237-4.363 4.296-4.363 2.058 0 4.295 1.09 4.295 4.363v2.91zm-1.61-2.91c0-1.818-1.254-2.727-2.685-2.727-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.431 0 2.684-.91 2.684-2.728v-3zM34.2 13.818c-.18-1.272-1.075-2-2.417-2-1.163 0-2.058.636-2.058 1.636 0 .91.626 1.364 1.521 1.546l2.058.546c1.611.363 2.774 1.272 2.774 3.272 0 2.182-1.61 3.091-3.848 3.091-2.237 0-4.205-1.09-4.384-3.727h1.61c.18 1.545 1.253 2.182 2.774 2.182 1.522 0 2.238-.637 2.238-1.546 0-.727-.358-1.364-1.522-1.636l-2.147-.546c-1.164-.272-2.685-1.09-2.685-3.09 0-2 1.7-3.182 3.669-3.182 2.237 0 3.848 1.09 4.027 3.545H34.2v-.09zM49.412 14.09H47.8c-.18-1.454-1.342-2.272-2.595-2.272-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.253 0 2.416-.727 2.595-2.273h1.61c-.268 2.818-2.326 3.818-4.205 3.818-2.058 0-4.296-1.09-4.296-4.363v-2.91c0-3.272 2.238-4.363 4.296-4.363 1.879.09 3.937 1.09 4.206 3.909zM62.566 17.546c0 3.272-2.237 4.363-4.295 4.363-2.059 0-4.296-1.09-4.296-4.363v-2.91c0-3.272 2.237-4.363 4.296-4.363 2.058 0 4.295 1.09 4.295 4.363v2.91zm-1.61-2.91c0-1.818-1.254-2.727-2.685-2.727-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.431 0 2.684-.91 2.684-2.728v-3zM74.02 18.636l1.163-8h1.522l-1.79 11.091h-1.432l-2.237-7.273-2.237 7.273h-1.432l-1.79-11.09h1.522l1.163 8 1.88-6.273h1.52l2.148 6.272zM103.819 11.09h-1.611c-.179-2-1.432-3-3.132-3-1.79 0-3.132 1.183-3.132 3.456v5.272c0 2.273 1.432 3.455 3.132 3.455 1.611 0 2.953-1 3.132-3h1.611c-.179 2.909-2.058 4.636-4.743 4.636-2.863 0-4.743-1.909-4.743-5.09v-5.273c0-3.182 1.969-5.091 4.743-5.091 2.685 0 4.564 1.727 4.743 4.636zM116.615 17.546c0 3.272-2.237 4.363-4.295 4.363s-4.295-1.09-4.295-4.363v-2.91c0-3.272 2.237-4.363 4.295-4.363s4.295 1.09 4.295 4.363v2.91zm-1.611-2.91c0-1.818-1.252-2.727-2.684-2.727-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.432 0 2.684-.91 2.684-2.728v-3zM121.268 17.546v-2.91c0-3.272 2.238-4.363 4.296-4.363.984 0 2.147.454 2.684 1.363v-5h1.611v15h-1.611v-1.09c-.537.909-1.7 1.363-2.684 1.363-2.058 0-4.296-1.09-4.296-4.363zm1.611 0c0 1.818 1.253 2.727 2.685 2.727 1.432 0 2.684-.91 2.684-2.727v-3c0-1.819-1.252-2.728-2.684-2.728-1.432 0-2.685.91-2.685 2.727v3zM135.228 10.636h4.385v9.546h3.848v1.545h-9.217v-1.545h3.848v-8h-2.774v-1.546h-.09zm2.237-4h2.327V9h-2.327V6.636zM156.257 14.636v7h-1.61v-7.09c0-1.819-1.253-2.728-2.685-2.728-1.432 0-2.685.91-2.685 2.727v7.091h-1.61v-11.09h1.61v1.09c.537-.909 1.701-1.363 2.685-1.363 2.058 0 4.295 1.09 4.295 4.363zM167.98 21.546V20.09c-.537.909-1.7 1.363-2.685 1.363-2.058 0-4.295-1.09-4.295-4.363v-2.455c0-3.272 2.237-4.363 4.295-4.363.985 0 2.148.454 2.685 1.363v-1.09h1.611v10.909c0 3.272-2.238 4.363-4.296 4.363-1.879 0-4.027-.909-4.206-3.818h1.611c.179 1.455 1.343 2.273 2.595 2.273 1.343 0 2.685-.91 2.685-2.727zm-5.369-4.364c0 1.818 1.253 2.727 2.684 2.727 1.432 0 2.685-.909 2.685-2.727v-2.546c0-1.818-1.253-2.727-2.685-2.727-1.431 0-2.684.91-2.684 2.727v2.546zM187.04 17.273h1.7c.269 1.909 1.522 3 3.132 3 1.701 0 2.864-.818 2.864-2.364 0-1.363-.716-2.182-2.416-2.636l-1.879-.546c-2.237-.636-3.132-2.454-3.132-4.273 0-2.545 1.968-4 4.385-4 2.595 0 4.116 1.455 4.474 4h-1.7c-.358-1.454-1.164-2.363-2.774-2.363-1.79 0-2.685 1.09-2.685 2.364 0 1.363.716 2.272 2.237 2.636l1.7.455c2.058.636 3.401 1.909 3.401 4.272 0 2.364-1.521 4-4.475 4-2.774.091-4.653-1.727-4.832-4.545zM209.233 14.09h-1.611c-.179-1.454-1.342-2.272-2.595-2.272-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.253 0 2.416-.727 2.595-2.273h1.611c-.269 2.818-2.327 3.818-4.206 3.818-2.058 0-4.295-1.09-4.295-4.363v-2.91c0-3.272 2.237-4.363 4.295-4.363 1.879.09 4.027 1.09 4.206 3.909zM222.655 14.636v7h-1.61v-7.09c0-1.819-1.253-2.728-2.685-2.728-1.432 0-2.684.91-2.684 2.727v7.091h-1.611v-15h1.611v5c.537-.909 1.7-1.363 2.684-1.363 2.058 0 4.295 1.09 4.295 4.363zM235.989 17.546c0 3.272-2.237 4.363-4.295 4.363-2.059 0-4.296-1.09-4.296-4.363v-2.91c0-3.272 2.237-4.363 4.296-4.363 2.058 0 4.295 1.09 4.295 4.363v2.91zm-1.611-2.91c0-1.818-1.253-2.727-2.684-2.727-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.431 0 2.684-.91 2.684-2.728v-3zM249.322 17.546c0 3.272-2.237 4.363-4.295 4.363s-4.295-1.09-4.295-4.363v-2.91c0-3.272 2.237-4.363 4.295-4.363s4.295 1.09 4.295 4.363v2.91zm-1.611-2.91c0-1.818-1.252-2.727-2.684-2.727-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.432 0 2.684-.91 2.684-2.728v-3zM254.87 6.636h4.385v13.455h3.848v1.545h-9.217v-1.545h3.848V8.18h-2.774V6.637h-.09zM281 1h-13.512v25H281V1z"
fill="#fff"></path>
<path
d="M8.785 6.636h1.7v15h-1.52v-11.09l-2.417 7.09h-1.61l-2.417-7.09v11.181H1v-15h1.7l3.132 9.091 2.953-9.182zM23.103 17.546c0 3.272-2.237 4.363-4.295 4.363-2.059 0-4.296-1.09-4.296-4.363v-2.91c0-3.272 2.237-4.363 4.296-4.363 2.058 0 4.295 1.09 4.295 4.363v2.91zm-1.61-2.91c0-1.818-1.254-2.727-2.685-2.727-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.431 0 2.684-.91 2.684-2.728v-3zM34.2 13.818c-.18-1.272-1.075-2-2.417-2-1.163 0-2.058.636-2.058 1.636 0 .91.626 1.364 1.521 1.546l2.058.546c1.611.363 2.774 1.272 2.774 3.272 0 2.182-1.61 3.091-3.848 3.091-2.237 0-4.205-1.09-4.384-3.727h1.61c.18 1.545 1.253 2.182 2.774 2.182 1.522 0 2.238-.637 2.238-1.546 0-.727-.358-1.364-1.522-1.636l-2.147-.546c-1.164-.272-2.685-1.09-2.685-3.09 0-2 1.7-3.182 3.669-3.182 2.237 0 3.848 1.09 4.027 3.545H34.2v-.09zM49.412 14.09H47.8c-.18-1.454-1.342-2.272-2.595-2.272-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.253 0 2.416-.727 2.595-2.273h1.61c-.268 2.818-2.326 3.818-4.205 3.818-2.058 0-4.296-1.09-4.296-4.363v-2.91c0-3.272 2.238-4.363 4.296-4.363 1.879.09 3.937 1.09 4.206 3.909zM62.566 17.546c0 3.272-2.237 4.363-4.295 4.363-2.059 0-4.296-1.09-4.296-4.363v-2.91c0-3.272 2.237-4.363 4.296-4.363 2.058 0 4.295 1.09 4.295 4.363v2.91zm-1.61-2.91c0-1.818-1.254-2.727-2.685-2.727-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.431 0 2.684-.91 2.684-2.728v-3zM74.02 18.636l1.163-8h1.522l-1.79 11.091h-1.432l-2.237-7.273-2.237 7.273h-1.432l-1.79-11.09h1.522l1.163 8 1.88-6.273h1.52l2.148 6.272zM103.819 11.09h-1.611c-.179-2-1.432-3-3.132-3-1.79 0-3.132 1.183-3.132 3.456v5.272c0 2.273 1.432 3.455 3.132 3.455 1.611 0 2.953-1 3.132-3h1.611c-.179 2.909-2.058 4.636-4.743 4.636-2.863 0-4.743-1.909-4.743-5.09v-5.273c0-3.182 1.969-5.091 4.743-5.091 2.685 0 4.564 1.727 4.743 4.636zM116.615 17.546c0 3.272-2.237 4.363-4.295 4.363s-4.295-1.09-4.295-4.363v-2.91c0-3.272 2.237-4.363 4.295-4.363s4.295 1.09 4.295 4.363v2.91zm-1.611-2.91c0-1.818-1.252-2.727-2.684-2.727-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.432 0 2.684-.91 2.684-2.728v-3zM121.268 17.546v-2.91c0-3.272 2.238-4.363 4.296-4.363.984 0 2.147.454 2.684 1.363v-5h1.611v15h-1.611v-1.09c-.537.909-1.7 1.363-2.684 1.363-2.058 0-4.296-1.09-4.296-4.363zm1.611 0c0 1.818 1.253 2.727 2.685 2.727 1.432 0 2.684-.91 2.684-2.727v-3c0-1.819-1.252-2.728-2.684-2.728-1.432 0-2.685.91-2.685 2.727v3zM135.228 10.636h4.385v9.546h3.848v1.545h-9.217v-1.545h3.848v-8h-2.774v-1.546h-.09zm2.237-4h2.327V9h-2.327V6.636zM156.257 14.636v7h-1.61v-7.09c0-1.819-1.253-2.728-2.685-2.728-1.432 0-2.685.91-2.685 2.727v7.091h-1.61v-11.09h1.61v1.09c.537-.909 1.701-1.363 2.685-1.363 2.058 0 4.295 1.09 4.295 4.363zM167.98 21.546V20.09c-.537.909-1.7 1.363-2.685 1.363-2.058 0-4.295-1.09-4.295-4.363v-2.455c0-3.272 2.237-4.363 4.295-4.363.985 0 2.148.454 2.685 1.363v-1.09h1.611v10.909c0 3.272-2.238 4.363-4.296 4.363-1.879 0-4.027-.909-4.206-3.818h1.611c.179 1.455 1.343 2.273 2.595 2.273 1.343 0 2.685-.91 2.685-2.727zm-5.369-4.364c0 1.818 1.253 2.727 2.684 2.727 1.432 0 2.685-.909 2.685-2.727v-2.546c0-1.818-1.253-2.727-2.685-2.727-1.431 0-2.684.91-2.684 2.727v2.546zM187.04 17.273h1.7c.269 1.909 1.522 3 3.132 3 1.701 0 2.864-.818 2.864-2.364 0-1.363-.716-2.182-2.416-2.636l-1.879-.546c-2.237-.636-3.132-2.454-3.132-4.273 0-2.545 1.968-4 4.385-4 2.595 0 4.116 1.455 4.474 4h-1.7c-.358-1.454-1.164-2.363-2.774-2.363-1.79 0-2.685 1.09-2.685 2.364 0 1.363.716 2.272 2.237 2.636l1.7.455c2.058.636 3.401 1.909 3.401 4.272 0 2.364-1.521 4-4.475 4-2.774.091-4.653-1.727-4.832-4.545zM209.233 14.09h-1.611c-.179-1.454-1.342-2.272-2.595-2.272-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.253 0 2.416-.727 2.595-2.273h1.611c-.269 2.818-2.327 3.818-4.206 3.818-2.058 0-4.295-1.09-4.295-4.363v-2.91c0-3.272 2.237-4.363 4.295-4.363 1.879.09 4.027 1.09 4.206 3.909zM222.655 14.636v7h-1.61v-7.09c0-1.819-1.253-2.728-2.685-2.728-1.432 0-2.684.91-2.684 2.727v7.091h-1.611v-15h1.611v5c.537-.909 1.7-1.363 2.684-1.363 2.058 0 4.295 1.09 4.295 4.363zM235.989 17.546c0 3.272-2.237 4.363-4.295 4.363-2.059 0-4.296-1.09-4.296-4.363v-2.91c0-3.272 2.237-4.363 4.296-4.363 2.058 0 4.295 1.09 4.295 4.363v2.91zm-1.611-2.91c0-1.818-1.253-2.727-2.684-2.727-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.431 0 2.684-.91 2.684-2.728v-3zM249.322 17.546c0 3.272-2.237 4.363-4.295 4.363s-4.295-1.09-4.295-4.363v-2.91c0-3.272 2.237-4.363 4.295-4.363s4.295 1.09 4.295 4.363v2.91zm-1.611-2.91c0-1.818-1.252-2.727-2.684-2.727-1.432 0-2.685.91-2.685 2.727v3c0 1.819 1.253 2.728 2.685 2.728 1.432 0 2.684-.91 2.684-2.728v-3zM254.87 6.636h4.385v13.455h3.848v1.545h-9.217v-1.545h3.848V8.18h-2.774V6.637h-.09zM281 1h-13.512v25H281V1z"
stroke="#fff" stroke-width="0.734" stroke-miterlimit="10"></path>
</svg>
</a>
</div>
</footer>
</body>
</html>