Your SlideShare is downloading. ×
DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов - Аксенов Василий
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов - Аксенов Василий

2,169
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,169
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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