![Page 1: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/1.jpg)
Принципы разработки гибких и поддерживаемых интерфейсов
Вася Аксёнов@outring
![Page 2: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/2.jpg)
Разработка VS. Интерфейсы
![Page 3: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/3.jpg)
3
РазработкаРеализация — абстрактные сущности
![Page 4: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/4.jpg)
4
ИнтерфейсыРеализация — визуальное представление
![Page 5: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/5.jpg)
5
В чём разница?Явность правил взаимодействия
Предопределённость сценариев взаимодействия и сущностей
![Page 6: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/6.jpg)
Гибкость и поддерживаемость
![Page 7: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/7.jpg)
7
ГибкостьВозможность создания новых частей интерфейса без необходимости внесения изменений в ранее созданные части
![Page 8: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/8.jpg)
8
ПоддерживаемостьВозможность безопасного изменения интерфейса
![Page 9: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/9.jpg)
1 SRPПринцип единственной ответственности
![Page 10: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/10.jpg)
10
Принцип единственной ответственности
Каждая сущность имеет только одну обязанность
Сущность должна иметь только одну причину измениться
![Page 11: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/11.jpg)
11
Скачать
![Page 12: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/12.jpg)
12
Кнопка.download-button {! padding: 0 20px;}
![Page 13: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/13.jpg)
13
Размеры.download-button {! width: 230px;! padding: 0 20px;}
![Page 14: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/14.jpg)
Позиционирование.download-button {! position: absolute;! left: 50%;! top: 50%;
! width: 230px;! margin-top: -65px;! margin-left: -135px;! padding: 0 20px;} 14
![Page 15: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/15.jpg)
−padding.download-button {! position: absolute;! left: 50%;! top: 50%;
! width: 230px;! margin-top: -65px;! margin-left: -135px;! padding: 0 20px;} 15
![Page 16: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/16.jpg)
16
Скачать
![Page 17: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/17.jpg)
Скачать
17
![Page 18: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/18.jpg)
МинусыНеобходимость изменения для переиспользования
Сложность понимания ответственности
Небезопасность изменений
18
![Page 19: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/19.jpg)
19
РешениеРаспределение ответственности по разным элементам
Или классам
![Page 20: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/20.jpg)
20
Скачать
![Page 21: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/21.jpg)
21
Функциональное разделение по элементам
Только одна причина изменения сущности
![Page 22: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/22.jpg)
2 Предсказуемые раскладки
![Page 23: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/23.jpg)
Системы позиционированияС высокой степенью самоорганизации
С низкой
23
![Page 24: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/24.jpg)
Низкая степень самоорганизации<div style="position: absolute;"></div><div style="position: absolute;">! <div style="position: absolute;"></div></div>
24
![Page 25: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/25.jpg)
25
![Page 26: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/26.jpg)
26
Низкая степень самоорганизации+ Стабильность − Трудоёмкость
![Page 27: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/27.jpg)
27
Высокая степень самоорганизации<div>! <div style="float: right;"></div>! <span>...</span>! <div>! ! <span>...</span>! </div></div><div>! <span>...</span><span>...</span></div>
![Page 28: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/28.jpg)
28
![Page 29: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/29.jpg)
29
Высокая степень самоорганизации+ Простота использования
+ Большие возможности
− Сложность поддержки
− Непредсказуемость
![Page 30: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/30.jpg)
Потоковая система позиционирования
![Page 31: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/31.jpg)
31
Создать Изменить Удалить Навсегда
![Page 32: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/32.jpg)
Панель<div class="panel">! <button>Создать</button>! <button>Изменить</button>
! <button>Удалить</button>! <input type="checkbox">! <label>Навсегда</label></div>
32
![Page 33: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/33.jpg)
33
Входящие ▼ Переместить
![Page 34: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/34.jpg)
34
Компонент<div class="mover">! <select>! ! <option>Входящие</option>! ! <option>Исходящие</option>! ! ...! </select>! <button>Переместить</button></div>
![Page 35: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/35.jpg)
35
Создать Изменить Удалить НавсегдаВходящие ▼ Переместить
![Page 36: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/36.jpg)
36
Интеграция<div class="panel">! ...! <button>Изменить</button>! <div class="mover">! ...! </div>! <button>Удалить</button>! ...</div>
![Page 37: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/37.jpg)
37
Создать Изменить
Удалить Навсегда
Входящие ▼ Переместить
![Page 38: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/38.jpg)
38
Субъекты контекста являются объектами того же контекста и наоборот
![Page 39: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/39.jpg)
Субъект создаёт контекст
Объект находится в контексте
39
![Page 40: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/40.jpg)
40
Создать Изменить Удалить НавсегдаВходящие ▼ Переместить
![Page 41: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/41.jpg)
41
Создать Изменить
Удалить Навсегда
Входящие ▼ Переместить
![Page 42: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/42.jpg)
42
Создать Изменить
Удалить Навсегда
Входящие ▼ Переместить
![Page 43: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/43.jpg)
РешениеРазделение субъекта и объекта контекста
43
![Page 44: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/44.jpg)
CSS3 Flexible Box Layout
![Page 45: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/45.jpg)
Включение Flexbox.panel {! display: flex;}
45
![Page 46: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/46.jpg)
46
Создать Изменить Удалить НавсегдаВходящие ▼ Переместить
![Page 47: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/47.jpg)
Направление.panel {! display: flex;! flex-direction: column; /** @default row */}
47
![Page 48: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/48.jpg)
48
Создать
Изменить
Удалить
Навсегда
Входящие ▼ Переместить
![Page 49: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/49.jpg)
49
Родитель контролирует поведение своих детей
![Page 51: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/51.jpg)
.horizontal-box > * {! float: left;}
.vertical-box > * {! display: block;! width: auto;}
51
Альтернатива
![Page 52: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/52.jpg)
Панель<div class="panel horizontal-box">! ...! <button>Изменить</button>! <div class="mover horizontal-box">! ...! </div>! <button>Удалить</button>! ...</div>
52
![Page 53: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/53.jpg)
Сетки
![Page 54: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/54.jpg)
54
CSS сетки<div class="container-12">! <div class="grid-3"></div>! <div class="grid-3"></div>! <div class="grid-3"></div>! <div class="grid-3"></div></div>
![Page 55: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/55.jpg)
55
grid-3 grid-3 grid-3 grid-3
![Page 56: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/56.jpg)
56
−модуль<div class="container-12">! <div class="grid-3"></div>! <div class="grid-3"></div>! <div class="grid-3"></div>! <div class="grid-3"></div></div>
![Page 57: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/57.jpg)
57
grid-3 grid-3 grid-3
![Page 58: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/58.jpg)
58
РешениеНезависимость модулей
![Page 59: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/59.jpg)
CSS3 Grid Layout
![Page 60: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/60.jpg)
60
news content activity
![Page 61: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/61.jpg)
HTML<div class="layout">! <div class="news"></div>! <div class="content"></div>! <div class="activity"></div></div>
61
![Page 62: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/62.jpg)
CSS.layout {! display: grid;! grid-columns: (80px)[12];}
.news {! grid-column: 1;! grid-column-span: 3;}
.content {! grid-column: 4;! grid-column-span: 6;}
.activity {! grid-column: 10;! grid-column-span: 3;}
62
![Page 63: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/63.jpg)
–news<div class="layout">! <div class="news"></div>! <div class="content"></div>! <div class="activity"></div></div>
63
![Page 64: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/64.jpg)
64
content activity
![Page 65: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/65.jpg)
65
Поддержка браузерами?
![Page 66: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/66.jpg)
<div class="g-12">! <div class="g-col-1 g-span-3 news"></div>! <div class="g-col-3 g-span-6 content"></div>! <div class="g-col-10 g-span-3 activity"></div></div>
66
Альтернатива
anygrid.net
![Page 67: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/67.jpg)
Родитель контролирует поведение своих детей
Элементы должны быть независимы друг от друга
67
![Page 68: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/68.jpg)
3 Явное наложение
![Page 69: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/69.jpg)
69
![Page 70: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/70.jpg)
70
z-index: 1
![Page 71: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/71.jpg)
71
z-index: 1
![Page 72: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/72.jpg)
72
z-index: 1
z-index: 1 z-index: 1
z-index: 1
![Page 73: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/73.jpg)
![Page 74: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/74.jpg)
Расслоение z-index по назначению
0...128...256 74
Решение?
}}контент
диалоги и попапы
![Page 75: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/75.jpg)
Контекст наложенияКорневой элемент
Спозиционированный элемент c z-index ≠ auto
Элементы с opacity < 1
75
![Page 76: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/76.jpg)
z-index локален для каждого контекста наложения
76
![Page 77: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/77.jpg)
77
z-index: 128
z-index: 1 z-index: 1
z-index: 1
![Page 78: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/78.jpg)
Явные слои и отказ от z-index
78
Решение
![Page 79: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/79.jpg)
Явные слои<body>! <div class="layer" id="background-layer"></div>! <div class="layer" id="content-layer"></div>! <div class="layer" id="overlay-layer"></div>! <div class="layer" id="dialogs-layer"></div>! <div class="layer" id="popups-layer"></div></body>
79
![Page 80: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/80.jpg)
.layer {! position: relative;! z-index: 1;}
80
Слой
![Page 81: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/81.jpg)
Минимальный наборКонтент
Диалоги
Попапы
81
![Page 82: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/82.jpg)
Явное наложение элементов слоёв
Отказ от z-index как средства функционального наложения
82
![Page 83: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/83.jpg)
4 Абстрактная реализация
![Page 84: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/84.jpg)
Абстракция
84
Абстракция определяет семантику сущности и позволяет работать с ней без знания деталей реализации
![Page 85: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/85.jpg)
Олдскул кнопкаНикаких градиентов
Никаких радиусов
Никаких псевдоэлементов
Только картинки
85
![Page 86: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/86.jpg)
Минимальная реализация<span class="button download-button">! Скачать! <span class="button-side"></span></span>
86
![Page 87: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/87.jpg)
Минимальная реализация.button {! position: relative;!! display: inline-block;
! padding-left: 20px;}
.button-side {! position: absolute;! left: 100%;!! width: 20px;}
87
![Page 88: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/88.jpg)
88
Скачать
![Page 89: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/89.jpg)
89
Скачать Без SMS
![Page 90: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/90.jpg)
Без SMS
90
Скачать
![Page 91: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/91.jpg)
91
Решение?.button {! position: relative;!! display: inline-block;!! margin-right: 20px;! padding-left: 20px;}
.button-side {! position: absolute;! left: 100%;!! width: 20px;}
![Page 92: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/92.jpg)
92
Скачать Без SMS
![Page 93: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/93.jpg)
93
Скачать Без SMS50px
![Page 94: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/94.jpg)
94
Решение?/** @note К любому margin-right надо прибавить 20! */.button {! position: relative;!! display: inline-block;!! margin-right: 20px;! padding-left: 20px;}
.download-button {! margin-right: 70px; /** 50 + 20 */}
![Page 95: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/95.jpg)
Развитие реализации<span class="button download-button">! <span class="button-content">Скачать</span>! <span class="button-side"></span></span>
95
![Page 96: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/96.jpg)
Развитие реализации.button {! display: inline-block;}
.button-content {! display: inline-block;!! padding-left: 20px;}
.button-side {! display: inline-block;!! width: 20px;}
96
![Page 97: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/97.jpg)
97
Скачать
![Page 98: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/98.jpg)
98
Скачать
50px50px
![Page 99: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/99.jpg)
Избавление от отступов.button {! display: inline-block;}
.button-content {! display: inline-block;
! padding-left: 20px;}
.button-side {! display: inline-block;!! width: 20px;}
99
![Page 100: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/100.jpg)
100
Скачать
50px50px
![Page 101: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/101.jpg)
101
Решение<span class="button">! <span class="button-left"></span>! <span class="button-right"></span>! <span class="button-content">Скачать</span></span>
![Page 102: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/102.jpg)
Решение.button {! position: relative;!! display: inline-block;}
.button-content {! position: relative;}
.button-left {! position: absolute;! left: 0;! right: 20px;}
.button-right {! position: absolute;! right: 0;!! width: 20px;} 102
![Page 103: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/103.jpg)
103
Скачать
50px50px
![Page 104: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/104.jpg)
104
Соответствие семантики и реализации
Реализация по подобию стандартных реализаций
![Page 105: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/105.jpg)
![Page 106: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/106.jpg)
![Page 107: Принципы разработки гибких и поддерживаемых интерфейсов](https://reader034.vdocuments.com.br/reader034/viewer/2022051314/55878a78d8b42a47318b46c1/html5/thumbnails/107.jpg)
Принципы разработки гибких и поддерживаемых интерфейсов
Вася Аксёнов@outring