Сергей Горобцов: Идеологии разработки веб...
TRANSCRIPT
1
Graceful Degradation, ProgressiveEnhancement, Feature Detection,Responsive Web Designи Accessibility
Сергей Горобцов
разработчик интерфейсов
7 ноября 2013, ШРИ
2
Стратегии разработки1. Graceful Degradation (безопасная деградация)
2. Progressive Enhancement (прогрессивное улучшение)
3. и маленький бонус в виде Feature Detection (определение
возможностей браузера)
3
Graceful DegradationСпособность системы продолжать свою работу в случае отказа
некоторых её компонентов. И чем серьезней отказ, тем ниже качество
работы системы.
4
Тёплое с мягкимЧто же такое отказоустойчивость системы? Это прежде всего:
1. не отсутствие скруглённостей и градиентов у блоков
2. не фарш из контента и кусков оформления в старых браузерах
3. и тем более не плашка о том, что мой браузер устарел
5
Распечатай меня полностью<div class="printme">
<a href="javascript:window.print()">Распечатать</a>
</div>
.printme:before { background: url(print.png) no-repeat; }
Распечатать
01.
02.
03.
6
Распечатай меня полностью<div class="printme">
<a href="javascript:window.print()">Распечатать</a>
</div>
.printme:before { background: url(print.png) no-repeat; }
Распечатать
01.
02.
03.
7
Распечатай меня полностью<div class="printme">
<a href="javascript:window.print()">Распечатать</a>
</div>
01.
02.
03.
8
Распечатай меня полностью<div class="printme">
<a href="javascript:window.print()">Распечатать</a>
</div>
<noscript>
<div class="warning">Инструкция?</div>
</noscript>
01.
02.
03.
04.
05.
06.
9
Формы
10
Формы
Нестандартные чекбоксы
11
Формы
Cелектор <select />
12
Формы
Диапазонный селектор
13
Формы
Выбор форм-фактора
14
Верстаем<div class="checkbox">
<div class="checkbox__tick"></div>
новые
</div>
Плюс CSS, плюс JS и плюс немного магии. По тому же принципу
собираем и остальные контролы.
01.
02.
03.
04.
15
Что получаем
В случае отказа JS пользователь в печали уходит в закат
16
Приступаем к деградации<div class="checkbox">
<input type="checkbox" id="some_id">
<div class="checkbox__tick"></div>
<label for="some_id">новые</label>
</div>
01.
02.
03.
04.
05.
17
Результат
18
Диапазонный слайдер1. предусмотреть на серверной стороне отсутствие данных
2. передавать всегда минимальное и максимальное значения
3. дать возможность выбора
19
Диапазонный слайдер
20
Progressive EnhancementПрогрессивное улучшение предполагает создание веб-интерфейсов
поэтапно от простого к сложному. На каждом из этапов должен
получаться законченный веб-интерфейс.
1. HTML этап
2. CSS этап
3. CSS3 этап
4. JavaScript этап
21
HTML этап
22
CSS этап
23
CSS этап
24
CSS этап
25
CSS3 этап
26
JavaScript этап
27
Что же такое Progressive EnhancementProgressive Enhancement — это доведённый до совершенства Graceful
Degradation, за исключением следующих моментов:
• задает направление разработки от простого к сложному, а для
Graceful Degradation это не так важно.
• на первом месте контент, а для Graceful Degradation оно на втором
плане.
28
Немного о Feature DetectionМетод, при котором мы можем пытаться определять поддержку фич
путём проверки нужных полей / вызовов нужных методов.
30
Например в JavaScriptfunction detectCanvas() {
var canvas = document.createElement("canvas");
return canvas.getContext ? true : false;
}
detectCanvas() ? "счастье" : "тлен";
01.
02.
03.
04.
31
Modernizr<html class=“js canvas canvastext no-geolocation rgba
hsla multiplebgs borderimage borderradius boxshadow
cssanimations csscolumns cssgradients cssreflections
csstransforms csstransforms3d csstransitions video audio
webworkers applicationcache fontface”>
01.
02.
03.
04.
05.
32
Modernizr и Graceful Degradation.button {
border-radius: 5px;
}
.no-borderradius .button {
background-image: url('rounded_corners.png');
}
01.
02.
03.
04.
05.
06.
33
Modernizr и Progressive Enhancement.button {
background-image: url('rounded_corners.png');
}
.borderradius .button {
background-image: none;
border-radius: 5px;
}
01.
02.
03.
04.
05.
06.
07.
34
Расширяя возможностиFeature Detection стоит воспринимать как приятное дополнение
к Graceful Degradation или Progressive Enhancement, но не более.
35
Responsive Web Design
36
Responsive Web DesignАдаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-
страниц, обеспечивающий отличное отображение сайта на различных
устройствах, подключённых к интернету.
Адаптивный веб-дизайн — Википедия“
37
И опять холивары1. определять устройство и выбирать из некоторого множества
представлений дизайна
2. подстраивать дизайн под конкретный диапазон разрешений экрана
38
Разрешения экранов
39
О техниках1. Fluid Grid (http://alistapart.com/article/fluidgrids)
2. Fluid Images (http://alistapart.com/article/fluid-images)
3. Media Queries
40
Резиновый макет на основе пропорций.navigate {
width: 30%; /* 300px / 1000px = 0,30 */
float: left;
}
.content {
width: 70%; /* 700px / 1000px = 0,70 */
float: right;
}
01.
02.
03.
04.
05.
06.
07.
08.
41
Резиновый макет на основе пропорций.navigate__inner {
width: 15%; /* 45px / 300px = 0,15 */
float: left;
}
01.
02.
03.
04.
42
Резиновые изображения.img {
max-width: 100%;
}
01.
02.
03.
43
Резиновые изображения<picture alt="description of image">
<source src="small.jpg">
<source src="medium.jpg" media="(min-width: 400px)">
<source src="large.jpg" media="(min-width: 800px)">
<img src="small.jpg" alt="description of image">
</picture>
Более интересные способ: https://github.com/scottjehl/picturefill
01.
02.
03.
04.
05.
06.
44
Media Queries@media only screen and (min-width: 480px) { ... }
@media only screen and (min-width: 768px) { ... }
@media only screen and (min-width: 992px) { ... }
@media only screen and (min-width: 1382px) { ... }
01.
02.
03.
04.
45
Media Queries<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
01.
02.
03.
46
Media Queries/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) { ... }
/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) { ... }
01.
02.
03.
04.
05.
06.
47
Media Queries@media screen and (orientation: landscape) { ... }
@media screen and (orientation: portrait) { ... }
01.
02.
03.
48
Media Queries@media screen
and (min-width: 800px)
and (max-width: 1200px) { ... }
01.
02.
03.
49
BreakpointsТочки на шкале разрешений, при которых происходит применение
новых стилей.
0⩸⩸⩸⩸⩸⩸320⩸⩸⩸⩸⩸⩸768⩸⩸⩸⩸⩸⩸1024⩸⩸⩸⩸⩸⩸1280⩸⩸⩸⩸⩸⩸∞
50
Breakpoints@media only screen and (min-width: 320px) { ... }
0⩸⩸⩸⩸⩸⩸320⩸⩸⩸⩸⩸⩸768⩸⩸⩸⩸⩸⩸1024⩸⩸⩸⩸⩸⩸1280⩸⩸⩸⩸⩸⩸∞
51
Breakpoints@media screen
and (min-width: 800px)
and (max-width: 1200px) { ... }
0⩸⩸⩸⩸⩸⩸320⩸⩸⩸⩸⩸⩸800⩸⩸⩸⩸⩸⩸1024⩸⩸⩸⩸⩸⩸ 1200⩸⩸⩸⩸⩸⩸∞
01.
02.
03.
52
Mobile FirstСначало мобильники. Стратегия, при которой сначало ведётся
разработка для мобильных устройств и далее по нарастающей.
Есть мнение, что Progressive Enhancement + Mobile First это и есть
Responsive Design.
54
Accessibility
55
Немного статистики ВОЗВо всём мире:
• 250 000 000 со зрительной дисфункцией
• 100 000 000 с полной потерей зрения
В России:
• 147 000 официально зарегистрированных незрячих
56
Проблемы зрения• Близорукость и дальнозоркость
• Искажение цветового восприятия
• Полное отсутствие зрения
57
Искажение цветового восприятия
58
Относительная яркость(L1 + 0.05) / (L2 + 0.05), где L1 это относительная яркость более
светлого из цветов, и L2 это относительная яркость более темного из
цветов.
59
Собственная яркостьL = 0.2126 * R + 0.7152 * G + 0.0722 * B, где R, G и B определяются
как:
• если RsRGB <= 0.03928 то R = RsRGB/12.92 иначе R =
((RsRGB+0.055)/1.055) ^ 2.4
• если GsRGB <= 0.03928 то G = GsRGB/12.92 иначе G =
((GsRGB+0.055)/1.055) ^ 2.4
• если BsRGB <= 0.03928 то B = BsRGB/12.92 иначе B =
((BsRGB+0.055)/1.055) ^ 2.4
60
Нормативы WCAG(Web Content Accessibility Guidelines)
• для мелких шрифтов 7:1
• для крупных достаточно соотношения 4.5:1
61
Сравнения
21:1
1.3:1
62
Стандарты• Section 508
• WCAG 1.0 (http://www.w3.org/TR/WCAG10/)
• WCAG 2.0 (http://www.w3.org/TR/WCAG20/)
• WAI-ARIA (http://www.w3.org/TR/wai-aria/)
63
Програмное обеспечение• JAWS платная
http://www.freedomscientific.com/
• NVDA бесплатная
http://www.nvda-project.org/
• VoiceOver (Mac OS, iOS)
64
Что нужно делать• Соблюдайте семантику документа
• Соблюдайте требования стандартов
• Делать контент доступным для работы с клавиатуры
65
TabindexГоворя о доступности с клавиатуры, стоит упомянуть и работу с
tabindex
• tabindex не указан
• tabindex = 0
• tabindex > 0
• tabindex = -1
66
Что можно делать (WAI-ARIA)WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet
Applications) — стандарт доступности активных Интернет-
приложений, определяет подходы к тому, чтобы сделать содержимое
сайтов и интернет-приложения более доступными для людей
с ограниченными возможностями.
67
Roles• Abstract Roles
• Widget Roles
• Document Structure Roles
• Landmark Roles
http://www.w3.org/TR/wai-aria/roles
68
Применение ролей<div role="banner"></div>
<div>
<div role="navigation"></div>
<div role="main"></div>
</div>
<div role="contentinfo"></div>
01.
02.
03.
04.
05.
06.
69
Применение ролей<div role="banner"></div>
<div>
<div role="navigation"></div>
<div role="main"></div>
</div>
<div role="contentinfo"></div>
01.
02.
03.
04.
05.
06.
70
Применение ролей<div role="banner"></div>
<div>
<div role="navigation"></div>
<div role="main"></div>
</div>
<div role="contentinfo"></div>
01.
02.
03.
04.
05.
06.
71
Применение ролей<div role="banner"></div>
<div>
<div role="navigation"></div>
<div role="main"></div>
</div>
<div role="contentinfo"></div>
01.
02.
03.
04.
05.
06.
72
Роли и атрибуты<div class="checkbox"></div>
73
Роли и атрибуты<div class="checkbox"
role="checkbox"
></div>
01.
02.
03.
74
Роли и атрибуты<div class="checkbox"
role="checkbox"
tabindex="0"
></div>
01.
02.
03.
04.
75
Роли и атрибуты<div class="checkbox"
role="checkbox"
tabindex="0"
aria-checked="false"
></div>
01.
02.
03.
04.
05.
76
Роли и атрибуты<div class="checkbox"
role="checkbox"
tabindex="0"
aria-checked="true"
></div>
01.
02.
03.
04.
05.
77
Спасибо за внимание.Вопросы?
78